Menu horizontal en CSS
Résolu
Lili_754
Messages postés
137
Statut
Membre
-
Lili_754 Messages postés 137 Statut Membre -
Lili_754 Messages postés 137 Statut Membre -
Bonjour à tous,
Je rencontre un petit souci sur ma page de style, je souhaite que mon menu soit horizontal hors là il se place l'un après l'autre.
Voici ma feuille de style CSS:
.header {
background:#CC9999;
height:35px;
}
.container {
width: 960px;
margin: 0 auto;
}
.logo{
background:url(img/logo.png)no-repeate;
display: block;
float:left;
width:89px;
height:54px;
}
.wrap{
width:960px;
margin:0 auto;
}
.menu{
width:202px;
height:35px;
margin:0 auto;
}
.menu.ul.li{ !! c'est ici que je pense qu'il y a un problème !!
float:left;
text-decoration:none;
}
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="wrap">
<a href="s" class="logo"> Logo </a>
</div>
<div class="menu">
<ul>
<li> <a href="s">Paris</a></li>
<li> <a href="s">Rome</a></li>
<li> <a href="s">Barcelona</a></li>
</ul>
</div>
</div>
</body>
</html>
Merci d'avance
Je rencontre un petit souci sur ma page de style, je souhaite que mon menu soit horizontal hors là il se place l'un après l'autre.
Voici ma feuille de style CSS:
.header {
background:#CC9999;
height:35px;
}
.container {
width: 960px;
margin: 0 auto;
}
.logo{
background:url(img/logo.png)no-repeate;
display: block;
float:left;
width:89px;
height:54px;
}
.wrap{
width:960px;
margin:0 auto;
}
.menu{
width:202px;
height:35px;
margin:0 auto;
}
.menu.ul.li{ !! c'est ici que je pense qu'il y a un problème !!
float:left;
text-decoration:none;
}
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="wrap">
<a href="s" class="logo"> Logo </a>
</div>
<div class="menu">
<ul>
<li> <a href="s">Paris</a></li>
<li> <a href="s">Rome</a></li>
<li> <a href="s">Barcelona</a></li>
</ul>
</div>
</div>
</body>
</html>
Merci d'avance
A voir également:
- Menu horizontal en CSS
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Excel menu déroulant en cascade - Guide
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
1 réponse
Bonjour,
>> .menu.ul.li{ !! c'est ici que je pense qu'il y a un problème !!
Tout à fait! Pour appliquer un style à des balises enfants à partir de la classe parent (.menu), il ne faut pas mettre de point devant les balises enfants, donc :
ça ne résoudra peut-être pas ton problème, mais autant faire une correction pas à pas...
>> .menu.ul.li{ !! c'est ici que je pense qu'il y a un problème !!
Tout à fait! Pour appliquer un style à des balises enfants à partir de la classe parent (.menu), il ne faut pas mettre de point devant les balises enfants, donc :
.menu ul li {
float: left;
text-decoration: none;
}
ça ne résoudra peut-être pas ton problème, mais autant faire une correction pas à pas...
.menu ul li { list-style-type: none; display: inline; float: left; text-decoration: none; }