Member Avatar for teddypwns

I am trying to make a menubar for my website using CSS and HTML, but the buttons appear in reverse order. Here is some of the source:

HTML:

<div class="hovermenu">
<ul>
<li class="hovertarget"><a href="http://www.teddypwns.com/">HOME</a></li>
<li class="hovertarget"><a href="http://www.teddypwns.com/contact-us/">CONTACT US</a></li>
<li class="hovertarget"><a href="http://www.teddypwns.com/login.php">MEMBER LOGIN</a></li>
</ul>
</div>

CSS:

.hovertarget a {
font:13px verdana;
color:#000000;
padding:10px 0.5em;
text-decoration:none;
float:right;
background-color:#CC3300;
}

.hovertarget a:hover {
background-color:#CC6600;
}

.hovermenu ul li {
list-style:none;
display:inline;
}

How do I make the menubar stay to the right of the page, but have the items in the correct order?

  • 4 Contributors
  • 6 Replies
  • 187 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by teddypwns

Recommended Answers

All 6 Replies

Member Avatar for teddypwns

@johny_mplayer:
Thanks for the suggestion. I have already thought of that, though. I do not want to write the HTML to fit the CSS, I want the CSS to fit the HTML. This is to keep it more separate, so if I edit the HTML I will not have to remember to reverse the list of items. The HTML should stand by itself.

Member Avatar for pwinfrey

Remove "float:right" from ".hovertarget a" and add it to ".hovermenu". Omit "display:inline" from ".hovermenu ul li" and replace it with "float:left".

.hovermenu{
float:right;
}

.hovertarget a{
font:13px verdana;
color:#000000;
padding:10px 0.5em;
text-decoration:none;
background-color:#CC3300;
}

.hovertarget a:hover {
background-color:#CC6600;
}

.hovermenu ul li {
list-style:none;
float:left;
}
commented: Good solution and example :) +1
Member Avatar for teddypwns

Thanks pwinfrey, it worked. Why did my own CSS not work and the new one did?

Member Avatar for Lusiphur

From what I'm seeing it was a matter of how the float properties were (or weren't) defined as these determine the relative position of the component to it's neighbors.

Please also remember to mark threads solved once the issue is resolved :)

Member Avatar for teddypwns

Thanks for answering Lusiphur.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.