Forum : Problème de positionnement

Bonjour,

Voila je rencontre un petit problème avec mon code J'ai une navbar qui fait 80px de haut... sauf que je voudrais qu'elle ce position au dessus du slider voir capture :

http://zupimages.net/viewer.php?id=16/33/kwr2.png (on voit la place que la nav dois avoir ainsi que le slider )

http://zupimages.net/viewer.php?id=16/33/o3df.png (Et la on voit la taille que la nav dois avoir)

Je penser à un position fixed sur la nav mais sa la deforme comme on peux voir sur la capture deux... Si vous avez des idées

Index.html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Accueil - Greg Auto Services</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <header id="header">
            <div class="container">
                <div class="topbarre row">
                    <div class="col-md-3">
                        Adresse : 
                    </div>
                    <div class="col-md-3">
                        Adresse : 
                    </div>
                    <div class="col-md-3">
                        Adresse : 
                    </div>
                    <div class="col-md-3">
                        Adresse : 
                    </div>
                </div>
                <div class="navbar row">
                    <div class="col-md-4">
                        <div class="brand">
                            <img src="img/logo.png" alt="">
                        </div>
                    </div>
                    <div class="col-md-8">
                        <ul class="menu">
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="http://fakeimg.pl/1920x600/" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                <div class="item">
                    <img src="http://fakeimg.pl/1920x600/" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                <div class="item">
                    <img src="http://fakeimg.pl/1920x600/" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

header.scss

#header { height: 115px;border-bottom: 10px solid #1a1a1a; }
#header .topbarre { margin-top: 30px; }
#header .navbar { background: black;min-height: 80px; margin-top: 20px;margin-bottom: 0;position: fixed;}
#header .navbar .brand { float: left; }
#header .navbar .menu { float: right; }
#header .navbar .menu li { padding: 30px 20px 0; list-style: none; display: inline-block; }
#header .navbar .menu li a { text-decoration: none;color: #777777; } 
#header .navbar .menu li a:hover { text-decoration: none;padding-top: 30px; border-top: 5px solid #FFFFFF;color: #FFFFFF; }

mxmaxime

Réponse acceptée

Salut,
Pour que la navbar prenne la longeur du container :

width: inherit;

Tiens un exemple : https://jsfiddle.net/1saL3m1x/
(la position relative sur le container est très importante)

F3LENYR

Salut,
Quand tu met des position:fixed, il faut parfois ne pas oublier de mettre un "width:100%" pour que l'élément prenne toute la longueur du container, enfin c'est comme ça avec bootstrap, donc dans ton code, sur ta navbar tu as juste à rajouter un width:100% ;)

#header { height: 115px;border-bottom: 10px solid #1a1a1a; }
#header .topbarre { margin-top: 30px; }
#header .navbar { background: black;min-height: 80px; margin-top: 20px;margin-bottom: 0;position: fixed;width: 100%}
#header .navbar .brand { float: left; }
#header .navbar .menu { float: right; }
#header .navbar .menu li { padding: 30px 20px 0; list-style: none; display: inline-block; }
#header .navbar .menu li a { text-decoration: none;color: #777777; } 
#header .navbar .menu li a:hover { text-decoration: none;padding-top: 30px; border-top: 5px solid #FFFFFF;color: #FFFFFF; }

https://jsfiddle.net/Lm2pdzup/

AlexisLS

Auteur

Oui mais la navbar du coup va jusqu'a la fin de la page hors elle devrais s'aretter au container

AlexisLS

Auteur

Effectivement je teste ça en rentrant chez moi :) Thanks

Problème de positionnement

4 réponses