18041 sujets

Questions générales et questions de débutants

Fonction qui permet de changer la couleur du texte ET de border-bottom

Bonjour,

j'essaye de purifier un siteSport Bookmaker que j'ai récupéré en CSS pure ou au mieux ( j'ai beaucoup de boulot je sais Smiley smile
pour cela j'ai compris déjà que je pouvais me passer de mettre un <hr> sous mes titres et remplacer par un border-bottom.
Puis j'ai décider d'enlever les balises font color= en remplacant par la fonction class.
Smiley bawling

Le problème c'est que mes titres prennent bien la couleur prévus mais pas le soulignement.
ex Unibet


voici l'effet désiré sur cette page ( sans les lignes bleus bien sur)
bwin

je me dis que si je rajoute une la fonction border-bottom dans ma fonction class
(#main-copy .unibet { color: #339933;})
cela va me créer alors sytematiquement un soulignement que je ne désire pas à d'autre endroit dans le texte ( car j'utilise deja cette fonction).

Existe alors une fonction permettant de modifier toutes les couleur spécifié dans un Hx ( couleur de police, fond...) en précisant qu'une seul fois la couleur souhaité ?

Ou en quelque sorte emmètre l'hypothèse de changer la couleur de la bordure si il y en a une et il si il y en pas de ne pas en rajouter?
Modifié par mikee (21 Jan 2007 - 12:49)
Salut,
je comprends pas bien ta question; c'est la presence des surlignements au niveau des titres ou leur couleur qui te gene ?

a écrit :

mikee a ecrit
voici l'effet désiré sur cette page ( sans les lignes bleus bien sur)

Si c'est les couleurs - et c'est ce que j'ai compris - je vois pas trop la difference entre les deux pages... et donc je vois le probleme...
mikee a écrit :

Le problème c'est que mes titres prennent bien la couleur prévus mais pas le soulignement.
ex http://www.sport-bookmaker.fr/unibet.html

voici l'effet désiré sur cette page ( sans les lignes bleus bien sur)
http://www.sport-bookmaker.fr/bwin.html




Sur la page http://www.sport-bookmaker.fr/unibet.html
les titres du corps de texte sont vert ( grace à la fonction class : unibet)
mais le soulignement reste bleu ( couleur initiale de mon H3)

et sur cette http://www.sport-bookmaker.fr/bwin.html
j'ai mis en version beta le soulignement souhaité en orange.

Ps : sous Firefox le soulignement ne marche pas dans le deuxième cas, mais il s'agit juste d'une beta

hyoga a écrit :
Salut,
je comprends pas bien ta question; c'est la presence des surlignements au niveau des titres ou leur couleur qui te gene ?


je veux des surlignement juste pr mes titres
Modifié par mikee (04 Jan 2007 - 01:57)
A toi de mieux cibler les éléments en jouant sur le sélecteur de descendance. Je pense sincèrement que c'est facilement réalisable.
La meilleur solution que je vois c'est à priori créer une nouvelle classe spécial chacun de mes titres ( 5 pour 5 couleurs différentes) comprenant la couleur de surlignement border-bottom.

#main-copy .h2unibet {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #339933;
color: #339933;}

#main-copy .h2sportingbet {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FF0000;
color: #FF0000;}

Je voulais éviter cela afin d'avoir un css le plus light possible.
Je ne comprends pas ce que le fait de mettre des couleurs différentes pour des mêmes niveau de titre peu apporter. Selon moi, c'est semer le doute dans les habitude. Si je vois deux titres de couleur (ou de soulignement) différent, je suppose qu'il ne sont pas du même niveau.
Salut

Si les 5 titres doivent avoir des couleurs différentes, il faudra bien les déclarer quelque part. Par contre, tu déclares plusieurs fois les mêmes valeurs, au lieu de ne changer que le nécessaire ! Tu peux déjà alléger en écrivant : 
#main-copy h2 {
   border-bottom-width: 1px;
   border-bottom-style: solid;
}
#main-copy h2.unibet {
   border-bottom-color: #393;
   color: #393;
}
#main-copy h2.sportingbet {
   border-bottom-color: #f00;
   color: #f00;
}

Par ailleurs, les classes sont faites pour désigner un groupe d'éléments similaires dans la page. Si tu veux repérer des éléments uniques, mieux vaut utiliser des id.
Antoine Cailliau a écrit :
Je ne comprends pas ce que le fait de mettre des couleurs différentes pour des mêmes niveau de titre peu apporter. Selon moi, c'est semer le doute dans les habitude. Si je vois deux titres de couleur (ou de soulignement) différent, je suppose qu'il ne sont pas du même niveau.


Antoine je suis d'acord avec toi!
Quand je parle de couleurs différentes cela signifie qu'il y aura une couleurs spécifique pour chaque pages et non plusieurs couleurs de titres pr une meme page.
Sopo a écrit :
Salut

Si les 5 titres doivent avoir des couleurs différentes, il faudra bien les déclarer quelque part. Par contre, tu déclares plusieurs fois les mêmes valeurs, au lieu de ne changer que le nécessaire ! Tu peux déjà alléger en écrivant : 
#main-copy h2 {
   border-bottom-width: 1px;
   border-bottom-style: solid;
}
#main-copy h2.unibet {
   border-bottom-color: #393;
   color: #393;
}
#main-copy h2.sportingbet {
   border-bottom-color: #f00;
   color: #f00;
}



Effectivement c'est un peu mieux,
Thanks!
Smiley confused
mikee a écrit :


Antoine je suis d'acord avec toi!
Quand je parle de couleurs différentes cela signifie qu'il y aura une couleurs spécifique pour chaque pages et non plusieurs couleurs de titres pr une meme page.

Dans ce cas pourquoi ne pas placer un identifiant global dans la balise <body> et ensuite jouer sur l'héritage. 


...
<body id="mapage">
...
<h2>Mon titre</h2>
...
</body>


Et le code CSS suivant

#mapage h2 {
     border-bottom: 2px solid red;
}


Comme ça tu évites d'avoir un nombre incalculable de class.
Sujet clos
Aller à