CSS

Code By Charles

I write a lot of CSS for work in an effort to ween our huge site off of tables. The shear number of layout tables nested together makes updating a single page take hours and multiple pages take days. Here I will share some of my CSS code (which you could steal anyway) that I researched for hours on the Internet and finally made usable.

The most difficult thing to get rid of on any web page is the master layout table. I'm not going to tell you how to do that because there are so many other great sites that can help you with that. This page is about the CSS that I couldn't find anywhere in a usable format. I hope this will help you get rid of your tables.

CSS Navigation Menu from bullet list

This first code example creates the unordered list (<ul>) to menu bar transformation. See this code at work.

Source

/* Styles for Menu List */
#nav, #nav_home {
	color: #000;
	width: 150px;
	text-align: right; 
	padding: 0px;
	margin: 0px;
}

#nav ul, #nav_home ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#nav li, #nav_home li {
	background: #FFF;
	white-space: nowrap;
	margin: 0px;
	padding: 0px;
}

#nav a, #nav_home a {
	display: block;
	padding: 0px;
	margin: 0px;
	text-decoration: none;
}

#nav_home a:link, #nav_home a:visited,
#nav_home a:active {color: #000;}
#nav_home a:hover {color: #000; background: #CCC;}

#nav a:link, #nav a:visited,
#nav a:active {color: #000;}
#nav a:hover {color: #FFF; background: #00A28D;}

#navThispg a:link, #navThispg a:active,
#navThispg a:visited, #navThispg a:hover {
	color: #000;
	background: #CCC;
	cursor: default;
}

/* Fix IE. Hide from IE Mac \*/
* html #nav_home ul li { float: left; height: 1%; }
* html #nav_home ul li a { height: 1%; }
* html #nav ul li { float: left; height: 1%; }
* html #nav ul li a { height: 1%; }
/* End Hack */
/* End Styles for Menu List */

CSS Drop-down Menu from bullet list

For this is very similar to the code above, but it allows you to nest unordered lists to create submenus. This CSS also requires some javascript for it to work in Internet Explorer. You can see it in action.

Source

#home_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	/* border-bottom: 1px solid #ccc; */
	text-align: right;
}

#home_menu ul li {
	position: relative;
}
	
#home_menu li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
}

/* Styles for Menu Items */
#home_menu ul li a {
	display: block;
	text-decoration: none;
	color: #000;
	background: #fff; /* IE6 Bug */
	padding: 0px;
	/* border: 1px solid #ccc; */
	border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html #home_menu ul li { float: left; height: 1%; }
* html #home_menu ul li a { height: 1%; }
/* End */

/* Hover Styles */
#home_menu ul li a:hover {
	color: #FFF;
	background: #00A28D;
}

/* Sub Menu Styles */	
#home_menu li ul li a {
	padding: 2px 5px;
	font-size: 0.8em;
}

/* The magic */	
#home_menu li:hover ul, 
#home_menu li.over ul { 
	display: block;
}

If you need help with your code, just contact me.