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

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.

Deer Park Update Option

It looks like the Deer Park Check For Updates option now works. However you have to change the url that it uses to check for the latest version. You can use the about:config url to change the setting: app.update.url. The url to use is: (more…)

Firefox 1.5 – It’s Coming Soon

2005 will be the year of the new browser wars for sure. Although Apple’s Safari RSS did not seem much more than a few bug fixes and RSS support, the announcement of IE7 was a good sign of the impending battles between all the browsers. However Firefox 1.5 is coming closer to beta, as you can see it is already in Alpha 2.

Deer Park Alpha 2

If you decide to try out Deer Park, make sure you disable the ImageZoom extension as it has a bug that causes DP to render some text underneath the status bar. Other than that Deer Park is pretty good at disabling extensions that are not compatible.

If you just can’t live without a theme, according to this post on the Mozillazine forums, there is a version of Qute already ported for Deer Park.

Button Maker for your Blog

I spent most of the end of last week, linking to blog directories and changing the the sidebar to incorporate these blog directories web buttons, or as I call them web badges. Not all of the sites had their own web button, so I had to create a couple of them and the process is rather easy. You can go to Adam Kalsey’s site and use his very handy buttonmaker to make just about any web linking button you want.

All the buttons are 80 x 15 in dimension and are so easy to make that I made a few for WebKeyDesign:

WebKeyDesign.com

WebKeyDesign.com

Feel free to download and use any of the buttons on your own site. Just rename to wkd.png and use the following code with the proper url for the img src location.

<a href="https://www.webkeydesign.com/"><img src="wkd.png" alt="WebKeyDesign" title="WebKeyDesign" width="80" height="15" /></a>