Help with css align to right menu

**Availor** · 15 March 2008, 02:15 PM

I've tried creating a rather simple menu, but I have no idea why it won't align to the right. It works aligned left, but it wont' align right.

Here is the entier code from the html test document - any ideas?

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<title>Untitled Document</title>
<style type="text/css">

#menu {
    float: right;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: right;
    display: block;
}

#menu a {
    float: right;
    height: 25px;
    margin-right: 1px;
    padding: 10px 20px 5px 20px;
    background: #E9EED0;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    color: #8C8F7D;
}

#menu a:hover {
    background: #DDE6AB;
    color: #2C2E22;
}

#menu .current_page_item a {
    background: #B8D03B url(images/img01.gif) no-repeat;
    color: #FFFFFF;
}

#upper_nav {
    height: 35px;
    margin: 0 auto;
}

</style>
</head>

<body>

<div id="upper_nav">
<div id="menu">
<ul>
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">fourth</a></li>
</ul>
</div>
</div>
</body>
</html>

**Manwe** · 15 March 2008, 03:55 PM

I've tested the code you posted, and it seems so align to the right here.

(Tested using PHPEdit, tho I suppose it would to with just opening it in an internet browser, as there are no active content in it)

**Availor** · 15 March 2008, 05:01 PM

That's the problem that it looks ok in a program but doesn't look the same way in a browser.

Worked that out, here's the fixed code;

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<title>Untitled Document</title>
<style type="text/css">

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

#menu ul li {
display: block;
padding: 10px 0 15px 0;
float: right;
}

#menu ul li a {
text-decoration: none;
color: #8C8F7D;
background: #E9EED0;
padding: 3px 20px 15px 20px;
font-weight: bold;
margin-right: 1px;
font-size: 1.1em;
height: 25px
}

#menu ul li a:hover {
background: #DDE6AB;
    color: #2C2E22;
    
}

</style>
</head>

<body>

<div id="upper_nav">
<div id="menu">
<ul>
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">fourth</a></li>
</ul>
</div>
</div>
</body>
</html>

Thread: Help with css align to right menu

Thread Tools

Display

Help with css align to right menu

Re: Help with css align to right menu

Re: Help with css align to right menu

Bookmarks

Bookmarks

Posting Permissions