Menu horizontal en CSS [Résolu/Fermé]

Signaler
Messages postés
125
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
31 mai 2016
-
Messages postés
125
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
31 mai 2016
-
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

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 :
.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...
ajoute :
.menu ul li {
     list-style-type: none;
     display: inline;
     float: left; 
     text-decoration: none; 
} 
Messages postés
125
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
31 mai 2016
2
Parfait!! merciii ;)
Messages postés
125
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
31 mai 2016
2
Désolé j'ai encore un souci mais c'est au niveau de mon logo, l'image n'apparait toujours pas :-(
Tu as ça dans le CSS :
background: url(img/logo.png) no-repeat;

Donc je suppose d'après la syntaxe que si ton style est dans un fichier CSS distinct et non pas directement dans l'en-tête de la page web (entre <head> et </head>), alors le dossier img contenant l'image logo.png est au même niveau.
Si tu as un dossier nommé par exemple CSS contenant le fichier CSS et que tu as un dossier img au même niveau que le dossier CSS (et non pas contenu dans le dossier CSS) dans l'arborescence, alors la syntaxe devra être :
background: url(../img/logo.png) no-repeat;

Si le dossier img est contenu dans le dossier CSS :
background: url(img/logo.png) no-repeat;
Messages postés
125
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
31 mai 2016
2
Merciii j'ai du creer un dossier CSS et mettre un dossier img à l'interieur car avant tout etait dans le meme niveau (page.html, page.css et mon logo) dans mon dossier New Letter... Merci bcp c tres kool de ta part de m'avoir informer en plus en si peu de temps. merci :)