Menu horizontal avec 1 image en rollover

Bonsoir,

J'ai commencé mon premier menu horizontal en CSS avec une seul image chargé et un systeme de rollhover.

Seulement j'ai deux petit problèmes : - Quand je passe sur un de mes lien le rollhover est décalé au niveau de la balise <li>.

- Je n'arrive pas a placeer mon texte bien au milieu en hauteur.

Voici mon menu http://www.interplanet.be/menu/

(Provient d'alsacréations).

Merci à tous

A++
Modifié par fabienfs (04 Jun 2006 - 22:01)

Salut,

j'ai essayer d'arranger ton menu. Pour descendre un peu le texte j'ai rajouté un peu de padding top, pour certains décalage cela venait de marges non remise à zéro et puis voilà :

CSS:

div#menutop {
	margin: 0;
	font-family: Arial;
	font-weight: bold;
	font-size: 13px;
	color: #E6E6E6;
	position: relative;
	height: 30px;
	clear: both;
	background: #FFF url(menu.gif) no-repeat 0 0;
}
#menutop ul, #menutop li {
	margin: 0;
	padding:0;
	list-style-type: none;
	list-style-position: outside;
}
#menutop li {
	display: inline;
}
#menutop li a {
	display: inline;
	float: left;
	height: 22px;
	width: 144px;
	text-decoration: none;
	color: #E6E6E6;
	padding-top: 8px;
	text-indent:38px;
	background: url(menu.gif) no-repeat 0 -60px;
}
#menutop a:hover {
	color: #FFFFFF;
}

#menutop a#menu1:hover {
	background-position: 0px -30px;
}
#menutop a#menu2:hover {
	background-position:  -144px -30px;
}
#menutop a#menu3:hover {
	background-position:  -288px -30px;
}
#menutop a#menu4:hover {
	background-position:  -432px -30px;
}
#menutop a#menu5:hover {
	background-position:  -576px -30px;
}
#menutop a#menu6:hover {
	background-position:  -720px -30px;
}

Modifié par eman73 (23 Jan 2006 - 21:51)

Ho super merci,
Il y a juste encore un petit problème de rollhover sur le bas des boutons ( voir: ICI ).

Grand merci
A++
Modifié par fabienfs (04 Jun 2006 - 22:01)

height: 30px;

trouvé

grand merci

Bonne soirée.
Fabien
Modifié par fabienfs (23 Jan 2006 - 22:06)

Au faite, que veut dire clear: both; ?

C'est pour annuler les "float" c'est à dire que si un élement précédent est en float (left ou right) l'élement qui a clear:both (il annule donc le float:left et le float :right), ne respectera pas ce float, c'est-à-dire, que l'élement retournera automatiquement à la ligne..

dans ce cas isolé tu n'en a pas forcément besoin, mais cela depend de ta future mise en page...


http://wiki.media-box.net/documentation/css/clear
Modifié par eman73 (23 Jan 2006 - 22:19)

Bonjour et bienvenue fabienfs,

fabienfs a écrit :
(Provient d'alsacréation).

AlsacréationS



Le sujet peut-il être considéré comme [Résolu]?
Modifié par Felipe (24 Jan 2006 - 03:25)

Oups oui le s

Bonjour à toi