CODEWITHSUNDEEP
htmlcsslayout
Juliana Marguerite Linder
Juliana Marguerite Linder

Reputation: 133

Aligning/floating my nav bar to the right

I'm currently attempting to align my nav bar to the right, but it's stubbornly sticking to the left and I don't know what to do. I feel like I've tried everything - text-align, float, etc. I also have HTML5 CSS reset included, if that makes a difference.

Can someone look at my code and let me know if there may be some reason that these nav items won't move to the other side? I'm really frustrated. Thanks.

HTML:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

CSS:

  body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
  ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-  left: 150px;}
  li {float: left;}
  ul a {color: white; padding: 0 10px; text-decoration: none;}
  ul a:hover {color: #333;}

NOTE: This is the hacky way that I just fixed it

ul {text-align: right; width: 100%; background-color: #999; height: 20px; **padding-left: 750px;**}

however, I'm not sure that that is a very good way to do so...

Upvotes: 9

Views: 68614

Answers (6)

Giacomo1968
Giacomo1968

Reputation: 26066

Change this line in the CSS:

ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-left: 150px;}

To this:

ul {float: right; background-color: #999; height: 20px; padding-left: 150px;}

The problem is your original code was setting the width to 100%. So it was stretching across the screen. text-align would not float the inner <li> elements to the right. So the only way to achieve it going right is to get rid of the width: 100%; and set a float: right;

If you want a grey box across the page, then wrap the <ul> in a <div> that has the background-color: #999; and the width:100%. Only way to go.

Here is the HTML file I created to demonstrate:

<!DOCTYPE html>

<html lang="en">
<head>
  <title></title>
  <style type="text/css">
body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
  ul {float: right; background-color: #999; height: 20px; padding-left: 150px;}
  li {float: left;}
  ul a {color: white; padding: 0 10px; text-decoration: none;}
  ul a:hover {color: #333;}
  </style>
</head>

<body>
  <ul>
    <li><a href="index.html">Home</a></li>

    <li><a href="company.html">Company</a></li>

    <li><a href="team.html">Management Team</a></li>

    <li><a href="contact.html">Contact</a></li>
  </ul>
</body>
</html>

EDIT: Additional test HTML file to show the <div> wrapper concept. It works for me.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>

  <title></title>
  <style type="text/css">
    body
    {
        font: normal 300 .8em 'Open Sans', sans-serif;
        overflow-x: hidden;
    }

    div
    {
        float: left;
        width: 100%;
        background-color: #999;
    }

    ul
    {
        float: right;
        background-color: #999;
        height: 20px;
        padding- left: 150px;
    }

    li { float: left; }

    ul a
    {
        color: white;
        padding: 0 10px;
        text-decoration: none;
    }

    ul a:hover { color: #333; }
</style>
</head>

<body>
  <div>
    <ul>
      <li><a href="index.html">Home</a></li>

      <li><a href="company.html">Company</a></li>

      <li><a href="team.html">Management Team</a></li>

      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</body>
</html>

Upvotes: 1

Daniel Winnard
Daniel Winnard

Reputation: 37

Don't know if you ever sorted this, but could try this...

ul {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    text-align:right;
}
ul li {
    display:inline-block;
}

Then style you li's however you need with padding etc.

Might do the trick without worrying about floats.

Dan

Upvotes: 0

Nathan
Nathan

Reputation: 384

ul {float:right;}

Don't give the ul a width and you'll get exactly what you're looking for.

Upvotes: 0

user1934286
user1934286

Reputation: 1762

This is easy

http://jsfiddle.net/qZ7Tr/10/

change li float to display:inline;

body {
    font: normal 300 .8em'Open Sans', sans-serif;
    overflow-x:hidden;
}
ul {
    text-align: right;
    width: 100%;
    background-color: #999;
    height: 20px;
}
li {
    display:inline;
}
ul a {
    color: white;
    padding: 0 10px;
    text-decoration: none;
}
ul a:hover {
    color: #333;
}

Upvotes: 5

TildalWave
TildalWave

Reputation: 1667

One, admittedly quite stupid solution (but it works), is to float list items to the right and then just reverse their order in HTML. Like this:

<ul>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="index.html">Home</a></li>
</ul>

body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
ul {text-align: right; width: 100%; background-color: #999; height: 20px;}
li {float: right;}
ul a {color: white; padding: 0 10px; text-decoration: none;}
ul a:hover {color: #333;}

here is the JSFiddle for it

Upvotes: 7

Sophy
Sophy

Reputation: 9275

I suggest code bellow it make easy to apply style:

HTML:

<div class="nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="company.html">Company</a></li>
      <li><a href="team.html">Management Team</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

CSS:

body {
    font: normal 300 .8em 'Open Sans', sans-serif; 
    overflow-x:hidden;
}
.nav {
    overflow: hidden;
    background-color: #999;    
    height: 20px; 
}
 ul {
    overflow: hidden;
    float: right;
}
ul li {
      float: left;
}
ul li a {color: white; 
    padding: 0 10px; 
    text-decoration: none;
}
 ul li a:hover {
      color: #333;
}

View code snipped http://jsfiddle.net/sophy/eRLtw/

Upvotes: 0

Related Questions