The most common way to do this is something along these lines: ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 1em; text-indent: -.7em; } li::before { content: “• “; color: red; /* or whatever color you prefer */ } <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed … Read more
You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div’s height and width to shift the center towards the middle of the div. Thus, provided a <!DOCTYPE html> (standards mode), this … Read more
Theory Looking at current implementation of the pinterest site (it might change in the future), when you open the overlay a noscroll class is applied to the body element and overflow: hidden is set, thus body is no longer scrollable. The overlay (created on-the-fly or already inside the page and made visible via display: block, … Read more
You can use calc: height: calc(100% – 18px); Note that some old browsers don’t support the CSS3 calc() function, so implementing the vendor-specific versions of the function may be required: /* Firefox */ height: -moz-calc(100% – 18px); /* WebKit */ height: -webkit-calc(100% – 18px); /* Opera */ height: -o-calc(100% – 18px); /* Standard */ height: … Read more
Below are 4 different methods of mine: In each example the texts are freely-editable to illustrate how the content would render in different scenarios. 1) Flexbox body{ height:100vh; margin:0; } header{ min-height:50px; background:lightcyan; } footer{ min-height:50px; background:PapayaWhip; } /* Trick */ body{ display:flex; flex-direction:column; } footer{ margin-top:auto; } <body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> … Read more
Floats are okay, but problematic with IE 6 & 7. I’d prefer using the following on the inner div: margin-left: auto; margin-right: 0; See the IE Double Margin Bug for clarification on why.
There’s an experimental CSS property called text-stroke, supported on some browsers behind a -webkit prefix. h1 { -webkit-text-stroke: 2px black; /* width and color */ font-family: sans; color: yellow; } <h1>Hello World</h1> Another possible trick would be to use four shadows, one pixel each on all directions, using property text-shadow: h1 { /* 1 pixel … Read more
Chain both class selectors (without a space in between): .foo.bar { /* Styles for element(s) with foo AND bar classes */ } If you still have to deal with ancient browsers like IE6, be aware that it doesn’t read chained class selectors correctly: it’ll only read the last class selector (.bar in this case) instead, … Read more
Use a comma to specify two (or more) different rules: @media screen and (max-width: 995px), screen and (max-height: 700px) { … } From https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in … Read more
Let’s break down your examples one by one. @media (max-width:632px) This one is saying for a window with a max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases. @media screen and (max-width:632px) This one is saying for … Read more