28220 sujets

CSS et mise en forme, CSS3

[Résolu] Menu horizontal avec 1 seule image...

Bonjour bonjour.

Une fois n'est pas coutume, je me suis attaqué à trop fort pour mon petit niveau. J'essaie de faire un menu horizontal avec une seule image (comme expliqué sur ce tuto en version verticale). J'ai bien regardé le CSS de cet exemple horizontal pour comparer mais un truc m'échappe...

Au moment du background-position, et même ne serait-ce que l'image en elle-même (j'ai décidé de tricher).

Pour info, mon image est ici.

Le but, c'est que j'ai le menu normal en haut, puis quand je passe sur un lien, ça vient chercher ce qu'il y a à gauche, avec -20px à chaque fois... Ca marche pas ! Smiley bawling

Voici la partie html (très sommaire) : 

<ul id="menu">
  <li><a id="formation" href="">Formation</a></li>
  <li><a id="exp" href="">Expériences pro.</a></li>
  <li><a id="profil" href="">Profil</a></li>
  <li><a id="loisirs" href="">Centres d'intérêt</a></li>
</ul>


et le css : 

/* Menu */
	
ul, li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

ul {
	position: absolute; /* Pour IE5 */
	background: transparent url(GraphX/Menu.jpg) top left no-repeat;
	height: 20px;
	width: 760px;
	margin-top: 5px;
	text-align: center;
}

li {
	float: left; 
}
	
li a {
	color: #AD7576;
	display: block;
	height: 20px;
	width: 190px;
	line-height: 20px; /* Hauteur de ligne pour éviter les paddings */
}

li a:hover {
	color: #640000;
	background: transparent url(GraphX/Menu.jpg) top left no-repeat;
}

a#formation:hover {
	background-position: 0% -40px;
}

a#exp:hover {
	background-position: 0% -60px;
}

a#profil:hover {
	background-position: 0% -80px;
}

a#loisirs:hover {
	background-position: 0% -100px;
}


J'espère que c'est tout con, mais là avec mon niveau de débutant en css... j'ai peut-être eu les yeux plus gros que le ventre ! Smiley sweatdrop Enfin, c'est comme ça qu'on progresse ! Smiley ravi

Merci d'avance à ceux qui voudront bien m'aider.

Edit. J'ai un peu amélioré la chose, c'est simplement mon positionnement par rapport à mon jpg qui déconne maintenant...
Modifié par Abo (24 Mar 2005 - 11:48)
T'as un exemple en ligne de ce que ça donne ??

A priori tu as mal construit ton image pour le gérer simplement

Pourquoi ne pas tout mettre sur la même ligne ?

Un essai :

ul#menu
{
	width: 708px;
	height: 20px;
	margin: 0;
	padding: 0;
	line-height: 20px;
	list-style-type: none;
	background: url(menu.png) no-repeat 0 0;
}

ul#menu li
{
	float: left;
}

ul#menu li a
{
	display: block;
}

a#formation { width: 138px }
a#exp { width: 190px }
a#profil { width: 190px }
a#loisirs { width: 190px }

a#formation:hover { background: url(menu.png) no-repeat 0 -20px }
a#exp:hover { background: url(menu.png) no-repeat -138px -20px }
a#profil:hover { background: url(menu.png) no-repeat -328px -20px }
a#loisirs:hover { background: url(menu.png) no-repeat -518px -20px }


Avec une image comme ça upload/6-menu.png
J'avais essayé aussi avec une image comme ça (et aussi une tout en longueur) mais je me suis foutu dedans après avec le background position... Je vais faire ce que tu me dis.

Juste une question : Pourquoi dans ton a#formation, le premier width ne fait que 138px ? Sont censés être tous à 190 non ? (190*4=760)

Et 2nde question pour la route, tu pense qu'il vaut mieux que je les fasse un par un plutôt que de regrouper dans un *li a* et un *li a:hover* (sauf les background position bien sûr) ?

Merci.
OK ça marche maintenant. Merci beaucoup. Me reste plus qu'à faire un truc esthétique maintenant (mais Photoshop je connais un peu mieux Smiley ravi )

Pour info, j'ai changé mes background-position, avec une image sur deux lignes, mais j'ai laissé les li a et li a:hover.

Merci.

PS. Ah et au fait, j'ai bien mis du 190px dès le début, et pas 138 (je sais pas d'où tu le sortais lui ! Smiley cligne )
Modifié par Abo (24 Mar 2005 - 11:54)
Pour le 138, c'est parceque ton image était blanche au départ, je pensais donc que ça n'en faisait pas parti Smiley cligne

Donc, le code résultant devient ça :


#menu
{
width: 760px;
height: 20px;
margin: 0;
padding: 0;
line-height: 20px;
list-style-type: none;
background: url(menu.png) no-repeat 0 0;
}

ul#menu li
{
float: left;
}

ul#menu li a
{
display: block;
width: 190px;
}

a#formation:hover { background: url(menu.png) no-repeat 0 -20px }
a#exp:hover { background: url(menu.png) no-repeat -190px -20px }
a#profil:hover { background: url(menu.png) no-repeat -380px -20px }
a#loisirs:hover { background: url(menu.png) no-repeat -570px -20px }


Voilà.
Modifié par Olivier (24 Mar 2005 - 12:09)
Sujet clos
Aller à