Geek asks and answers

The problem with changing the menu when moving right in CSS

I have a div that is set to 100%, and inside this other div that is centered and set to 883px.

Navigation is a list, but if I applied the float: right element to this element, it reordered the list. Of course, I could change the order in the code, but should there be a better way?

<div id="navigation"><!-- START NAVIGATION -->
    <ul class="navigation">
        <li><a href="#" title="" alt="" class="current">home</a></li>
        <li><a href="#" title="" alt=""><img src="images/navline.png" align="right">portfolio</a></li>
        <li><a href="#" title="" alt="">blog</a></li>
        <li><a href="#" title="" alt="">get in touch</a></li>
    </ul>
</div>
<div id="border"></div><!-- END NAVIGATION -->
<div style="clear:both"></div>

And CSS ...

#navigation {
width:100%;
background-color:#383a3c;
height:43px;
}

#navigation ul {
width:883px;
margin:0px auto;
}

ul.navigation {
font-family:'ChunkFiveRegular', Arial, sans-serif;
font-size:18px;
}

#navigation li a {
display:block;
margin:13px 0px 0px 0px;
text-decoration:none;
color:#8cd8db;
float:right;
}

Can someone help show me the error of my paths?

+3
source share
1 answer

Floating to the right reverses the elements. This is the expected behavior.

If you want the menu to align to the right, you need to make the ul element float to the right, but the li elements inside should have a float to the left.

#navigation {
  width:100%;
  background-color:#383a3c;
  height:43px;
}

#navigation ul {
  width:883px;
  margin:0px auto;
}

ul.navigation {
  font-family:'ChunkFiveRegular', Arial, sans-serif;
  font-size:18px;
  float: right;
}

#navigation li {
  float: left;
  padding: 0px 10px;
}

#navigation li a {
  display:block;
  margin:13px 0px 0px 0px;
  text-decoration:none;
  color:#8cd8db;
}

- , : 883px; ul. , , .

+12

More articles:


All Articles