MENU BAR Question! Use varying button widths? [Archive]

zeech26

03-25-2009, 11:31 PM

Hello, please see my menu bar and CSS code here:
http://contentx.com/EDI/

I have stolen this CSS code from Apple's site to enable a four state graphic menu bar. I have done this in the past with my own designs, but the width of each button is always the same.

This layout was generated by the client, and each button has a varying width which is effected by this part of the CSS:
#globalheader #globalnav li a { float: left; width: 110px; height: 0; padding-top: 20px; overflow: hidden; }

Can I specify varying widths for the this so that each button highlites correctly?

I am a beginner to intermediate CSS coder, so any info would be so greatly appreciated!

Cheers
zack

bluewalrus

03-26-2009, 10:48 PM

Ok i thought this code was completly different dont what your doing with the one image and try to seperate it. try this out, adjust the background color to yours on #globalnav and #globalnav li a.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Efficient Drive Trains Inc.</title>
<style type="text/css">
.footer {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: black;
text-indent: 12pt;
}
body {
background-color: #ffffff;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-size: 9pt;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
padding-top: 18px;
}
.masthead {width: 800px; margin: 18px auto 0px auto; position: relative;}
.copy {width: 800px; margin: 18px auto 0px auto; position: relative; padding: 25px;}

a:visited { color: #214d8c;}
a:hover { }
a:active { color: #32586C;}

/* GLOBALHEADER */
#globalheader { width: 800px; height: 20px; margin: 0px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalnav {width:800px; background-color:#FECB68}
#globalnav li { display: inline; }
#globalnav li a {background:#FECB68; text-decoration:none; height:20px; text-align:center; float:left; color: #195dbe; }
#globalnav li a:hover { text-decoration:underline; background:#FF931B; color: #195dbe;}
#solutions {width:115px;
}
#products {width:115px;
}
#about {
width:115px;
}
#news {
width:115px;
}
#markets {
width:115px;
}
#customers {width:115px;
}
#investment {width:110px;
}
</style>
</head>

<body>
<div class="masthead"><img src="images/masthead.jpg" alt="header" width="800" height="112" border="0" /></div>
<div id="globalheader" class="home">

<ul id="globalnav">

<li><a href="#" id="solutions">Products</a></li>
<li><a href="#" id="products">news</a></li>
<li><a href="#"id="markets">Support</a></li>
<li><a href="#" id="customers">resources</a></li>
<li><a href="#" id="news">how to buy</a></li>
<li><a href="#" id="investment">company</a></li>

<li><a href="#" id="about">company</a></li>
</ul>
</div>
</body>
</html>

and i meant id's not classes