CSS Examples:

The page is dedicated to all those CSS solutions I have found over time that I never wanted to lose track of. Some really great stuff here, Enjoy! Below you will see a mixture of both links and code.

Fluid Navigation
Grey Border
IE conditionals
Input Background
Styling Links
Double Class
Multiple Colums
Defining Font and Text
Centering Using Negative Margin
Sprites
Buy Button using Sprites
CSS position bottom
Backgrounds

Conditional divs that help you target specific IE's       Then close it: </div>  http://gallery.theopalgroup.com/selectoracle/
An excellent tool for understanding how selectors work.

/* Firefox Picks Up The !important IE 6 and 7 do not */ #FireFux { width:100px !imporant; width:50px; }

Selecting a child
tr:nth-child(2n+1) - Represents every odd row of an HTML table
tr:nth-child(odd) - Same
tr:nth-child(2n+0) - Represents every even row of an HTML table */
tr:nth-child(even) - Same
p > span - A span element child of an p element
E:nth-child(n) /* An E element, the n-th child of its parent
div > p:first-child /* Represents the p element that is the first child of a div element

The last P before the note.

The first P inside the note.

ol > li:last-child - Represents a list item li that is the last child of an ordered list ol.

Drilling down further
tr > td:last-of-type Represents the last data cell td of a table row tr.
p::first-letter { color: green; font-size: 200% } - first letter of each P element will be green with a font size of '+200%'.
div p *[href] - represents an element that (1) has the href attribute set and (2) is inside a p that is itself inside a div:

Selecting an element that contains a class
p.classy - Selects any paragraph element with class classy.

Learn more about selectors at w3.org. See a bunch of great examples on their tests page.

<div id="testy"> <p>1</p> <p>2</p> <p>3</p> </div> The style: #testy p:nth-child(2) {background-color:#ff0000; color:#ff0000;}

How to Center an Image with CSS
Set the image to a block level element then do margin auto. Below you will see an image horizontally centered image within a div.

#myImage {display:block; margin: 0 auto 0 auto;}

Fluid Top Nav with Fixed width left and right aligned blocks (Works in IE 6 and above)
See fluid nav with fixed width left and right elements example. See discussion on StackOverflow.

Remove Grey Dotted Border using CSS
Remove the grey dotted border around image links for both IE 8 and Firefox using CSS. /* No selectors needed - Removes grey dotted border around focused links IE8/FF */ :focus {outline:none;} ::-moz-focus-inner {border:0;}

Forcing Word Wrapping
Cross browser compatable method to wrap a link that exceeds its containing elements width.

The problem (The link is too long and overlaps)

A solution:

ul.wordWrapSolution {margin:0;} .wordWrapSolution li { width:150px; float:left; list-style-type:none; padding: 0 5px 0 0; } .wordWrapSolution li a { width:150px; white-space: -moz-pre-wrap; /* Mozilla */ word-wrap: break-word; /* IE 5+ */ border:1px #999 dashed; }

Forcing No Wrap
Cross browser compatable method to prevent text from wrapping.

Oh no you forced me to wrap!
Damn you for wrapping me.

Haha I aint wrapping for you!
Your Momma likes to wrap not me.

.noWrappin li { width:100px; border:1px dashed; white-space: nowrap; } More info: http://www.w3schools.com/cssref/pr_text_white-space.asp

Turn a link into a button

Get Sample

Get Sample - (Same link without style)

* The above is a anchor link styled with a background, padding, etc to look like a button

Search icon to an input field
.search { padding:3px 6px 3px 20px; width:275px; font-size:14px; background-image: url("image/searchinput.gif"); background-position: -2px 3px; background-repeat: no-repeat; }

Different States of a link to be applied to a class:
a.linky, a:hover.linky, a:active.linky, a:visited.linky {color:FF0000; font-weight:bold;}

OR defining links for an entire page
a:link, a:visited, a:active, a:hover {color: #FF0000;}

OR defining links for a specific DIV ID
#LinkDiv a:link, #LinkDiv a:visited, #LinkDiv a:active, #LinkDiv a:hoover {color: #FF0000;}

Thanks Román! Check out Román Cortés page.

LINKY via Class a.linky a:hoover.linky etc

DIV LINKY

Double Class:
You can in fact apply two classes to the same element. Thought I would share since I tried going about this the wrong way. Thanks Josh.

<span class="ClassNameOne ClassNameTwo">Blah Blah Blah</span>

Multiple Columns with CSS

Easy to implement and cross browser, cross platform compatible. Make sure that you include <div style="clear:both;"></div> after your columns so that subsequent information is displayed below your "table" and not to the right or left. (Thank you Maria!)

#main {width:600px;border:1px solid orange;}
#column1 {float: left;margin: 1em; background-color:red; width:150px; height:150px;}
#column2 {float: left;margin: 1em; background-color:blue; width:150px; height:150px;}
#column3 {float: left;margin: 1em; background-color:yellow; width:150px; height:150px;}

<div id="main">
	<div id="column1"></div>
	<div id="column2"></div>
	<div id="column3"></div>
<div style="clear:both;"></div>
</div>

Font Styling
Welcome to the world of font styling using CSS. An interesting article can be found here.

body {
font-family: "Trebuchet MS", arial, sans-serif;
font-size: 11px;

OR

font:12px "Trebuchet MS", arial, sans-serif;
color: #5F3E31;
line-height: 14px;
margin: 0;
padding: 0;
text-align: center;
}

Default font property values:

element {
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}

Fun with Lists

This is a list I was messing around with dealing with the list items floating left. The number of columns depends on the width settings.

ul.list {width: 420px; border:1px solid;}

ul.list li {
width: 190px;
float:left;	
margin-right: 10px;
background: url(http://images.thenestbaby.com/registry/bullet.gif) no-repeat 4px left;
padding-left: 10px;
}

* html ul.list li 
{width: 187px;}

.regText {
font-family: arial, verdana;
color: #5f3e31;
font-size: 10px;
font-weight: bold;
}

I am a list item look at me.

Basic list with a background image controled by pixel spacing:


ul.gwc_list {
padding-left:0;
margin:0;
list-style-type:none;
}

.gwc_list li {
background: url(image/blm_gwc_dot.gif) no-repeat 5px 2px;
padding-left: 7px;
}

One
Two
Three

Example of a basic list with indenting removed:

#guide_list {
padding-left:0;
margin-left:0;
}

#guide_list li {
list-style-type: none;
}


<ul id="guide_list">
<li><strong<a href="#">One</a></strong></li>
<li><strong><a href="#">Two</a></strong></li>
<li><strong><a href="#">Three</a></strong></li>
<li><strong><a href="#">Four</a></strong></li>
</ul>

What it looks like:

One
Two
Three
Four

Positioning of Background Image - Several Roll Over Type Effects Using CSS (Sprites):
*Using just one image and shifting it around. Click here to view background image.

test	test	test
test	test	test

.backSpot { margin-right:1em; display:block; width:100px; height:100px; background: #F3F2E2 url(http://www.aperfectmix.com/free_web_design/image/costa_rica.jpg) no-repeat; text-indent: -1000px; } .tucan { background-position:-100px 0px; } .tucan:hover { background-position:0px 0px; } .cougar {background-position:-100px 0px; } .cougar:hover { background-position:0px -100px; } .frog {background-position:-100px 0px; } .frog:hover { background-position:0px -200px; } .butterfly{background-position:-100px 0px; } .butterfly:hover { background-position:0px -300px; } .i{ background-position:-100px 0px; } .i:hover { background-position:0px -300px; } .j{background-position:-100px 0px; } .j:hover { background-position:0px -300px; } Learn more about sprites at Smashing Magazine. Also see the Site Point article. Or this W3School Article

Buy Buttons using Sprite as background:

Both buttons use the same background image. The only differece is in the positioning.

Here is the actual background image:

Fun with backgrounds and CSS:

Value	Description
background-color	Specifies the background color to be used
background-image	Specifies the background image to be used
background-repeat	Specifies how to repeat the background image
background-attachment	Specifies whether a background image is fixed or scrolls with the rest of the page
background-position	Specifies the position of the background image
inherit	Specifies that the setting of the background property should be inherited from the parent element

Repeat Horizontally - background:url(image/kitty-bg.jpg) repeat-x;

Repeat Vertically - background:url(image/kitty-bg.jpg) repeat-y;

Repeat Both - background:url(image/kitty-bg.jpg) repeat;

Background Position - background:url(image/kitty-bg.jpg) no-repeat 10px 20px; X then Y:

Background Position - background:url(image/kitty-bg.jpg) right center;

Centering a div
Also see my example of centering a two column div compatible with IE's. Vertical & Horizontal - Check out Dead Center (IE 6 compatible)

Method 1:
<div style="text-align: center;"> <div style="margin: 0 auto;">Content Here. 0 = Vertical Auto = Horizontal Centering</div> </div> #CenterMe2 { width:500px; margin: 0 auto; border:1px solid #FF0000; text-align:left; } IE is retarded so you have to use the text-align:center; tag on the outside div then text-align:left; on the inside div

Method 2:

body {margin:0px; padding:0px;}

#CenterMe {
	position:absolute;
	left:50%;
	width:500px;
	margin-top:50px; 
	margin-left:-250px; /* Set to half width. */
	padding:15px;
	border:1px dashed #333;
	background-color:#eee;
	}
    
    body {margin:0px; padding:0px;} 
/* You should set body margin and padding 4 browser consistency. */

Credit to Blue robot
Another good article on this

Another Example - http://www.sitecrafting.com/blog/to-center-div/

Vertical Alignment
Goal is to vertical align an element within another element.

Method 1 (using absolute positioning)

Centered (No IE =[ )

Method 2:

Centered (No IE =[ )

Vertical Align Articles
- http://phrogz.net/CSS/vertical-align/index.html - Great instructional article.
- http://blog.themeforest.net/tutorials/vertical-centering-with-css/ - Offers good solutions.
- http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm (absolute positioning)
- http://www.pmob.co.uk/pob/vertical-center1.htm - Another solution
- http://www.alistapart.com/d/footers/footer_variation1.html Javascript Solution
- My IE6 example

Position a div in a fixed position at the bottom of a page
position:fixed; sets the div in a fixed position. The fixed property absolutely positions the div element relative to the browser window. Learn more here.

Fixed Div - Works in IE
View source to see conditional CSS used.

See stack overflow

Background Positioning:
W3 School page on backgrounds

CSS Pop Ups:
Here are links to various CSS popup explanations I found useful: