28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Probleme menu css horizontal

Salut tout le monde. Bon me revoila je suis de nouveau dans la panade malgré l'ouvrage de Raphael...je pedale !

Voila j'ai un menu constitué de 5 catégorie. Les image sont des rollover selon la methode dite "porte coulissante" de type block pour pouvoir les rendre clicable.

Mon soucis c'est j'ai j'ai beau cherche mon menu reste toujours a la position vertical... voici le code :

CSS
a écrit :

ul#menu {
position:relative;
margin-top:-100px;
list-style:none;
margin-left:auto;
margin-right:auto;
}

li#accueil a {
display:block;
width:100px;
height:100px;
background:url(boutons/accueil.jpg) no-repeat 0 0; }
li#accueil a:hover {
background-position: 0 -100px;}

li#diaporama a {
display:block;
width:100px;
height:100px;
background:url(boutons/diaporama.jpg) no-repeat 0 0; }
li#diaporama a:hover {
background-position: 0 -100px;}


li#histoires a {
display:block;
width:100px;
height:100px;
background:url(boutons/histoires.jpg) no-repeat 0 0; }
li#histoires a:hover {
background-position: 0 -100px;}

li#naturecrea a {
display:block;
width:100px;
height:100px;
background:url(boutons/naturecrea.jpg) no-repeat 0 0; }
li#naturecrea a:hover {
background-position: 0 -100px;}

li#agenda a {
display:block;
width:100px;
height:100px;
background:url(boutons/agenda.jpg) no-repeat 0 0; }
li#agenda a:hover {
background-position: 0 -100px;}


et HTML
a écrit :

<body>

<!--PRECHARGEMENT IMAGE -->
<div class="preloadimg">
<img src="gabarit/header.jpg" alt="" />
<img src="gabarit/milieu.jpg" alt="" />
<img src="gabarit/footer.jpg" alt="" />
</div>
<!--PRECHARGEMENT IMAGE -->

<!--GABARIT EN 3 IMAGES -->
<div id="divbody">

<div class="texte" id="quickmenu">Accueil - Plan du site - Webmaster</div>
<div id="titre"><img src="gabarit/footer.jpg" width="950" height="50" /></div>

<div id="divbodybas">
<div class="texte" id="divcentral">

<ul id="menu">
<li id="accueil"><a href="#"></a></li>
<li id="diaporama"><a href="#"></a></li>
<li id="histoires"><a href="#"></a></li>
<li id="naturecrea"><a href="#"></a></li>
<li id="agenda"><a href="#"></a></li>
</ul>


</div>
</div>
</div>
</div>
<!--GABARIT EN 3 IMAGES -->



</body>

Modifié par Ankart (06 Feb 2007 - 03:19)
Bonjour,

C'est normal que les liens soient vides ?

Sinon, est-ce qu'on pourrait voir ce que donne la page directement ? Ou une page de test en ligne reproduisant le problème ? Pour ma part, j'ai un peu de mal à visualiser ce que ça donne.
Essai la propriétés 
display: inline ;


Sinon sur le site d'alsacreations, tu as des exemples de menu horizontal en roll over, je pense que t'y trouvera surement la solutions.
Les items de menu (li) doivent être flottants (float: left par exemple).

Remarque en passant : tu peux diviser par trois la longueur de ton code CSS en factorisant un peu tout ça et en utilisant un sélecteur plus génériques pour les li (ul#menu li {bla bla}).
Comment simplifier mon code ? Mon probleme c'est que chaque item de menu a une image rollover dite "porte coulissante" differente. Donc quand j'imbrique tout, j'y arrive mais avec 1 seul image unique...

Merci deja pour vos reponses.

J'avais essayer le display inline mais sans succes
mais effectivement je n'ai pas mis mes element en float.
Ankart a écrit :
Comment simplifier mon code ? Mon probleme c'est que chaque item de menu a une image rollover dite "porte coulissante" differente. Donc quand j'imbrique tout, j'y arrive mais avec 1 seul image unique...

Tout ce qui se répète est en trop. Il suffit d'utiliser un sélecteur pour tous les styles communs, et de ne corriger ensuite que ce qui change pour un élément donné.

AVANT :
li#accueil a {
display:block;
float:left;
width:80px;
height:80px;
margin: 10px;
background:url(boutons/accueil.jpg) no-repeat 0 0; }
li#accueil a:hover {
background-position: 0 -80px;} 

li#diaporama a {
display:block;
float:left;
width:80px;
height:80px;
margin: 10px;
background:url(boutons/diaporama.jpg) no-repeat 0 0; }
li#diaporama a:hover {
background-position: 0 -80px;}


li#histoires a {
display:block;
float:left;
width:80px;
height:80px;
margin: 10px;
background:url(boutons/histoires.jpg) no-repeat 0 0; }
li#histoires a:hover {
background-position: 0 -80px;}

li#naturecrea a {
display:block;
float:left;
width:80px;
height:80px;
margin: 10px;
background:url(boutons/naturecrea.jpg) no-repeat 0 0; }
li#naturecrea a:hover {
background-position: 0 -80px;}

li#agenda a {
display:block;
float:left;
width:80px;
height:80px;
margin: 10px;
background:url(boutons/agenda.jpg) no-repeat 0 0; }
li#agenda a:hover {
background-position: 0 -80px;}


APRÈS :
ul#menu li a {
	float: left;
	width: 80px;
	height: 80px;
	margin: 10px;
	background-repeat: no-repeat;
	background-position: 0 0;
}
ul#menu li a:hover,
ul#menu li a:focus,
ul#menu li a:active {
	background-position: 0 -80px;
} 

ul#menu li#accueil a {background-image: url(boutons/accueil.jpg);}
ul#menu li#diaporama a {background-image: url(boutons/diaporama.jpg);}
ul#menu li#histoires a {background-image: url(boutons/histoires.jpg);}
/* etc. */

Modifié par Florent V. (06 Feb 2007 - 00:36)
Merci pour cet explication sur la simplification du code ! Smiley smile

Bon par contre j'etais pas repassé sur le forum depuis ta premiere explication qui a fonctionné !

Je nettois le code des demain Smiley smile

merci probleme menu resolut !
Sujet clos
Aller à