help with menu please 1

maxelcat · Jan 17, 2007

Hi

I am trying to create a hozirontal menu.

Between the words I want little, vertical, bars. I have been doing this by adding a border on the LHS of the element. (I don't know if this is the best way to achieve the effect.)

When you roll over the menu items I would like the whole space between the little bars to change colour.

IN FF only the link changes colour. IN IE6/7 the colour changes goes all the way to the RHS of the element.

I have been on this now for a few hours, and its driving me nuts - can't get consistent behaviour.

PLEASE HELP

http://www.maxelcat.co.uk/tests/version1.html

or this code.

Many thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>





<style type="text/css">
<!--

#wrapper	{
width:740px;
margin:0px auto;
border:1px solid black;
text-align:left;
}


#menuBar {
	color: #CCCAAD;
	font-size: 14px;
	font-family: arial, Helvetica, sans-serif;
	margin-left:0px;
	margin-right:0px;
	margin-top:53px;
	position: relative;
	top: 0px;
	left: 0px;
/*	right: 0px;*/
	width:500px;
	overflow: hidden;
	/*vertical-align: middle;*/
	border: solid 0px #000000;
	background-color: #ffffff;
	}

.menuHeader {
	color: #000000;
	text-decoration: none;
	cursor: pointer;
	margin:0px;
	padding-right:15px;
	padding-left:15px;
	
	display: inline;
	position: relative;
	border-left:1px #000000 solid;
	border-right:0px #000000 solid;
	}
	
	
a:hover	{
background-color:#3399FF;
}	
-->
</style>
</head>



<body>
<div id="wrapper"><img src="images/maxelcat_logo.jpg" alt="h" width="230" height="126" class="imageright" />

<div id="menuBar">
	<div id="navMenu1" class="menuHeader"><a href="#">Home</a></div>
	<div id="navMenu2" class="menuHeader"><a href="#">Services</a></div>
	<div id="navMenu3" class="menuHeader"><a href="#">Portfolio</a></div>
	<div id="navMenu4" class="menuHeader"><a href="#">Customers</a></div>
	<div id="navMenu5" class="menuHeader"><a href="#">Contact</a></div>
	<div id="endBar" class="menuHeader">&nbsp;</div>
</div>



<div class="clearer">&nbsp;</div>
</div>
</body>
</html>

"I love deadlines - I love the noise they make as they go wishing past" (not mine of course, but very ture...0

ChrisHunt · Jan 17, 2007

Try this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
  <title>Test List</title>

  <style type="text/css">
    .navbar {
      text-align: center;
      list-style: none;
      padding: 0.25em 0;
      margin: 0;
    }

    .navbar li {
      list-style: none;
      margin: 0;
      display: inline;
      border-left: 1px solid;
    }

    .navbar li.first {
       border: 0;
    }

    .navbar li a {
      padding: 0 0.5em;
      white-space: nowrap;
    }   

    .navbar li a:hover {
       background: #ffc;
    }
  </style>
</head>
<body>
  <ul class="navbar">
    <li class="first"><a href="#">Item 1</a></li
   ><li><a href="#">Item 2</a></li
   ><li><a href="#">Item 3</a></li
   ><li><a href="#">Item 4</a></li>
  </ul>
</body>
</html>

Note how I've split the closing tags of the <li>s over the line break, so there's no whitespace between the elements in the list. Whitespace between the elements is what causes the little gaps to appear.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

help with menu please 1

maxelcat

Technical User

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor