28221 sujets

CSS et mise en forme, CSS3

Existe t'il un moyen de simplifier ce code ?

Bonjour,

Je viens de faire un menu sous forme de rollover basé sur l'emploi de css en suivant différents tuts, et je souhaiterais savoir si il existerait un moyen de simplifier le code que j'ai fais..

Il exsite 3 états pour l'iimage..

OFF, ON, SURVOL..

je souhaite pouvoir en fonction du contexte mettre ON l'image de la section en cours...

Donc ce code fonctionne :


/* ROLLOVER ----------------------------------------------------*/
#menu span {display:none;}
#menu {
	position:relative;
}
ul#menu , li#menu { 
	list-style-type: none;  
	margin:0;
	padding:0;
}

ul#menu {
	position: absolute;
	left: 127px;
	top: 88px;
	background: transparent url(/images/_bouts.jpg) top left no-repeat; 
	height: 421px;
	width: 235px;
	text-align: center;
}

#menu li{
	display: inline;
}

#menu li a {
	display: block;  
	height: 60px;
	width: 235px;
}

#menu1 a:hover {background: transparent url(/images/_bouts.jpg) -235px 0 no-repeat;}
#menu2 a:hover {background: transparent url(/images/_bouts.jpg) -235px -60px no-repeat;}
#menu3 a:hover {background: transparent url(/images/_bouts.jpg) -235px -120px no-repeat;}
#menu4 a:hover {background: transparent url(/images/_bouts.jpg) -235px -180px no-repeat;}
#menu5 a:hover {background: transparent url(/images/_bouts.jpg) -235px -240px no-repeat;}
#menu6 a:hover {background: transparent url(/images/_bouts.jpg) -235px -300px no-repeat;}
#menu7 a:hover {background: transparent url(/images/_bouts.jpg) -235px -360px no-repeat;}

/* ACTIVE ----------------------------------------------------*/
#active1 a {background: transparent url(/images/_bouts.jpg) -470px 0 no-repeat;}
#active2 a {background: transparent url(/images/_bouts.jpg) -470px -60px no-repeat;}
#active3 a {background: transparent url(/images/_bouts.jpg) -470px -120px no-repeat;}
#active4 a {background: transparent url(/images/_bouts.jpg) -470px -180px no-repeat;}
#active5 a {background: transparent url(/images/_bouts.jpg) -470px -240px no-repeat;}
#active6 a {background: transparent url(/images/_bouts.jpg) -470px -300px no-repeat;}
#active7 a {background: transparent url(/images/_bouts.jpg) -470px -360px no-repeat;}

#active1 a:hover {background: transparent url(/images/_bouts.jpg) -235px 0 no-repeat;}
#active2 a:hover {background: transparent url(/images/_bouts.jpg) -235px -60px no-repeat;}
#active3 a:hover {background: transparent url(/images/_bouts.jpg) -235px -120px no-repeat;}
#active4 a:hover {background: transparent url(/images/_bouts.jpg) -235px -180px no-repeat;}
#active5 a:hover {background: transparent url(/images/_bouts.jpg) -235px -240px no-repeat;}
#active6 a:hover {background: transparent url(/images/_bouts.jpg) -235px -300px no-repeat;}
#active7 a:hover {background: transparent url(/images/_bouts.jpg) -235px -360px no-repeat;}


HTML

<ul id="menu">
				<li id="active1"><a href="/rub01.htm"><span>Aspects épidémiologiques des infections invasives à méningocoques</span></a></li>
				<li id="menu2"><a href="/rub02.htm"><span>Pathologie</span></a></li>
				<li id="menu3"><a href="/rub03.htm"><span>Conduite à tenir par les médecins</span></a></li>
				<li id="menu4"><a href="/rub04.htm"><span>Edute de cas (vidéo)</span></a></li>
				<li id="menu5"><a href="/rub05.htm"><span>Aspects réglementaires</span></a></li>
				<li id="menu6"><a href="/rub06.htm"><span>Documentation</span></a></li>
				<li id="menu7"><a href="/rub07.htm"><span>Pour en savoir plus</span></a></li>
			</ul>


Merci
Modifié le 19 Nov 2004 - 14:18
Je ne comprends pas bien ton code :
tu as des éléments #menu_n et #active_n dans ta css mais pas dans ton code html : seulement #active1, pas de #menu1, pas de #active2 etc... ??? Smiley ohwell
La technique utilise une seule image contenant trois états et en plus on veut que la page courante soit "on".

À mon avis, pour tous les octets sauvés dans chacune des pages, le code CSS ne peut pas réellement être plus court.

<edit>
Le "transparent" est-il nécessaire ?
</edit>
Modifié le 19 Nov 2004 - 20:47
Ce que tu peux faire pour alléger "visuellement" ta feuille de style, c'est faire des style séparé pour chaque "design", et les appeler avec @import url(page1.css) ;

Pour regrouper les éléments qui varient d'un même type ensemble.
Stephan a écrit :
La technique utilise une seule image contenant trois états et en plus on veut que la page courante soit "on".

À mon avis, pour tous les octets sauvés dans chacune des pages, le code CSS ne peut pas réellement être plus court.

<edit>
Le "transparent" est-il nécessaire ?
</edit>



Voila une bonne question,

Pour l'instant j'ai reproduit et adapté un tut, mais j'ai pas trouvé d'infos sur ce paramètre. Smiley eek

c'est qui ce transparent msieur ?
Bah ... comme son nom l'indique c'est pour faire un background transparent au cas où il soit opaque pour une raison x ou y, a priori c'est le comportement par défaut, donc il semble inutile, mais il faudrait voir ce qu'en dit le tuto Smiley cligne
ben le tuto, ne précise pas step by step pourquoi les choses sont faites ainsi... Smiley decu

m'enfin, j'ai passé une après-midi dans dans les fnac de mon cartier sans trouver le moindre bouquin sur CSS...

vive les spécialistes....ils n'ont que des bouquin pour les gamins qui ont un photoshop hacké et qui veulent faire des fonds d'écran avec des playmate...

bref coté code, pas de CSS, n'y XHTML n'y rien d'ailleur....

Donc en terme de doc j'suis un peu limite..
Modifié le 20 Nov 2004 - 10:54
Tu as une sélection de bouquin anglophones et francophones ici :
http://www.alsacreations.com/blog/
De même que dans les ressources francophones du forum et internationnales

Tu as plusieurs Fnac dans ton quartier ??? ça c'est du bol dis moi !!!!
Et si ta fnac n'a pas de bouquin sur CSS/html c'est une honte, perso à Caen, il y en a.

Donc pour cette histoire de transparence, le mieux est de mailer le créateur du tuto ou s'il y a un système de commentaires, de demander. Mais à priori ça sert pas, faudrait voir le tuto pour être certain.
Sujet clos
Aller à