Horizontal LI items with images

HTML & CSS
1

Edit: I should note I successfully made them render horizontally using IMG tags, but the images must be flush against each other and when the HTML is formatted with line breaks a whitespace padding appeared. I don’t wish to have a single line of HTML, is there any way to get around that using CSS or do I just need to avoid the spacing like the plague. I tested on Win XP IE 6. Bah…thanks again!!!

I have tried everything…and I give up…

I am trying to use images inside a LI horizontal menu from a article I found on ALA???

Anyways here is my HTML and CSS if someone could explain what i’m doing wrong you would be greatly appreciated. :stuck_out_tongue:

p.s-I’d also like to change the image on the server side when a page is selected basically use a lighter image. CSS isn’t usually dynamically generated, particularly in this CSS, so would I best go about using two different CSS classes (active/other states) or should I just use inline IMG tags inside the links? This is a primary navigation menu and accessibility is important??? What is your input? Should I switch it using javascript after onload?

Anyways: XHTML 1.0 Transitional

<body>
  <div id="pagebody">
    <br /><br />
    <div id="mainmenu">
      <ul>
        <li><a href="#" title="Home"><span id="menuitem_1" /></span></a></li>
        <li><a href="#" title="Services"><span id="menuitem_2"></span></a></li>
        <li><a href="#" title="Portfolio"><span id="menuitem_3"></span></a></li>
        <li><a href="#" title="Resources"><span id="menuitem_4"></span></a></li>
        <li><a href="#" title="Company"><span id="menuitem_5"></span></a></li>
        <li><a href="#" title="Contact"><span id="menuitem_6"></span></a></li>
      </ul>
    </div>
  </div>
</body>

and the CSS?

#mainmenu ul li {
  display: inline;  
}

#mainmenu ul {
  margin: 0;
  padding: 0;
  
  list-style-type: none;
}

#mainmenu li {
  font-size: 1px;
  width: 1px;
  padding: 0;
}

#mainmenu span {
  height: 31px;

  padding: 0px;
  margin: 0px
  font-size: 1px;
}

/* 
  Individual menu items 
*/

#menuitem_1 {
  width: 103px;
  background-image: url("uploads/menu/home_up.gif");
}

#menuitem_2 {
  width: 128px;
  background-image: url("uploads/menu/services_up.gif");
}

#menuitem_3 {
  width: 125px;
  background-image: url("uploads/menu/portfolio_up.gif");
}

#menuitem_4 {
  width: 142px;
  background-image: url("uploads/menu/resources_up.gif");
}

#menuitem_5 {
  width: 131px;
  background-image: url("uploads/menu/company_up.gif");
}

#menuitem_6 {
  width: 131px;
  background-image: url("uploads/menu/contact_up.gif");
}

As it stands, regardless of whether I use block tags or not in the above HTML…all the menu items are rendered vertically…

Cheers :slight_smile:

2

Hi,

I’d change your markup just a little
HTML


<body>
  <ul id="mainmenu">
    <li><a id="home" href="#"><span>Home</span></a></li>
    <li><a id="services" href="#"><span>Services</span></a></li>
    <li><a id="portfolio" href="#"><span>Portfolio</span></a></li>
    <li><a id="resources" href="#"><span>Resources</span></a></li>
    <li><a id="company" href="#"><span>Company</span></a></li>
    <li><a id="contact" href="#"><span>Contact</span></a></li>
  </ul>
</body>

CSS


#mainmenu li a span { display: none; } /* Hide text */
#mainmenu {
  margin: 0;
  padding: 0;
  list-style-type: none; /* remove default list style */
}
[B]#mainmenu li {
  margin: 0;
  padding: 0;
  float: left;
}[/B]
#mainmenu li a {
[B]  float: left;[/B]
  height: 31px;
  padding: 0;
  margin: 0;
}
/* 
  Individual menu items 
*/

#home {
  width: 103px;
  background-image: url("uploads/menu/home_up.gif");
}

#services {
  width: 128px;
  background-image: url("uploads/menu/services_up.gif");
}

#portfolio {
  width: 125px;
  background-image: url("uploads/menu/portfolio_up.gif");
}

#resources {
  width: 142px;
  background-image: url("uploads/menu/resources_up.gif");
}

#company {
  width: 131px;
  background-image: url("uploads/menu/company_up.gif");
}

#contact {
  width: 131px;
  background-image: url("uploads/menu/contact_up.gif");
}

See how that goes…

3

Sweeeeeeeeet :slight_smile:

Thanks alot - works like a charm :slight_smile:

Quick question, is there anyway I can center horizontally the UL tag? I have tried wrapping the UL in a DIV again and setting the UL to float: left but a text-align: center in the wrapper DIV doesn’t work?

Do you know of any margin techniques???

4

Yep,

You need to give the ul a float: left; a width: 'sum of the button widths’px; and a margin: 0 auto;