Making the nav bar span the width of the page

Question

I have created a nav bar, but resizing and using on different screen lengths always throws it off... How do I create a nav bar that'll span the width of the page on any screen without moving around anywhere, thanks =)

HTML:

    <title>Earthquakes In Blenheim</title>

    <link rel="shortcut icon" type="image/x-icon" href="wav.png">
    <link rel=stylesheet href="stylesheet.css" type="text/css">

    <center> <img src="EARTHQUAKES THAT SURROUND US.png" style="width:360px"> </center>

</head>

<body bgcolor="gray">

        <nav>
            <li> <a href="http://www.geonet.org.nz/quakes/felt"> Current Earthquakes </a> </li>
            <li> <a href="http://www.dropcoverholdon.org/"> Drop! Cover! Hold On! </a> </li>
            <li> <a href="https://www.google.com.au/maps/place/Blenheim,+New+Zealand/@-41.5290857,173.932808,13z/data=!3m1!4b1!4m2!3m1!1s0x6d390e0080e269bd:0x0a00ef88e796a530"> Location of Blenheim </a> </li>
            <li> <a href="#"> About Us </a> </li>
            <li> <a href="bibliography.html"> Bibliography </a> </li>
        </nav>

<img src="img1.png" width="100%">

<p><center>
    paragraph
</center></p>

<img src="img2.png" width="100%">

<p><center>
paragraph 2
</center></p>

<img src="img3.png" width="100%">

<p> <center>
Parapgraph 3
</center></p>

CSS:

 h1 {
    font-family: Arial;
    font-size: 50px;
    font-weight: bold;
color: black;
text-align: ;
width: 100%;
float: center;
margin: 0 0 0 0;
padding: 0;
list-style: none;
}

body {
    color: white;
    font-family: Arial;
    font-size: 20px;
    margin: 0 0 0 0;
    max-width: 100%;
    }

/* Navigation Bar Styling */

nav {
    margin: 0 0 0 0;
    font-family: Arial;
    font-size: 100%;
    }

nav li {
     float: left;
    }

nav li a {
    background-color: black;
    display: block;
    padding: 0 0;
    text-decoration: none;
    font-weight: bold;
    color: white;
    border-right: 1px solid gray;
    }

 nav li a:hover {
     color: black;
     background-color: white; 
     }

 /* Navigation Bar Styling */

I'm also somewhat new to html, so if there is anything else that I should add or change, please let me know.

set dynamic height and width as per screen size. see this link http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window — ADARSH KUMAR SHIVA, Apr 09 '15 at 12:29
You have in-valid markup. You need a to have `ul` first then a `li` — dowomenfart, Apr 09 '15 at 12:32

Nick Delaney · Answer 1 · 2015-04-09T12:32:59.297

2

In your nav css

width:100%;

Also if you want it to always be on top add

position:fixed;

In your nav li add

list-style:none;

Also your li's need to be in a 'ul' tag

so it'd be

<ul>
  <li></li>
</ul>

I added a fiddle here for you http://jsfiddle.net/k919k4Lk/

edited Apr 09 '15 at 12:32

answered Apr 09 '15 at 12:25

Nick Delaney

601
5
15

score 0 · Answer 2 · answered Apr 09 '15 at 12:29

0

If you're developing an responsive website I suggest using a framework such as Bootstrap. It has it's own element for navigation bars like the one you're developing, right out of the box. It will save you a lot of time.

answered Apr 09 '15 at 12:29

Dagriel

574
2
12

1

How come he can't just code it himself...Instead of taking the easy way out using bootstrap He said he is new to HTML so he needs to learn the language first then move onto a framework. – dowomenfart Apr 09 '15 at 12:31
I'm not saying he can't code it himself, I just suggested an easier way to do what he was trying to do. – Dagriel Apr 09 '15 at 12:40
Well if it's a suggestion. You should comment. Not answer the the question. Don't want to risk a down vote and lose those points. – dowomenfart Apr 09 '15 at 12:45

score 0 · Accepted Answer · answered Apr 09 '15 at 12:41

JSFIDDLE DEMO

Your HTML is invalid. Change your HTML to this:

<body bgcolor="gray">
    <nav>
        <ul>
        <li> <a href="http://www.geonet.org.nz/quakes/felt"> Current Earthquakes </a> 
        </li>
        <li> <a href="http://www.dropcoverholdon.org/"> Drop! Cover! Hold On! </a> 
        </li>
        <li> <a href="https://www.google.com.au/maps/place/Blenheim,+New+Zealand/@-41.5290857,173.932808,13z/data=!3m1!4b1!4m2!3m1!1s0x6d390e0080e269bd:0x0a00ef88e796a530"> Location of Blenheim </a> 
        </li>
        <li> <a href="#"> About Us </a> 
        </li>
        <li> <a href="bibliography.html"> Bibliography </a> 
        </li>
        </ul>
    </nav>
    <img src="img1.png" width="100%">
    <p>
        <center>paragraph</center>
    </p>
    <img src="img2.png" width="100%">
    <p>
        <center>paragraph 2</center>
    </p>
    <img src="img3.png" width="100%">
    <p>
        <center>Parapgraph 3</center>
    </p>
</body>

Add this CSS to the nav. To make the nav 100% width of the window:

nav {
    margin: 0 0 0 0;
    font-family: Arial;
    font-size: 100%;
    width: 100%;
    overflow: hidden;
 }

Then you need to style the nav's ul and li:

 nav ul{
    list-style: none;
 }
 nav ul li {
    float: left;
    width: 20%;
 }

I added this little reset to reset the browsers default styling but would recommend Eric Meyer's reset.

*{
    margin: 0;
    padding: 0;
    line-height: 1;    
}

Another thing I would do to clean up your HTML a little but more is to take out the `center tag` and use CSS to center the `p` elements. [fiddle](http://jsfiddle.net/chL3p4yf/2/) @Jack — dowomenfart, Apr 09 '15 at 13:03

Making the nav bar span the width of the page

3 Answers3

Related