Prise de la barre de navigation durée de la largeur de la page

J'ai créé une barre de navigation, mais le redimensionnement et l'utilisation sur des écrans différents longueurs jette toujours d'elle... Comment puis-je créer une barre de navigation qui va occuper toute la largeur de la page sur n'importe quel écran sans bouger un peu partout, merci =)

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 */

Je suis aussi un peu nouveau pour html, donc si il y a autre chose que je devrais ajouter ou à modifier, s'il vous plaît laissez-moi savoir.

ensemble dynamique de la hauteur et de la largeur selon la taille de l'écran. voir ce lien stackoverflow.com/questions/3437786/...
Vous avez des balises valides. Vous avez besoin d'un avoir ul d'abord, puis une li

InformationsquelleAutor Jack | 2015-04-09

JSFIDDLE DÉMO

Votre code HTML n'est pas valide. Modifier votre code HTML à ceci:

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

Ajouter cette CSS à la valeur liquidative. Pour faire de la nav 100% largeur de la fenêtre:

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

Alors vous avez besoin pour le style de la valeur liquidative du ul et li:

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

J'ai ajouté ce petit reset pour réinitialiser les navigateurs par défaut de style, mais recommande Eric Meyer réinitialiser.

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

Merci beaucoup mate, certainement m'a appris beaucoup de choses aujourd'hui 🙂
Une autre chose que je voudrais faire pour nettoyer votre HTML un peu, mais de plus est de sortir de la center tag et utiliser les CSS pour centrer la p éléments. violon @Jack

InformationsquelleAutor dowomenfart

1

Dans votre nav css
```
width:100%;
```
Aussi, si vous le souhaitez toujours être sur le dessus ajouter
```
position:fixed;
```
Dans votre nav li ajouter
```
list-style:none;
```
Également votre li ont besoin d'être dans un " ul " tag

de sorte qu'il serait
```
<ul>
  <li></li>
</ul>
```
J'ai ajouté un violon ici pour vous http://jsfiddle.net/k919k4Lk/

InformationsquelleAutor Nick Delaney
0

Si vous êtes l'élaboration d'un site web réactif, je vous suggérons d'utiliser un framework comme Bootstrap. Il a sa propre élément pour les barres de navigation comme celui que vous êtes en développement, tout droit sorti de la boîte. Il vous permettra d'économiser beaucoup de temps.
- Comment se fait-il ne peut pas simplement le code lui-même...au Lieu de prendre la voie de la facilité en utilisant bootstrap il a dit qu'Il est nouveau pour HTML, donc il a besoin d'apprendre la langue d'abord, puis passer à un cadre.
- Je ne dis pas qu'il ne peut pas le code lui-même, je viens de suggérer un moyen plus facile de faire ce qu'il essayait de faire.
- Eh bien, si c'est une suggestion. Vous devriez commentaire. Pas de réponse à la question. Ne voulez pas prendre le risque d'une baisse de vote et de perdre des points.
InformationsquelleAutor Dagriel

Vous devez vous connecter pour publier un commentaire.