28172 sujets

CSS et mise en forme, CSS3

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

<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
Salut,
Tu as déjà pas mal d'erreurs. Tu es entrain de mentionner une unité dans l'attribut height de ta balise img (que tu as d'ailleurs dupliqué) et tu es aussi entrain de placer des éléments non autorisés à être enfants directs d'un <ul>. En gros il n'y a que les <li> qui peuvent être enfants d'une <ul>.
Si c'est pour centrer tes liens, tu devrais simplement appliquer un text-align:center à tes li