Bonjour, je viens solliciter votre aide après de plusieurs heures de recherches infructueuses. J'ai dans mon site une barre de navigation, fixe, en haut de ma page, contenant mon logo et un liste horizontale. J'aimerais centrer ces deux éléments dans la <nav> de sorte qu'ils restent au milieux lors d'un redimensionnement de fenêtre et qu'ils ne se placent pas sur deux lignes. Voici mon code
Html
Css
Merci d'avance pour votre aide,
Okahiro
Html
<nav>
<a href="index.php"><img id="logo" src="images/logo2.png" height="40px" height="120px" ></a>
<ul id="menu">
<a href="accueil.php"><li>Accueil</li></a>
<li>
Lycées/Collèges
<ul>
<a href="Triboulet.php"><li>Triboulet</li></a>
<a href="Dauphine.php"><li>Dauphiné</li></a>
<a href="Bouvet.php"><li>Bouvet</li></a>
</ul>
</li>
<a href="contact.php"><li>Contact</li></a>
<a href="aideznous.php"><li>Aidez-nous</li></a>
</ul>
</nav>
Css
body{
background: url(../images/navy_blue.png);
font-family: Verdana;
color: #404040;
}
a
{
text-decoration: none;
color: #0343bd;
}
#menu a
{
text-decoration: none;
color: white;
}
nav
{
position: fixed;
height: 45px;
width: 100%;
min-width: 1800px;
background: #1e1e1e;
border-top: solid 3px #2C75FF;
border-bottom: solid 3px #0343bd;
top: 0px;
left: 0px;
right: 0px;
box-shadow: 0px 0px 10px rgba(150, 150, 150, 1);
}
.okahiro
{
position: fixed;
margin-top: 40px;
font-size: 90%;
width: 250px;
border-radius: 5px;
padding: 5px;
color: #303030;
text-align: center;
background: rgba(255, 255, 255, 0.1);
}
.okahiro:hover
{
background: rgba(255, 255, 255, 0.2);
}
#menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
color: white;
text-shadow: 1px 1px 2px grey;
}
#menu
{
list-style: none;
margin: 0px;
padding: 0px;
float: left;
color: white;
text-shadow: 1px 1px 2px grey;
margin-right: auto;
margin-left: auto;
width: 800px;
display: block;
}
#menu li
{
text-align: center;
display: block;
float: left;
width: 150px;
height: 35px;
padding-top: 12px;
}
#menu li ul
{
display:none;
padding: 0px;
background: #1e1e1e;;
}
#menu li:hover ul
{
display:block;
margin: 0px;
margin-top: 15px;
}
#menu li:hover ul li
{
float: none;
border: none;
}
li:hover
{
background:linear-gradient( #2C75FF, #0343bd);
transition: background 0.5s;
}
#logo
{
margin-right: auto;
margin-left: auto;
float: left;
display: block;
width: 130px;
}
Merci d'avance pour votre aide,
Okahiro