How to make a horizontal definition list (dl, dd, dt)
CSS posted 12 months ago by christian
1 dl { float:left; width:100%; } 2 dt, 3 dd { float:left; width: 50px; margin:0; padding:0; } 4 dt { padding-right:0.5em; }
Trigger hasLayout for IE
CSS posted about 1 year ago by christian
1 <!--[if IE]><style> 2 .layout { 3 height: 0; 4 he\ight: auto; 5 zoom: 1; 6 } 7 </style><![endif]-->
How to make a DIV element fill the browser window
CSS posted about 1 year ago by christian
1 <html> 2 <body> 3 <style type="text/css"> 4 html, body { 5 height: 100%; 6 margin: 0; 7 padding: 0; 8 } 9 #container { /* div you want to stretch */ 10 background-color: green; 11 height: 100%; /** IE 6 */ 12 min-height: 100%; 13 } 14 </style> 15 <div id="container"> 16 This div should cover the whole page. 17 </div> 18 </body> 19 </html>
Here’s an example with header and footer.
Cheat sheet for calculating CSS specificity
CSS posted about 1 year ago by christian
1 * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ 2 li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ 3 li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ 4 ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ 5 ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ 6 h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ 7 ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ 8 li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ 9 #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ 10 11 style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ 12
From the CSS specificity calculator
Note that using the !important CSS declaration raises the CSS specificity so avoid it.
How to localize Rails routes
CSS posted about 1 year ago by christian
I forget this all the time:
1 map.resources :products, :as => 'productos', :path_names => { :new => 'nuevo', :edit => 'editar' }