DZone Snippets: css code

Need to center the content div

dropthezero (Jonathan) — Wed, 18 Jun 2008 19:52:09 GMT

// description of your code here







	

	

		Classroom

Use the current filename as the HTML body id

milkshake (milkshake) — Wed, 11 Jun 2008 19:05:36 GMT

// Makes the body id = the current filename - extension
// Useful while working on static markup that relies on styles/scripts targeting the current page



	$page = $_SERVER['PHP_SELF'];

	$page = str_replace("/","",$page);

	$page = str_replace(".php","",$page);

?>

Fix PNG transparent IE6

ki4ngel (Benoit Asselin) — Sun, 01 Jun 2008 07:22:55 GMT



function fixPNG() {

	if(navigator.appName == 'Microsoft Internet Explorer') {

		var png = /\.png$/i;

		var imgs = document.getElementsByTagName('img');

		for(var i = 0, l = imgs.length; i < l; i++) {

			if(png.test(imgs.item(i).src)) {

				imgs.item(i).style.width = imgs.item(i).offsetWidth;

				imgs.item(i).style.height = imgs.item(i).offsetHeight;

				imgs.item(i).style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + imgs.item(i).src + '\',sizingMethod=\'image\')';

				imgs.item(i).src = 'empty.gif';

			}

		}

	}

}

Retour à la source : PNG transparent 24 bits for Internet Explorer 6

Image Rotate with CANVAS

ki4ngel (Benoit Asselin) — Sun, 18 May 2008 15:22:51 GMT



	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">







	

	rotate()

	

	





















	rotate:

Source: AB-D.fr - Effectuer une rotation d'image en CSS ( rotate balise canvas HTML5 )

Floating 2 column layout

adevstar (Nick) — Fri, 16 May 2008 03:56:37 GMT

Basic CSS with global clear



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 

p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, 

dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, 

sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 

table, caption, tbody, tfoot, thead, tr, th, td {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-weight: inherit;

    font-style: inherit;

    font-size: 100%;

    font-family: inherit;

    vertical-align: baseline;

    background: transparent;

}



:focus {

    outline: 0;

}



div#wrapper{

	width:800px;

	margin:0px auto;

}



div#header{



}



div#left{

	float:left;

	width:380px;

}



div#right{

	float:right;

	width:380px;

}



div#footer{



}



.clear{

	clear:both;

}

HTML













<%= stylesheet_link_tag "application" %>

Giving form labels a width

Booma (Alan Coleman) — Tue, 22 Apr 2008 10:52:08 GMT

For some reason this has always bugged me in the past. When using a label they don't comply with width unless accompanied by a float. I've used em to define the width so that is conforms with browser text settings. Dead simple



label {

	margin-right:10px;

	width:10em;

	float:left;

}

Adding style to SVG

jrobertson (James Robertson) — Fri, 18 Apr 2008 21:37:11 GMT

To reference a CSS file within an SVG file refer to the following example code.

Here's what an SVG CSS file looks like.



.str1 {stroke:#0093DD;stroke-width:16;color:#0093DD}

.str2 {stroke:#0093DD;stroke-width:12}

.str3 {stroke:#0093DD;stroke-width:10}

.str4 {stroke:#0093DD;stroke-width:6}



.str0 {stroke:#DA251D;stroke-width:55;color:#DA251D}

.str6 {stroke:#BB90BB;stroke-width:44;color:#BB90BB}

.str5 {stroke:#0093DD;stroke-width:4}

.str7 {stroke:#1F1A17;stroke-width:13}



.fil0 {fill:none}

.fil2 {fill:#1F1A17}

.fil1 {fill:#C4E5FA}

.fil3 {fill:#FFFFFF}

Source: Example for using CSS-Styles [carto.net]
Reference: Styling - SVG 1.1 - 20030114 [w3.org]

Cursor styles used in CSS

jrobertson (James Robertson) — Sun, 06 Apr 2008 23:37:30 GMT

Source: Custom CSS Cursors [javascriptkit.com]



cursor: default;

cursor: hand;

cursor: pointer;

cursor: pointer; cursor: hand;

cursor: crosshair;

cursor: text;

cursor: wait;

cursor: help;

cursor: move;

cursor: e-resize;

cursor: ne-resize;

cursor: nw-resize;

cursor: n-resize;

cursor: se-resize;

cursor: sw-resize;

cursor: s-resize;

cursor: w-resize;

cursor: progress;

cursor: all-scroll;

cursor: col-resize;

cursor: no-drop;

cursor: not-allowed;

cursor: row-resize;

cursor: url(mycursor.cur); /* Note: Only .cur and .ani file types are supported as of IE6. */

cursor: vertical-text;

Force scrollbar with CSS

t0b1 (T.B.) — Sun, 06 Apr 2008 21:11:26 GMT

// Force Scrollbar



html {overflow: scroll}

CSS true centering

elliottcable (elliott cable) — Wed, 19 Mar 2008 07:30:22 GMT

This will truely center something in CSS. Not tested in IE, knowing IE, it will burn in flames.



#center-me { /* There can be only one Centerlander! */

  height: 100%;

  display: table !important;

  margin: auto;

}



#center-me > * {

  display: table-cell !important; /* Don't touch me! I MEAN IT! DON- ... don't touch me. Really, don't touch me. */

  vertical-align: middle !important;

}





  I'm centered!