Relative+absolute positioning is your best bet: #header { position: relative; min-height: 150px; } #header-content { position: absolute; bottom: 0; left: 0; } #header, #header * { background: rgba(40, 40, 100, 0.25); } <div id=”header”> <h1>Title</h1> <div id=”header-content”>And in the last place, where this might not be the case, they would be of long standing, would … Read more
Unicode arrows heads: ▲ – U+25B2 BLACK UP-POINTING TRIANGLE ▼ – U+25BC BLACK DOWN-POINTING TRIANGLE ▴ – U+25B4 SMALL BLACK UP-POINTING TRIANGLE ▾ – U+25BE SMALL BLACK DOWN-POINTING TRIANGLE For ▲ and ▼ use ▲ and ▼ respectively if you cannot include Unicode characters directly (use UTF-8!). Note that the font support for the smaller … Read more
Multiple backgrounds! body { background: #eb01a5; background-image: url(“IMAGE_URL”); /* fallback */ background-image: url(“IMAGE_URL”), linear-gradient(#eb01a5, #d13531); /* W3C */ } These 2 lines are the fallback for any browser that doesn’t do gradients. See notes for stacking images only IE < 9 below. Line 1 sets a flat background color. Line 2 sets the background image … Read more
This works for me: #content { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; /* Need a specific value to work */ } <body> <div> <div id=”content”> I’m the content </div> </div> </body>
You could just use CSS without any javascript. Give your anchor a class: <a class=”anchor” id=”top”></a> You can then position the anchor an offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. -250px will position the anchor up 250px a.anchor { display: … Read more
The correct way to do this in modern browsers is to use Flexbox. See this answer for details. See below for some older ways that work in older browsers. Vertical Centering in CSS http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Article summary: For a CSS 2 browser, one can use display:table/display:table-cell to center content. A sample is also available at JSFiddle: div … Read more
Here are three solutions: Solution #1 – appearance: none – with Internet Explorer 10 – 11 workaround (Demo) — To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Remove default arrow */ background-image: url(…); /* Add custom … Read more
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container. If the container is the body, what you are looking for is Viewport-percentage lengths: The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial … Read more
Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari. .outer { display: table; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .middle { display: table-cell; vertical-align: middle; … Read more
This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though: textarea:focus, input:focus{ outline: none; } You may want to add some other way for users to know what element has keyboard focus though … Read more