|
|
Posted by Jonathan N. Little on 06/04/07 21:38
BTM wrote:
>> "Frames" can be done with CSS. Or put the menu in an iframe.
>>
>>> Thinking the menu bar on the left takes up too much room, thinking of
>>> going for a smaller font and reducing the length of the boxes.
>> Your menu is image files. Using text instead allows users to specify their
>> own fonts, sizes instead.
>> Consider using css to provide visual cues of live menu items rather than
>> javascript.
>
> Er,,, not exactly sure I know how to do that... I THINK I understadn
> what you're saying... don't do a lot direct editing of the CSS (only
> had a beginner's class in Web Design...)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>No JavaScript</title>
<style type="text/css">
html, body {
margin: 0; padding: 0; font: 100%/1.4 arial, helvetica, sans-serif;
}
ul#navbar {
margin: 0; padding: 0; list-style: none;
/* set width relative to font */
width: 10em; float: left;
}
ul#navbar li {
margin: 0; padding: 0;
}
ul#navbar li A {
/* make into block element to fill space and center text */
display: block; padding: .5em 0; text-align: center;
/* base color */
color: #eb5; background-color: #863;
/* set size relative to base font */
font-size: 1.2em; font-weight: bold; text-decoration: none;
}
ul#navbar li A:hover,
ul#navbar li A:active,
ul#navbar li A:focus {
/* set the hover effect, you could use a background image
to more closely mimic your original page */
color: #fff; background-color: #530;
}
</style>
</head>
<body>
<!--
MSIE has a whitespace bug that added extra spacing, to fix
remove whitespace between closing LI and next opening LI tag
-->
<ul id="navbar">
<li><a href="#">About Us</a></li><li>
<a href="#">What's New</a></li><li>
<a href="#">Prospective Owners</a></li><li>
<a href="#">Volunteers</a></li><li>
<a href="#">Donors</a></li><li>
<a href="#">Links</a></li><li>
<a href="#">Contact Us</a></li>
</ul>
<p>The rest of your page...</p>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|