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> <!--#slide1-->

    <div id="slide2">

    </div> <!--#slide2-->

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

Tapion

Réponse acceptée

Hello

Est-ce possible d'avoir un zip complet ? car sans les images on ne peut pas s'en rendre compte, après une premier regard ton "#main" à un margin-top de 12,5% qui en est la cause
Joue plus avec les padding que les margin ;)

AcriX

Auteur

Désolé pour le retard, je poste ça ce soir.

AcriX

Auteur

Bonsoir,

Voici mon .zip complet de tous les fichiers pour le site que je suis en train de développer.
Lien : [Supprimer]

Donc effectivement en changant le 12,50%, j'ai plus l'espace blanc mais du coup mon texte ce retrouve tout en haut de la page, il y a t-il pas un moyen de le mettre au centre de la fenetre du navigateur sans que j'ai de nouveau cet espace blanc ?

Merci de votre aide :)

Résolu : le padding a résolu mon problème, merci Flay0r !

Tapion

Super ! :)

De rien :)

Position: Fixed; me cree un espace blanc

4 réponses