Optimiser le code CSS

Version imprimable

Bonjour :)

J'ai deux pages .shtml comportant un formulaire. Ils sont à une hauteur différente, est-il possible de réduire au maximum, le code suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
#moteur-de-recherche {
width:125px;
height:109px;
position:fixed;
margin-top:337px;
}
#moteur-de-recherche-bis {
width:125px;
height:109px;
position:fixed;
margin-top:260px;
}

Une autre petite question, concernant deux span dont la configuration des liens est identiques:

Code:

1
2
3
4
5
6
7
8
9
span.en-savoir-plus a:link    { color:#990000; text-decoration:underline; background:#f3f3f3; }
span.en-savoir-plus a:visited { color:#990000; text-decoration:underline; background:#f3f3f3; }
span.en-savoir-plus a:hover   { color:black;   text-decoration:underline; background:#f3f3f3; }
span.en-savoir-plus a:active  { color:#990000; text-decoration:underline; background:#f3f3f3; }
 
span.telecharger a:link    { color:#990000; text-decoration:underline; background:#f3f3f3; }
span.telecharger a:visited { color:#990000; text-decoration:underline; background:#f3f3f3; }
span.telecharger a:hover   { color:black;   text-decoration:underline; background:#f3f3f3; }
span.telecharger a:active  { color:#990000; text-decoration:underline; background:#f3f3f3; }

J'ai tenté un:

Code:

span.telecharger, span.en-savoir-plus

Mais pas de bons résultats :oops:

Qu'en pensez-vous ?

:merci:

30/01/2008, 11h22
BnA
Salut!

Alors, pour tes DIV, comme le margin-top est la seule valeur qui change, tu peux faire ceci:
Code:

1 2 3 4 5 6 7 8 9 10 #moteur-de-recherche { width:125px; height:109px; position:fixed; margin-top:337px; } .moteur-de-recherche-bis { /*Attention il s'agit désormais d'une classe*/ margin-top:260px; }
...et l'appel correspondant (pour le moteur de recherche bis) sera

Code:

<div id="moteur-de-recherche" class="moteur-de-recherche-bis">

.

Il n'y a pas (à ma connaissance) de méthode plus directe, étant donné qu'une valeur change.

-----

Pour ta 2ème question...

Premièrement, rien ne sert d'assigner tes classes à un span si tu lies ta classe à cette balise en HTML.

Et puisque ce sont exactement les mêmes valeurs, rien ne t'empêche d'assigner cette classe à différents endroits (en changeant peut-être le nom de la classe pour qu'il soit plus parlant)

Tu peux également enlever certains paramètres, car tu les redéfinis plusieurs fois sans les changer.

Ce qui donnera
Code:

1 2 3 .lien a { color:#990000; text-decoration:underline; background:#f3f3f3; } .lien a:hover { color:black;}
30/01/2008, 12h46
Olivier Regnier

Bonjour :)

Concernant les liens, c'est impec :yaisse2:

En revanche, le moteur de recherche c'est une autre histoire. Le deuxième moteur de recherche garde la valeur de la hauteur du div id non de la classe 8O
30/01/2008, 14h06
Candygirl
Citation:

Envoyé par Olivier Regnier

Le deuxième moteur de recherche garde la valeur de la hauteur du div id non de la classe 8O

C'est parce qu'utiliser un id est plus spécifique qu'une classe et il prend donc le dessus.

Je trouverais plus logique d'attribuer le css commun à une class et la particularité à un id (ou autre class si doit être réutilisé), ce qui règlerait d'ailleurs ton pb de spécificité. Genre:
Code:

1 2 3 4 5 6 7 8 9 10 .moteur-de-recherche { width:125px; height:109px; position:fixed; margin-top:337px; } #moteur-de-recherche-bis { margin-top:260px; }
Autrement si tu as de toute manière tes 2id et que tu ne veux pas alourdir avec une class, tu peux aussi faire du genre:
Code:

1 2 3 4 5 6 7 8 9 10 #moteur-de-recherche,#moteur-de-recherche-bis { width:125px; height:109px; position:fixed; margin-top:337px; } #moteur-de-recherche-bis { margin-top:260px; }
31/01/2008, 08h41
Olivier Regnier

Merci à tous les deux, ma feuille de style se sent plus légère :mouarf:

Cela fonctionne, testé et approuvé :mrgreen:

:merci: