How to stretch content to fill browser's height
HTML posted about 1 year ago by christian
Note that load_translations and store_translations have been removed.
1 <html> 2 <body> 3 <style type="text/css"> 4 html, body { 5 overflow: hidden; 6 height: 100%; 7 max-height: 100%; 8 margin: 0; 9 padding: 0; 10 } 11 12 #container { 13 display: block; 14 overflow: hidden; 15 background-color: green; 16 height: 100%; /** IE 6 */ 17 min-height: 100%; 18 } 19 20 #navigation { overflow: auto; float: left; width: 260px; background: white; height: 100%; } 21 22 #content { overflow: auto; background: blue; margin-left: 260px; height: 100%; border-bottom: 2px solid white;} 23 24 </style> 25 <div id="container"> 26 <div id="navigation"> 27 <p>Content</p> 28 <p>Content</p> 29 <p>Content</p> 30 <p>Content</p> 31 <p>Content</p> 32 <p>Content</p> 33 <p>Content</p> 34 <p>Content</p> 35 <p>Content</p> 36 <p>Content</p> 37 <p>Content</p> 38 <p>Content</p> 39 <p>Content</p> 40 <p>Content</p> 41 <p>Content</p> 42 <p>Content</p> 43 <p>Content</p> 44 <p>Content</p> 45 <p>Content</p> 46 <p>Content</p> 47 <p>Content</p> 48 <p>Content</p> 49 <p>Content</p> 50 <p>Content</p> 51 <p>Content</p> 52 <p>Content</p> 53 <p>Content</p> 54 <p>Content</p> 55 <p>Content</p> 56 <p>Content</p> 57 <p>Content</p> 58 <p>Content</p> 59 <p>Content</p> 60 <p>Content</p> 61 <p>Content</p> 62 <p>Content</p> 63 <p>Content</p> 64 <p>Content</p> 65 <p>Content</p> 66 <p>Content</p> 67 <p>Content</p> 68 <p>Content</p> 69 <p>Content</p> 70 <p>Content</p> 71 <p>Content</p> 72 <p>Content</p> 73 <p>Content</p> 74 <p>Content</p> 75 <p>Content</p> 76 <p>Content</p> 77 <p>Content</p> 78 <p>Content</p> 79 <p>Content</p> 80 <p>Content</p> 81 <p>Content</p> 82 <p>Content</p> 83 <p>Content</p> 84 <p>Content</p> 85 <p>Content</p> 86 <p>Content</p> 87 <p>Content</p> 88 <p>Content</p> 89 <p>Content</p> 90 </div> 91 <div id="content"> 92 <p>Content</p> 93 <p>Content</p> 94 <p>Content</p> 95 <p>Content</p> 96 <p>Content</p> 97 <p>Content</p> 98 <p>Content</p> 99 <p>Content</p> 100 <p>Content</p> 101 <p>Content</p> 102 <p>Content</p> 103 <p>Content</p> 104 <p>Content</p> 105 <p>Content</p> 106 <p>Content</p> 107 <p>Content</p> 108 <p>Content</p> 109 <p>Content</p> 110 <p>Content</p> 111 <p>Content</p> 112 <p>Content</p> 113 <p>Content</p> 114 <p>Content</p> 115 <p>Content</p> 116 <p>Content</p> 117 <p>Content</p> 118 <p>Content</p> 119 <p>Content</p> 120 <p>Content</p> 121 <p>Content</p> 122 <p>Content</p> 123 <p>Content</p> 124 <p>Content</p> 125 <p>Content</p> 126 <p>Content</p> 127 <p>Content</p> 128 <p>Content</p> 129 <p>Content</p> 130 <p>Content</p> 131 <p>Content</p> 132 <p>Content</p> 133 <p>Content</p> 134 <p>Content</p> 135 <p>Content</p> 136 <p>Content</p> 137 <p>Content</p> 138 <p>Content</p> 139 <p>Content</p> 140 <p>Content</p> 141 <p>Content</p> 142 <p>Content</p> 143 <p>Content</p> 144 <p>Content</p> 145 <p>Content</p> 146 <p>Content</p> 147 <p>Content</p> 148 <p>Content</p> 149 <p>Content</p> 150 <p>Content</p> 151 <p>Content</p> 152 <p>Content</p> 153 <p>Content</p> 154 <p>Content</p> 155 156 </div> 157 </div> 158 </body> 159 </html> 160
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 make rounded buttons with the button element
HTML posted over 2 years ago by christian
25 pixel high buttons at your service:
1 button { 2 border: 0; 3 padding: 0; 4 font-variant: small-caps; 5 height:25px; 6 background: transparent url('../images/button-background-left.png') no-repeat; 7 cursor: pointer; 8 text-align: center; 9 } 10 11 button span { 12 font-family: georgia,serif; 13 line-height: 25px; 14 background: transparent url('../images/button-background.png') no-repeat top right; 15 position:relative; 16 display:block; 17 white-space:nowrap; 18 margin-top: -2px; 19 padding:0 15px; 20 }
HTML :
1 <button type="submit" value="Hello"><span>Hello »</span></button>
IE 6 & 7 might need:
1 button { 2 width:auto; 3 overflow:visible; 4 } 5 button span { 6 margin-top:1px; 7 }
References
- http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/
- http://particletree.com/features/rediscovering-the-button-element/
Combining CSS and JavaScript files with PHP to reduce page load time
PHP posted over 2 years ago by christian
This is a very simple utility class that I created which combines multiple files into one—in contrast to all other PHP scripts I’ve found elsewhere, which all work badly and are a million lines long, this one is simple to understand and maintain:
1 <?php 2 class Files 3 { 4 private static function process($files, $output, $base_dir = '') 5 { 6 $contents = ''; 7 8 # If this is a string then it's a search pattern 9 if(is_string($files)) 10 { 11 $files = glob($files); 12 } 13 14 foreach ($files as $file) 15 { 16 $contents .= file_get_contents($base_dir.$file) . "\n\n"; 17 } 18 19 # TODO locking 20 if ($fp = fopen($output, 'wb')) 21 { 22 fwrite($fp, $contents); 23 fclose($fp); 24 } 25 26 return $contents; 27 } 28 29 # 30 # Combine all CSS files in the css directory: 31 # 32 # echo Files::combine("css/*.css", "css/all.css"); 33 # 34 # Combine only specified files in the given order: 35 # 36 # echo Files::combine(array("css/core.css", "css/default.css"), "css/all.css"); 37 # 38 # 39 static function combine($files, $output_filename, $base_dir = '') 40 { 41 # Combine the files 42 if(!file_exists($output_filename)) 43 { 44 self::process($files, $output_filename, $base_dir); 45 } 46 } 47 } 48 ?>
The call to Files::combine should go in a file that is called on each request. On the first request to this file, the files are combined into one, on subsequent requests nothing is done, the only overhead is a call to file_exists.
Ideally the name of the output filename should contain a version number, so that an updated CSS file is not taken from the browser cache. This can easily be supported by reading the build number from somewhere and appending it to the output filename:
1 Files::combine("css/*.css", "css/all-v$version.css");
Now all you have to do is add this to your HTML :
1 <link rel="stylesheet" type="text/css" href="/css/all-v<?php echo $version ?>.css" media="screen" />
This also works for JavaScript files. Note that I don’t make an effort to minify anything as GZIP usually does a great job at minimizing bandwidth costs.
Show and Hide (toggle) the Blueprint Grid with a JavaScript
JavaScript posted over 2 years ago by christian
This snippet-which could be improved on-allows you to easily display and hide the BlueprintCSS grid.
Put the following code inside the <head> element:
1 <style title="grid" type="text/css"> 2 .container { } 3 </style> 4 <script type="text/javascript"> 5 function toggleGrid() { 6 if (!document.styleSheets) return; 7 8 var cssTitle = "grid" 9 var selectorName = ".container"; 10 var cssText = "background: url('images/grid.png');"; 11 var css = new Array(); 12 13 // Find the stylesheet 14 for(i = 0; i < document.styleSheets.length; i++) 15 { 16 var styleSheet = document.styleSheets[i]; 17 18 if(styleSheet.title == cssTitle) { 19 if (document.styleSheets[i].cssRules) 20 css = document.styleSheets[i].cssRules; 21 else if (document.styleSheets[i].rules) 22 css = document.styleSheets[i].rules; 23 else return; 24 25 break; 26 } 27 } 28 29 // Find the selector 30 for (i = 0; i < css.length; i++) { 31 32 if ((css[i].selectorText.toLowerCase() == selectorName)) { 33 if(css[i].style.cssText == "") { 34 css[i].style.cssText = cssText; 35 } 36 else { 37 css[i].style.cssText = ""; 38 } 39 } 40 } 41 } 42 </script>
Change selectorName or cssText, if needed. Next add the following link, for example, to the footer:
1 <a href="javascript:toggleGrid();" id="toggle-grid">Show grid</a>
Now when you click the link, the grid will be displayed. Click again to hide it.
Note that this is a simple example of how to change a CSS style sheet dynamically with JavaScript. You can use it to change any selector at runtime.