0

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
7
Views
7 Years
Discussion Span
Last Post by teddypwns
0

@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.

1

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;
}
Votes + Comments
Good solution and example :)
0

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

0

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 :)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.