Soucis barre de menu

Par NewAir01, il y a 9 ans

Les bases HTML/CSS

Bonsoir,
Je rencontre un problème pour mon menu..
Je veux l'afficher dans ma bannière à la limite basse centrer de celle-ci (J'essaye d'être le plus précis possible..)
Mais mon menu ne veut pas monter il reste bloquer a la limite de mon body..
Depuis plus de 1H30 je cherche comment monter ce fichu menu mais je ne trouve pas j'ai essaye divers technique mais rien ne se passe..

Voila ou ce trouve le menu : http://hpics.li/690e09d
Je voudrais le mettre la : http://hpics.li/bea90bf ( ou il y a la flèche..)

Mon code html :

<div id="banner1"> <a href="index.html"> <img src="image/logo.png"></a> </div> <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="page2.html">Bio</a></li> <li><a href="page2.html">Tour Date</a></li> <li><a href="">Photos</a></li> <li><a href="">Contact</a></li> </ul> </div>

Mon CSS :

body{ margin:auto; width: 100%; height: 100% ; background-color: #252628; } #banner1{ width: 100%; height: 130px; margin: 0 auto ; background-color: #F2F2F2; } #banner1 img{ display: block; height: 128px; margin-left: 0px; margin-bottom: 15px; } #menu{ width: 100%; margin:auto; } #menu ul { text-align: center; padding-right: 30px; margin:auto; } #menu ul li{ display: inline-block; margin:15px; text-align: center; padding-right: 30px; } #menu ul li a { display: block; text-decoration: none; color:white; } #menu ul li a:hover{ border-style: solid; border-radius: 10px; border-color: white; }

Voila merci d'avance je me suis arracher la tête lol..

1 réponse

JeremieMeunier, il y a 9 ans

http://codepen.io/gnomes/pen/pNPeXB

<div id="banner1"> <a href="index.html"> <img src="https://placehold.it/1920x130"></a> <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="page2.html">Bio</a></li> <li><a href="page2.html">Tour Date</a></li> <li><a href="">Photos</a></li> <li><a href="">Contact</a></li> </ul> </div> </div> body{ margin:auto; width: 100%; height: 100% ; background-color: #252628; } #banner1{ position: relative; width: 100%; height: 130px; margin: 0 auto ; background-color: #F2F2F2; } #banner1 img{ display: block; position: absolute; top: 0px; left: 0px; right: 0px; height: 128px; margin-left: 0px; margin-bottom: 15px; } #menu{ position: absolute; bottom: 0px; width: 100%; margin:auto; } #menu ul { text-align: center; padding-right: 30px; margin:auto; } #menu ul li{ display: inline-block; margin:15px; text-align: center; padding-right: 30px; } #menu ul li a { display: block; text-decoration: none; color: black; } #menu ul li a:hover{ border-style: solid; border-radius: 10px; border-color: white; }