CSS horizontal menu!

[tomandjerry]

is this correct??

<style type="text/css">
<!--
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.solidblockmenu{
border-left:0px solid #009900; border-right:0px solid #009900; border-top:1px solid #009900; border-bottom:1px solid #009900; margin:0 0 0 0; padding:0; float: left;
width: 100%;
background: white url('default.gif') repeat-x center; font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:tahoma
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: #009900;
padding: 8px 9px;
text-decoration: none;
border-right: 1px solid #ffffff;
border-left: 1px solid #6f9c6f;
}

.solidblockmenu li a:visited{
color: #6f9c6f;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: url('over.gif') repeat-x center;
}

.imagesearch{
margin-left: 2px;
}

.typeform{
border: 1px solid #6f9c6f;
margin-left: 4px;
padding-top: 3px;
font-family: tahoma;
font-size: 11px
}

.button{
background: url('over.gif');
border: 1px solid #6f9c6f;
padding-left: 2px;
margin: 7px 0px 0px;
font-family: tahoma;
font-size: 11px
}

.search{
margin: 0px 0px 0px 0px;
}

.footer a:hover{
background-color: #009900;
text-decoration: none;
}

.footer a:visited{
text-decoration: none;
color: white;
}

body {
background: url('background.gif') repeat-x fixed top;
margin: 0px auto;
}
-->
</style>

<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->

this code can be paste anywhere in the body tag:

<ul class="solidblockmenu">
<li><a href="your link"><span><img src="homeicon.gif" hieght="13" width="13" border="0"> </span>Home</a></li>
<li><a href="your link">your link</a></li>
<li><a href="your link">your link</a></li>
<li><a href="your link">your link</a></li>
<li><a href="your link">your link</a></li>
<li><a href="your link">your link</a><form method="get" action="http://search.yahoo.com/bin/search" class="search">
  <img border="0" src="search.gif" width="14" height="14" class="imagesearch"><input type="text" name="p" size="16" class="typeform"> 
  <input type="submit" value="Search" name="B1" class="button"></form>
</li>
</ul>

for the over and default:

[boogyman]

It would work yes, but there are a few elements that you do not need, and some that I always like to use for semantics.

[quote]
.solidblockmenu{
border-left:0px solid #009900;
border-right:0px solid #009900;
border-top:1px solid #009900;
border-bottom:1px solid #009900;
margin:0 0 0 0;
padding:0;
float: left;
width: 100%;
background: white url('default.gif') repeat-x center;
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:12px;
font-family:tahoma
}
[quote]

ul.solidmenu

By using the element type it is easier to debug the code later, not necessary but semantically I think it creates for better coding technique.

border-left:0px solid #009900;
border-right:0px solid #009900;
border-top:1px solid #009900;
border-bottom:1px solid #009900;

this can be simplified.

border: 1px solid #009900;
border-left: none;
border-right: none;

if you do choose to keep yours... there is no reason to have the solid #009900 because you set the width to zero pixels.. eg no border

margin:0 0 0 0;

margin: 0;

no need for the other 3

float: left;

not needed

background: white url('default.gif') repeat-x center;

try to use the hexadecimal color codes, and I always try to set the image path from the domain, because sometimes you can move around a style sheet, but if you have the image set to the "absolute relative" path it will not be a problem.

background: #fffff url('/images/default.gif') repeat-x center;

where
www.domain.com/images/default.gif

font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:12px;
font-family:tahoma

unless you want these different from the rest of the page, these really should be set in the body
Note: you should only set the font-size explicitly once in the body tag, then every where else use percentages.
eg

<body>
     <ul class="solidblockmenu>

body {
     font-size: 12px;
}
ul.solidblockmenu {
     font-size: 80%;
}

this will enable you to change the font size of the page with only 1 declaration and not break the natural flow and fluency

.solidblockmenu li{
display: inline;
}

since this is horizontal I suppose you would like to get rid of the bullets?

ul.solidmenu li {
     display: inline;
     list-style-type: none;
}

.solidblockmenu li a{
float: left;
color: #009900;
padding: 8px 9px;
text-decoration: none;
border-right: 1px solid #ffffff;
border-left: 1px solid #6f9c6f;
}

float: left;

not needed

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: url('over.gif') repeat-x center;
}

color: white;

hexadecimal again

background: url('over.gif') repeat-x center;

if someone has images turned off they will not be able to see the difference, so its always good coding practice to assign a base color thats close to the color of the image so the page won't become broken if you do not want any background, you can set it to transparent, and it will inherit the background color of its parent element (element that it is within)... also again the image path to prevent broken path if the stylesheet is moved

background: #hexadecimal url('/images/over.gif') repeat-x center;

body {
background: url('background.gif') repeat-x fixed top;
margin: 0px auto;
}

Always assign the body styles at the top.
also this will center the page horizontally but the default is 100%, so really there is nothing to center. if you wanted to limit the width you would need to supply a width to the declaration.... be careful though because browsers handle pixels differently. and you do not want to punish those with really big / really small screen resolutions, so again percentages would be the best way to go. also set a default background color.

body {
background: #ffffff url('/images/background.gif') repeat-x fixed top;
margin: 0px auto;
width: 90%;
min-width: 770px; /* 800x600 Friendly */
}

there are a couple of repeat tag errors in the css but that looks fine...

now only html.

<li><a href="your link"><span><img src="homeicon.gif" hieght="13" width="13" border="0"> </span>Home</a></li>

the extra span is not needed, it is just extraneous code, you will stil be able to reach the image tag in your css by

ul.solidblockmenu li a img {
     property: value;
}

Overall it's nice... the only other constructive criticism I would have is to apply some whitespace indentation to the elements, for debugging sake but again that is more coding practice then necessary.

if you have any other questions we're here to help you