Discussion :

[Olivier Regnier]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

span.telecharger, span.en-savoir-plus

Mais pas de bons résultats

Qu'en pensez-vous ?

[BnA]

Salut!

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
.lien a { color:#990000; text-decoration:underline; background:#f3f3f3; }
.lien a:hover   { color:black;}

[Olivier Regnier]

Bonjour

Concernant les liens, c'est impec

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

[Candygirl]

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[Olivier Regnier]

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

Cela fonctionne, testé et approuvé