28173 sujets

CSS et mise en forme, CSS3

Garder un bouton 'on'

Pages :
(reprise du message précédent)

r4z a écrit :
oui j'avais compris lol, et non c'est en local -> sur mon pc Smiley langue

Ben apparemment tu n'as pas compris le sous-entendu (la parenthèse dans la version « explicite mais semble-t-il pas assez » ) : « et si elle n'est pas encore disponible quelque part en ligne sur un hébergement de test, y remédier ». Smiley cligne

Libre à toi de ne donner que des bouts de code et de continuer sur le jeu des questions-réponses, mais comme on perds beaucoup moins de temps avec une page en ligne, il est probable que les réponses se tarissent sans ça. Smiley decu
Pour remédier à ton doublon, utilises soit une class tout simplement :

<li class="menu1"><a class="menu1">


soit changes un des deux :

<li id="menu_li"><a class="id_a">

?

Je préfère la deuxième solution.
Pwapwal a écrit :
Pour remédier à ton doublon, utilises soit une class tout simplement :

<li class="menu1"><a class="menu1">


soit changes un des deux :

<li id="menu_li"><a class="id_a">

?

Je préfère la deuxième solution.


pour les doublons j'ai carément viré le id de la balise <a> car dans ma feuille de style le <a> est définit par l'intermédiaire du LI.
je ne peux pas pour l'instant mais par contre je peux t'envoyer limage de mon menu, et le code qui correspond
Hello,

Une partie de tes problèmes venait du fait qu'il est difficile de jongler entre l'image de fond du UL et les images de fond des A.

Code CSS corrigé (pas de changement côté HTML sauf pour l'ajout d'un identifiant) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
/* # 6. gestion de l'affichage du menu ################################################### */
ul#menulist, #menulist li {
	list-style-type: none;
	margin:0;
	padding:0;
}
ul#menulist {
	position: relative;
	margin: 0px 0 ;
	padding: 0px ;
	width: 852px;
	height: 30px;
	text-align: center;
}
#menulist li {
	float: left;
	height: 30px;
}
#menulist li#menu1 {width: 95px;}
#menulist li#menu2 {width: 93px;}
#menulist li#menu3 {width: 132px;}
#menulist li#menu4 {width: 84px;}
#menulist li#menu5 {width: 70px;}
#menulist li#menu6 {width: 126px;}
#menulist li#menu7 {width: 50px;}
#menulist li#menu8 {width: 92px;}
#menulist li#menu9 {width: 110px;}

#menulist li a {
	display: block;
	height: 100%;
	background-image: url(http://elasticlounge.free.fr/alsa/new_menu.png);
	background-repeat: no-repeat;
}

/* État normal des liens */
#menulist li#menu1 a {background-position: 0px 0%;}
#menulist li#menu2 a {background-position: -95px 0%;}
#menulist li#menu3 a {background-position: -188px 0%;}
#menulist li#menu4 a {background-position: -320px 0%;}
#menulist li#menu5 a {background-position: -404px 0%;}
#menulist li#menu6 a {background-position: -474px 0%;}
#menulist li#menu7 a {background-position: -600px 0%;}
#menulist li#menu8 a {background-position: -650px 0%;}
#menulist li#menu9 a {background-position: -742px 0%;}

/* État survolé ou actif */
#menulist li#menu1 a:hover,
#menulist li#menu1 a#encours {
	background-position: -852px 0%;
}
#menulist li#menu2 a:hover,
#menulist li#menu2 a#encours {
	background-position: -947px 0%;
}
#menulist li#menu3 a:hover,
#menulist li#menu3 a#encours {
	background-position: -1040px 0%;
}
#menulist li#menu4 a:hover,
#menulist li#menu4 a#encours {
	background-position: -1172px 0%;
}
#menulist li#menu5 a:hover,
#menulist li#menu5 a#encours {
	background-position: -1256px 0%;
}
#menulist li#menu6 a:hover,
#menulist li#menu6 a#encours {
	background-position: -1326px 0%;
}
#menulist li#menu7 a:hover,
#menulist li#menu7 a#encours {
	background-position: -1452px 0%;
}
#menulist li#menu8 a:hover,
#menulist li#menu8 a#encours {
	background-position: -1502px 0%;
}
#menulist li#menu9 a:hover,
#menulist li#menu9 a#encours {
	background-position: -1594px 0%;
}
</style>
</head>

<body>
		<div id="menutop">
			<ul id="menulist">
					<li id="menu1"><a href="#">1</a></li>
					<li id="menu2"><a href="#">2</a></li>
					<li id="menu3"><a href="#" id="encours">3</a></li>
					<li id="menu4"><a href="#">4</a></li>
					<li id="menu5"><a href="#">5</a></li>
					<li id="menu6"><a href="#">6</a></li>
					<li id="menu7"><a href="#">7</a></li>
					<li id="menu8"><a href="#">8</a></li>
					<li id="menu9"><a href="#">9</a></li>
			</ul>
		</div>

</body>
</html>

Ça marche bien sous IE6.

Mais bon, c'est du méchant bricolage cette histoire. Mieux vaudrait avoir une image par lien, avec la structure suivante :
<ul id="menulist">
	<li><a href="..."><img src="menu1a.png" alt="Lien 1" /></a></li>
	<li><a href="..."><img src="menu2a.png" alt="Lien 2" /></a></a></li>
	<li><a href="..."><img src="menu3b.png" alt="Lien 3" /></a></a></li>
	<li><a href="..."><img src="menu4a.png" alt="Lien 4" /></a></a></li>
	<li><a href="..."><img src="menu5a.png" alt="Lien 5" /></a></a></li>
	<li><a href="..."><img src="menu6a.png" alt="Lien 6" /></a></a></li>
	<li><a href="..."><img src="menu7a.png" alt="Lien 7" /></a></a></li>
	<li><a href="..."><img src="menu8a.png" alt="Lien 8" /></a></a></li>
	<li><a href="..."><img src="menu9a.png" alt="Lien 9" /></a></a></li>
</ul>

Le troisième lien correspond à la page en cours (image menuXb au lieu de menuXa).

Avec :
- preload des images (états de survol) en Javascript (par exemple) ;
- rollover en Javascript également.

C'est une solution plus robuste et plus accessible, mais ça demande de connaitre un peu Javascript, ou de se documenter. Smiley cligne
merci Florent, je suis justement passé du menu image par image à un menu à image unique en CSS. Je trouve que c'est plus facilement gérable une fois qu'on a capté le truc.
Pages :
Sujet clos
Aller à