Forum : Position: Fixed; me cree un espace blanc

Bonjour,

Voilà, je rencontre un petit problème avec mon code.

J'ai mis ma navbar en fixed sur le haut de la page pour toujours l'avoir quand je scroll, mais je ne sais pour quelle raison j'ai un espace blanc qui s'affiche comme sur l'image suivante :

Voici mon code, HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Matthew Moy</title> <link href="index.css" rel="stylesheet"/> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script> </head> <body> <div id="slide1"> <nav> <ul> <li><a class="big" href="#">Matthew Moy</a></li> <ul style="float:right;"> <li><a class="small" href="#">Home</a></li> <li><a class="small" href="#">About Me</a></li> <li><a class="small" href="#">Contact</a></li> </ul> </ul> </nav> <div class="center" id="main">Matthew Moy</div><br/><br/> <div class="center" id="designer">Du texte, je sais pas</div><br/><br/><br/> <div class="center" id="web">Coucou je sais pas quoi mettre</div> </div>  <div id="slide2"> </div>  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="script/jquery.parallax-1.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ //.parallax(xPosition, adjuster, inertia, outerHeight) //xPosition - Position horizontale de l'élément (css) //adjuster - La position Y de départ //inertia - Vitesse en fonction du Scroll. Exemple: 0.1 est 1/10 ème de la vitesse du scroll. 2 = deux fois la vitesse du scroll. //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport $('#slide1').parallax("center", 0, 0.1, true); $('#slide2').parallax("center", 900, 0.1, true); }) </script> </body> </html>

CSS:

body { margin: 0; padding: 0; font: 'Seogoe UI Light, Arial' } @font-face { font-family: 'Segoe UI Light'; src: url(segoeuil.ttf); } /* Start of Effect Parallax */ #slide1 { background: url(pictures/slide1-bg.jpg) center 0 no-repeat fixed; } #slide2 { background: url(pictures/slide2-bg.jpg) center 0 no-repeat fixed; } /* Mise en place des diffÃ©rentes parties / slides */ #slide1, #slide2 { height: 1000px; } /* End of Effect Parallax */ .big { font-size: 45px; } .small { font-size: 30px; margin-top: 15px; margin-right: 100px; } .center { position: relative; text-align: center; } nav { position: fixed; right: 0; top: 0%; height: 100px; width: 100%; background: url(pictures/nav.jpg) no-repeat center; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; font-family: 'Segoe UI Light'; line-height: auto; } nav li { float: left; } nav li a { text-decoration: none; color: white; text-align: center; padding: 14px 16px; display: inline-block; } nav li a:hover { color: #006939; } #main { font-size: 72px; line-height: 1px; margin-top: 12.50%; color: white; font-family: 'Segoe UI Light'; } #designer { font-size: 48px; color: white; font-family: 'Segoe UI Light'; } #web { font-size: 48px; color: white; font-family: 'Segoe UI Light'; font-style: italic; font-weight: bolder; }

Si quelqu'un a la solution pour enlever cet espace blanc ça serais parfait :)

Position: Fixed; me cree un espace blanc

4 réponses