by WebKeyDesign | Aug 15, 2005 | CSS
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 Demo and CSS Menu StyleSheet
by WebKeyDesign | Aug 12, 2005 | CSS
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.
by WebKeyDesign | Aug 11, 2005 | Firefox
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…)
