28221 sujets

CSS et mise en forme, CSS3

Minimiser code css [résolu]

Bon et bien tout d'abord salut tout le monde et puis j'espère que vous avez tous été gatés à Noël Smiley lol

Ca fesait longtemps que je n'avais pas posté sur ce forum car je n'avais pas trop de problèmes avec les css qui n'avaient pas déjà étaient traités et que je ne suis pas un assez bon niveau pour aider les autres personnes qui ont des problèmes avec les css... du coup je n'étais là qu'en invité.

Mais là, comme j'ai un petit souci je me suis dit que vous pourriez peut-être m'aider Smiley biggrin

Donc voici mon problème :
J'aimerais créé un menu avec un fond, un contour et une image en background. Jusque là c'est bon. Seulement je veux mettre plusieurs menus identiques avec seulement l'image de fond qui change, et à part retaper tout le code en entier dans ma css en modifiant juste le lien vers l'image, je n'ai rien trouvé.

Donc j'aimerais savoir si il n'y a pas un moyen de changer juste une partie du code plutot que de tout remettre pour alléger ma page css.

Voici un extrait du code pour que vous compreniez mieux :
.menu1 {
list-style-type: none;
margin-left: 10px;
padding:0;
width: 150px;
border: 1px solid #000;
background-color: #126188;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
text-align: left;
color: #E0E0E0;
background-image: url(../images/menu/fond1.gif);
background-repeat: no-repeat;
background-position: bottom;
}
.menu1 a {
color: #E0E0E0;
text-decoration: none;
font-weight: bold;
}
.menu1 a:hover {
color: #A6E2FF;
text-decoration: none;
font-weight: bold;
}
.menu2 {
list-style-type: none;
margin-left: 10px;
padding:0;
width: 150px;
border: 1px solid #000;
background-color: #126188;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
text-align: left;
color: #E0E0E0;
background-image: url(../images/menu/fond1.gif);
background-repeat: no-repeat;
background-position: bottom;
}
.menu2 a {
color: #E0E0E0;
text-decoration: none;
font-weight: bold;
}
.menu2 a:hover {
color: #A6E2FF;
text-decoration: none;
font-weight: bold;
}


Bon et bien j'espère que vous pourrez m'aider et je vous remercies par avance de vos réponses Smiley smile

PS : j'ai fait une recherche sur le forum mais je n'ai rien trouvé : peut-être n'ai-je pas tapé les bons mots clés, en tout cas désolé si cette question avait déjà été posée.
Modifié le 30 Dec 2004 - 15:48
Ceci pourra sûrement t'aider :
http://www.pompage.net/pompe/cssefficace/

sinon pour la réelle question que tu poses, le plus simple est de donner un id à chacun de tes menus, et de faire un truc du style


#id1 { background: url(image1) ; }
#id2 { background: url(image2) ; }
...


Et de mettre les styles communs normalement grâce à l'heritage.
Administrateur
tu peux combiner ces lignes :
background-color: #126188;
background-image: url(../images/menu/fond1.gif);
background-repeat: no-repeat;
background-position: bottom;

en une seule :
background:#126188 url(../images/menu/fond1.gif) no-repeat bottom;
En regardant vite fait, étant donné que .menu1 et .menu2 ont pas mal de choses en commun, tu pourrais faire :

.menu1, .menu2 {
list-style-type: none;
margin-left: 10px;
padding:0;
width: 150px;
border: 1px solid #000;
background-color: #126188;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
text-align: left;
color: #E0E0E0;
background-image: url(../images/menu/fond1.gif);
background-repeat: no-repeat;
background-position: bottom;
}


Et éventuellement rajouter pour les éléments qui différencieraient .menu2 :
.menu2 {
/* autres propriétés CSS différenciantes */
}
Merci à tous, ça fonctionne très bien Smiley biggrin

En plus tout ça pourra me resservir par la suite donc merci beaucoup. Sinon fastclemmy j'obtiens bien quelquechose dans le genre de ce que tu as écris :

#menu1, #menu2, #menu3, #menu4 , #menu5 { 
list-style-type: none;
margin-left: 10px;
padding:0;
width: 150px;
border: 1px solid #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
text-align: left;
}

#menu1 { background: url(../images/menu1.gif) no-repeat; background-position:bottom; background-color:#126189; }
#menu2 { background: url(../images/menu2.gif) no-repeat; background-position:bottom; background-color:#126189; }
#menu3 { background-color:#126189; }
#menu4 { background-color:#126189; }
#menu5 { background-color:#126189; }


Je vais juste voir si je ne peux pas optimiser un peu le code de "#menu1, #menu2, #menu3, #menu4 , #menu5 { " un peu comme l'a dit Dew.

Voilà donc mon problème est réglé, j'ai un problème avec une image map maintenant, mais j'essie de régler ça tout seul et si je n'y arrive pas je fais un nouveau post.

@+
Je n'ai pas tout lu car c'est en anglais (un peu à traduire pour moi vu que je n'ai que les bases en anglais Smiley lol ) mais je pense que c'est à peu près la même chose que là :
http://www.alsacreations.com/articles/imagemaps/

C'est cette méthode que j'ai utilisé mais j'avais un problème avec les liens sur la même ligne (horizontale) : j'avais un retour à la ligne... en fait c'était du au "float:left" que j'ai remplacé par un "position:absolu" et là tout fonctionne.

Bon je vais faire un nouveau post maintenant pour exposer un petit problème sur le centrage d'image...

@+

édit par Igor: j'ai rétabli le bon lien
Modifié le 30 Dec 2004 - 20:30
Sujet clos
Aller à