28220 sujets

CSS et mise en forme, CSS3

Navigation horizontale, images et rollover

Bonjour !

Je cherche à faire une navigation horizontale où les liens ont une image en background et qui change en rollover. J'ai lu les recettes pour le menu horizontal et pour les rollover mais je n'arrive pas à mettre les deux ensemble Smiley decu les images n'apparaissent pas...

Voici mon code CSS

	ul#navigation {
		margin: 0;
		padding: 0;
		font: 600 1.5em Arial, Helvetica, sans-serif;
		list-style-type: none;
		}
	#navigation li {
		float: left;
		margin: 0 5px;
		list-style-type: none;
		}
	#navigation li a {
		display: block;
		width: 145;
		height: 40;
		border:: 0;
		margin: 0 5px;
		padding-left: 20px;
		color: #FF9933;
		text-decoration: none;
		line-height: 25px;
		background: url(images/btn.gif) no-repeat 0 0;
		}
	#navigation li a:hover {
		color: white;
		background-position: 0 -37px;
		}


et mon code HTML
		<ul id="navigation">
			<li><a href="#">Présentation</a></li>
			<li><a href="#">&Eacute;tudiants</a></li>
			<li><a href="#">Formations</a></li>
		</ul>


Qu'est-ce qui marche pô ? Smiley decu

ahh une 'tite question bonus Smiley cligne : quand j'utilise "text-shadow" rien n'apparaît non plus...

Lluthiel
Modifié par Lluthiel (12 Jan 2006 - 10:47)
Salut,
Déja oubblie la propriété text-shadow qui n'existe plus dans CSS2.1 donc
à eviter pour un meilleur comppatibilité.

Ton code commenté

ul#navigation {
		margin: 0;
		padding: 0;
		font: 600 1.5em Arial, Helvetica, sans-serif;
		list-style-type: none;
		}

	#navigation li {
		float: left;    /*tu peux essayer display:inline aussi*/
		margin: 0 5px;
		list-style-type: none;   /*tu n'as pas besoin de le repeter pour les li puisque c'est une propriété hérité*/
		}

	#navigation li a {
		display: block;
		width: 145;
		height: 40;
		border:: 0;
		margin: 0 5px;
		padding-left: 20px; 
		color: #FF9933;
		text-decoration: none;
		line-height: 25px;     /*pour centrer verticalement ton texte la propriété line-height devrait être egale a ton heigt :40px*/
		background: url(images/btn.gif) no-repeat 0 0; 
		}

	#navigation li a:hover {
		color: white;
		background-position: 0 -37px;  /*Pourquoi ce -37px? peut-être le prob vient de là? */
		}

Modifié par Hermann (12 Jan 2006 - 12:25)
Smiley lol je comprends pourquoi text-shadow fonctionnait pas là Smiley lol


1) quand je repasse le "float: left" en "display: inline", ça me remet les liens les uns au-dessus des autres.

2) merci pour le "list-style-type: none;". Je l'avais rajouté parce qu'à un moment ça me mettait toujours les puces sous IE Smiley rolleyes

3) J'ai toujours pô d'images même en apportant les modifs que tu m'as indiquées... Smiley biggol

Lluthiel
Modifié par Lluthiel (12 Jan 2006 - 12:29)
a écrit :
quand je repasse le "float: left" en "display: inline", ça me remet les liens les uns au-dessus des autres.


Ah oui dsl dans ton cas tes liens sont en display:block, voila pourquoi ils passent les uns au dessous des autres. Comme quoi il faut faire des tests, ce qu je n'ai pas fais.
Il faudrait que tu laisse un liens pour qu'on puisse voir d'ou bient le prob mais comme ça je px pas te dire.
Pas de pbm Smiley smile

Pour le lien, c'est par ici !

C'est pour les 3 liens "Présentation", "Etudiants" et "Formations". Le rollover sur le texte fonctionne, mais les images n'apparaissent pas.

Lluthiel
Modifié par Lluthiel (12 Jan 2006 - 12:43)
Ton code

		width: 145;
		height: 40;
		border:: 0;

Deja tu as une erreur par ligne. il te maque les px et tu as un ":" en trop!

Ensuite erreur courante tu as ton fichier dans un rép CSS donc ton background devrait être
url(../images/btn.gif) ou en absolu url(/CRAL/images/btn.gif) au lieu de url(images/btn.gif)
Modifié par Hermann (12 Jan 2006 - 13:01)
arghh à force de travailler dessus, on ne voit plus les erreurs de base de son code Smiley confus Smiley biggol

Par contre, toujours pas d'images... Smiley decu

Lluthiel
Ecoute si tu vois pas ton bgrd c'est que ton img btn est autre part,j'ai essayé sur mon poste et on la voit.
Essaye de trouver l'erreur par toi même.
C'est pas à moi a faire ton boulot, tu le comprendra j'espere.

Bonne journée
Modifié par Hermann (12 Jan 2006 - 13:30)
Sujet clos
Aller à