Bonsoir,
Donc voila ayant abandonné le web durant une très longue période dû à mes études j'ai décidé de reprendre ou je mettais arrêté !
Bon ça fait au moins 2 heures que je cherche le soucis mais je ne trouve pas, enfaîte quand nous cliquons sur notre pseudo sur la page nous avons un petit menu qui apparaît ou nous pouvons nous déconnecté ou autre mais le soucis le menus n'est pas convenable je vous mets un screen pour être plus clair !
http://hpics.li/fc90606
Ce qui est assez bizarre je vous mets mon code + css
Html :
<ul class="nav navbar-nav pull-right">
<?php if (isset($_SESSION['id'])) { ?>
<li class="dropdown">
<a class=" police dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?php echo $_SESSION['pseudo']; ?><span class="caret"></span></a>
<ul class=" police dropdown-menu">
<li><a href="profil.php">Mon profil</a></li>
<li><a href="#">Message privé</a></li>
<li role="separator" class="divider"></li>
<li><a href="deco.php">Déconnexion</a></li>
</ul>
<?php }
else { ?>
<li class="police"><a href="connexion.php">Connexion</a></li>
<li><a href="inscription.php">Inscription</a></li>
<?php } ?>
</li>
</ul>CSS :
body{
margin:auto;
width: 100%;
height: 100% ;
background-color: rgba(92, 209, 182, 0.09);
}
.barre{
background-color: #CEF2F9;
}
.police{
font-family: cursive;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1){
border-bottom: #C4E17F 3px solid;
}
.nav li:hover:nth-child(8n+2){
border-bottom: #FFC300 3px solid;
}
.nav li:hover:nth-child(8n+3) {
border-bottom: #C70039 3px solid;
}
.nav li:hover:nth-child(8n+4) {
border-bottom: #76C1CE 3px solid;
}
.nav li:hover:nth-child(8n+5) {
border-bottom: #9276CE 3px solid;
}
.nav li:hover:nth-child(8n+6) {
border-bottom: #E1DCEC 3px solid;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}Je tiens à m’excuser je reprends et je suis un peu perdu mdr
Merci ! ( Je tiens a préciser j'utilise le Freamwork Bootstrap )
7 réponses
Salut, bah que je n'ai pas de barre horizontale que ma page se deplace pas ^^ Fin que le menu s'affiche sans l espace inutile a droite
quoi qu'il en soit voilà le code de la bar de navigation avec bootstrap:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>Tu enlèves ce qui ne t'es pas utile
et tu adaptes avec ton css
Merci de tes réponses je te mets un autre screen pour être mieux compris ^^
http://hpics.li/c0ceefd
Donc tu vois que lorsque je clic sur mon pseudo j'ai un menu mais il s'affiche pas convenablement j'ai une barre en bas qui permets de bouger la page mais je ne veux pas qu'elle apparait je sais pas si je me suis fais mieux comprendre..
Merci encore !
Oui je comprends.
déjà tu fais une erreur parce que tu inclus de li dans un autre li
Après je suis entrain de te dire de prendre le code de la navigation de bootstrap original et après tu remplaces simplement où tu dois faire des changements.
je pense que c'est pas plus compliqué que ça
Sinon, personellement j'aurais coller un position: absolute sur ton menu avec right: 0px et top: 100%.