MENU BAR Question! Use varying button widths?

**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, 01:39 AM

could give each a class

**zeech26** · 03-26-2009, 04:42 PM

I am not totally sure how to do this (Give each one a class)
Any info would be greatly appreciated!
thanks
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.

Code:

<!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">
  <!--googleoff: all-->
  <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

Thread: MENU BAR Question! Use varying button widths?

Thread Tools

Search Thread

MENU BAR Question! Use varying button widths?

Could you possibly give an example?

Bookmarks

Bookmarks

Posting Permissions