Category: CSS

CSS Navigation Menu

It is possible to create a simple navigation menu box with CSS. In fact I see this same style of menu for many of the templates for Mambo and WordPress. Here is a code sample of such a menu:

#menu_box {
	width: 200px;
	font-family: Verdana, Helvetica, sans-serif;
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
}

#menu_box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu_box li {
	border-botom: 1px solid #666666;
}

#menu_box li a {
	display:block;
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid #0066CC;
	border-right: 1px solid #666666;
	background-color: #CCCCCC;
	color: #FFFFFF;
	text-decoration: none;
}

#menu_box li a:hover {
	background-color: #0066CC;
	color: #FFFFFF;
}

The end result is a menu without tables, that highlights when you hover over any of the links.

CSS Menu Example

CSS Menu Demo and CSS Menu StyleSheet

Filed under: CSSTagged with: , , ,

CSS Text Tips

Here are a few basic CSS tips that you should learn if you are new to using stylesheets.

Basic Mouseover Color Links:

a:link, a:visited {
     text-decoration: underline;
     color: #0000FF;
}

a:hover, a:active {
     text-decoration: none;
     color: #DC143C;
}

Note: Links should be specified in the following order:

  • link
  • visited
  • hover
  • active

Underline Effect for Headings:

h1 {
     font:  Verdana, Arial, sans-serif;
     padding: 3px;
     border-bottom: 1px solid #000000;
}

Basic Indent For Paragraphs:

.indent {
     padding-left: 20px;
}

In the html code you would simply use the paragraph tag like this:

<p class="indent">This is my paragraph text.</p>

Use Images For List Bullets:

ul {
     list-style-images: url(image_name.gif);
}

This should make all of the li tags inherit the setting.

Filed under: CSS

CSS Fluid Style Template

Fluid CSS Template in FirefoxI was working on making a simple CSS template that would have a header, a sidebar, a content area, and of course a footer. The result being this simple template that has a fixed left sidebar.

Feel free to download it.

It is available on the WebKeyDesign Forum.

If you are looking for a basic template for text only pages, check out the Beginner’s CSS Template. This template is good for those privacy notices, and other legal pages that don’t have graphics and such.

Filed under: CSSTagged with: , ,