alignement en CSS

Menu horizontal

14 juin 2018 à 16:08:24

Bonjour, j'aimerais faire une menu qui se place a côte du logo que j'ai déjà coder mais j'ai un problème avec mon menu car je n'arrive pas à le mettre à côté de mon logo car quand j'essaye de faire un float : right mon menu je retrouve beaucoup trop loin. Si vous pouvez m'aider

Voici mon CSS :

#logo{
	display: inline-block;
	vertical-align: top;
	width: 160px;
	height: 100px;
	margin: 0px 2vw;
	overflow: hidden;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	background-color: #ffffff;
	background-image: url('/Escalade/img/logo.jpg');
	box-shadow: 0px 0px 15px #777777;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center center;
}

 div > l{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background-color: #FF0000;
    box-shadow: 0px 1px 15px #777777;
    width: 100vw;
    height: 100px;
}

ul#menu { 
	float : right;
	width : 600px; 
	height : 30px;
	margin : 2em 0 0 0;
	padding : 0;
	background-color : transparent;
	list-style-type : none; 
}
 
ul#menu li {
	padding : 0 0.5em;  
	line-height : 30px;
	display: inline-block;
}

ul#menu a {
	color : black;
	text-decoration : none;
	padding : 0 0.5em; 
	font :  0.8em "Trebuchet MS";
}
 
ul#menu a:hover { text-decoration : underline; }

Voici mon code :

<!DOCTYPE html>
<html> 
<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css.css">
		<div><l>         
                <div id="logo">
                </div>

				<ul id="menu">
					<li><a href="actualite.php">Actualité</a></li>
					<li><a href="presentation.php">Présentation</a></li>
					<li><a href="contact.php">Contact</a></li>
				</ul>
			</l>
		</div>
</head>
<body>

</body>

EmmanuelBeziat

14 juin 2018 à 16:14:38

Salut,

Déjà, avec ta structure dans <body> et non dans <head>, ce serait beaucoup mieux…
Ensuite, la balise <l>, ça n'existe pas. Tu ne peux pas inventer des balises.
Laisse tomber les ID, garde ça pour les ancres. Pour ton CSS, utilise des classes.
Pourquoi float ? Utilise flexbox.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Pyrocats

14 juin 2018 à 16:23:03

Je te remercie pour ton aide je ne connaissais pas trop Flexbox c'est pour cela que j'utiliser float.

EmmanuelBeziat

14 juin 2018 à 16:29:36

Le cours HTML/CSS du site en fait une présentation, mais tu peux sans problème trouver des ressources un peu partout pour apprendre à le prendre en main.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !