Need help with horizontal menu bar

janesssssy · 3 Aug 2009 at 17:49

I dont normally post here, as im a total noob when it comes to web design.
A little help would be appriciated!

The picture at the bottom of this post shows what this code looks like atm. However I have lost the will to live.
What I wanted is the "home" "services" & "contact" to be centered. That white space after contact should not be there. :confused:

Obviously I know when you paste that code it wont work as I have a image file saved on my PC. BUT PLEASE help! :cool:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#ftabbedposition{padding-top:55px;
float:center;
border-bottom:10px solid #00B3EF;
width:800px;
height:50px;
bottom:0px!important;
background:url(back1369.jpg) no-repeat;
}
#ftabbed{background:url(bluengrey838.gif) repeat-y left top;
background-position:100% -149px;
float:left;
width:100%;
font-size: 13px;
line-height:normal;
margin-top:6px;
}
#ftabbed ul{ list-style-type: none;
margin:0;
margin-left: 0px;
padding:0;
}
#ftabbed li{ display:inline;
margin:0;
padding:0;
}
#ftabbed a{ border-top:6px solid #111;
float:left;
background:url(bluengrey838.gif) no-repeat left top;
background-position:0 -155px;
margin:0;
padding:0 0 0 9px;
text-decoration:none;
}
#ftabbed a span{ float:left;
display:block;
background:url(bluengrey838.gif) no-repeat left top;
background-position:100% -155px;
padding: 6px 22px 6px 13px;
color:#fff;
font:bold 13px Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}
#ftabbed a span {float:none;
}
#ftabbed a:hover span {
	color: #000;
	text-align: center;
	
}
#ftabbed a i{color:#333333;
font-size:10px;
font-style:normal}
#ftabbed a:hover i{color:#44EEFF;
font-size:10px;
font-style:normal}
#ftabbed .selected a {border:none;
background:url(bluengrey838.gif) no-repeat left top;
background-position:-1px 0px;
}
#ftabbed .selected a span{ background:url(bluengrey838.gif) no-repeat right top;
background-position:right -90px;
padding: 6px 22px 12px 13px;
}
#ftabbed .selected a:hover i{color:#000;
}
#ftabbed .selected a:hover span{color:#FF4;
}

</style>
</head>

<body>
<div id="ftabbedposition">
  <div id="ftabbed">
  <ul>
  <li>
   <i>
   </a>
  </li>
  <li></li>
  <li class="index.html"><a href="index.html"><span>Home<br/>
  </span>
  </a>  
  </li>
  <li>
  <li class="services.html"><a href="services.html"><span>Services<br/>
  </span>
  </a>
  </li>
  <li class="contact.html"><a href="contact.html"><span>Contact<br/>
  </span>
  </a>
  </li>
  </ul>
  </div>
</div>
<div style="clear:both">
</div>
<p>&nbsp;</p>
<div style="clear:both">
</div>

</body>
</html>

Edward01 · 3 Aug 2009 at 19:42

Ok basically you're using float instead of display-inline. Under your <ul> you want to add text-align: center; then under your <li> you want to have display: inline; and a set height. You then put your background repeating image in your <ul> and you're done. I've tided it up a bit for you but i haven't added any rollover commands and i've ignored the blue bar in your image below, (i couldn't decided if it was part of the menu or not

HTML

Code:

<div id="menu">


<ul>
<li class="home"><a href="index.html"><span class="hidden">Home</span></a></li>
<li class="contact"><a href="contact.html"><span class="hidden">Contact</span></a></li>
<li class="services"><a href="services.html"><span class="hidden">Services</span></a></li>
</ul>


</div> <!-- MENU -->

CSS

Code:

#menu {
margin-left: auto;
margin-right: auto;
width: 100%;
border: 0px green solid;
background: none;
height: 34px;
}

#menu ul {
list-style: none;
text-align: center;
background: url(images/background_repeat.png) repeat-x;
height: 34px;

}

#menu ul li {
background: none;
display: inline;

}

#menu ul li a {

height: 36px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;

}

#menu ul li.home a {
background: url(images/home.png) bottom no-repeat;
padding-left: 26px;
padding-right: 25px;

}

#menu ul li.services a {
background: url(images/services.png) bottom no-repeat;
padding-left: 25px;
padding-right: 25px;
}

#menu ul li.contact a {
background:url(images/contact.png) bottom no-repeat;
padding-left: 25px;
padding-right: 25px;
}

span.hidden {
visibility: hidden;
}

That should give a menu of auto width using a background repeating image 34px high and three different button images of 34px high and varying widths. Best to use images the same width. You'll probably have to play with the padding.

Edit// Sorry almost forgot, IE hack

Need help with horizontal menu bar

janesssssy

janesssssy

Edward01

Edward01