img supprime t-elle un style ?

Le
romer
Bonjour,

Voilà un pb. apparemment simple mais que je ne résoud pas :
Titre de menu html :
<div class="titelg gras">Formations</div>

Voilà son style CSS :
div.titelg{font-size:120%; /* fond des titres des menus */
background-color:#00c;}

Ça marche.

Maintenant voilà le titre suivant avec une flèche devant (utile) :

<div class="titelg gras"><img src="images/flbcbas.gif" alt="" align="top
left" />Formations</div>

Et là le style ne marche plus même si j'essaye de faire ce qui suit dans
le CSS :
div.titelg img{font-size:120%; /* fond des titres des menus */
background-color:#00c;}

Donc img gênerait l'application du style. Est-ce normal ?
Si oui comment procéder alors ?

Merci.
--
A+

Romer
Questions / Réponses high-tech
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Patrick 'Zener' Brunet
Le #22065461
Bonjour.

"Bernd" 1iq3iol.1ggqh2w19g1jbqN%
[...]
Et là le style ne marche plus même si j'essaye de faire
ce qui suit dans le CSS :
div.titelg img
{font-size:120%; /* fond des titres des menus */
background-color:#00c;}




Taille de texte + couleur de fond appliquées à une image ?

Sur le alt text s'il n'était pas vide et en l'absence du gif alors...

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe
romer
Le #22065451
Patrick 'Zener' Brunet
"Bernd" 1iq3iol.1ggqh2w19g1jbqN%
> [...]
> Et là le style ne marche plus même si j'essaye de faire
> ce qui suit dans le CSS :
> div.titelg img
> {font-size:120%; /* fond des titres des menus */
> background-color:#00c;}
>

Taille de texte + couleur de fond appliquées à une image ?



Je vois bien l'incongruïté de la chose mais comment faire alors ? Si je
place l'image avant, elle ne se positionne pas au même endroit...
--
A+

Romer
Olivier Miakinen
Le #22065441
Le 08/11/2008 16:57, Bernd a écrit :

Voilà un pb. apparemment simple mais que je ne résoud pas :
Titre de menu html :
<div class="titelg gras">Formations</div>

Voilà son style CSS :
div.titelg{font-size:120%; /* fond des titres des menus */
background-color:#00c;}

Ça marche.



Ok.

Maintenant voilà le titre suivant avec une flèche devant (utile) :

<div class="titelg gras"><img src="images/flbcbas.gif" alt="" align="top
left" />Formations</div>

Et là le style ne marche plus



Je viens d'essayer : chez moi ça marche encore, aussi bien avec
SeaMonkey qu'avec Internet Explorer.

même si j'essaye de faire ce qui suit dans le CSS :
div.titelg img{font-size:120%; /* fond des titres des menus */
background-color:#00c;}



Non, là ça n'a aucune chance de marcher : le texte n'est pas *dans*
l'image, mais *après* l'image.

Donc img gênerait l'application du style. Est-ce normal ?



Non, ce n'est pas normal.

Si oui comment procéder alors ?



Chercher un autre bug que celui que tu crois ? Nous donner une URL pour
constater le phénomène (ce qui devrait d'ailleurs être LA première chose
à faire) ?
romer
Le #22065431
Olivier Miakinen
Je viens d'essayer : chez moi ça marche encore, aussi bien avec
SeaMonkey qu'avec Internet Explorer.



C'est là que je ne comprends plus évidemment - sur 5 PC avec IE6, ça ne
fonctionne pas.

> même si j'essaye de faire ce qui suit dans le CSS :
> div.titelg img{font-size:120%; /* fond des titres des menus */
> background-color:#00c;}

Non, là ça n'a aucune chance de marcher : le texte n'est pas *dans*
l'image, mais *après* l'image.

> Si oui comment procéder alors ?

Chercher un autre bug que celui que tu crois ? Nous donner une URL pour
constater le phénomène (ce qui devrait d'ailleurs être LA première chose
à faire) ?



Finalement et comme je suis un peu charette, j'ai tout refait et ai fait
plus simple et ça marche. Je n'ai pas vérifié sur IE mais comme je me
retrouve avec ...a:hover..., je suis quasiment sûr que ça va
fonctionner.

Merci de vos interventions.
--
A+

Romer
Olivier Miakinen
Le #22065421
Le 08/11/2008 23:07, Bernd a écrit :

Je viens d'essayer : chez moi ça marche encore, aussi bien avec
SeaMonkey qu'avec Internet Explorer.



C'est là que je ne comprends plus évidemment - sur 5 PC avec IE6, ça ne
fonctionne pas.



Je viens de vérifier : c'est IE7 que j'ai sur la machine où je viens de
tester. D'expérience, là où j'ai eu des problèmes avec IE, et à l'époque
il n'existait que le 6, c'était avec les classes multiples (comme dans
class="titelg gras") : parfois ça marchait et parfois ça ne marchait
pas, de façon incompréhensible.

Finalement et comme je suis un peu charette, j'ai tout refait et ai fait
plus simple et ça marche.



Ok.
SAM
Le #22065411
Le 11/8/08 8:33 PM, Bernd a écrit :
Patrick 'Zener' Brunet



Taille de texte + couleur de fond appliquées à une image ?



Je vois bien l'incongruïté de la chose mais comment faire alors ? Si je
place l'image avant, elle ne se positionne pas au même endroit...



au même endroit que quoi ?

Tu n'as qu'à la mettre en background
et mettre un padding-left au texte pour laisser voir l'image

div.titelg {
background: url(fleche.gif) no-repeat left center #00c;
font-size: 120%;
padding-left: 60px;
}

Néanmoins, il n'y a aucune raison que :
div.titelg { font-size: 120%; background: #00c; color: #fff }
div.titelg img { vertical-align: middle; margin-right: 8px }
ne fonctionne pas avec :
IE ou pas IE

testé !
(où l'on voit que IE n'est pas très fortiche avec les images)


à mettre en bouton de barre d'outils persos du navigateur :
et le truc de background, ici :

--
sm
Patrick 'Zener' Brunet
Le #22065401
Bonjour.

"SAM" de news: 4916130e$0$969$
[...]

div.titelg {
background: url(fleche.gif) no-repeat left center #00c;
font-size: 120%;
padding-left: 60px;
}




Tiens, tu as un truc 100% fiable pour faire ça avec un container qui soit un
inline ?
Typiquement pour rajouter une iconette (fournie par la CSS) via un
background-image à un lien au milieu du texte.

Evidemment entre IE et les autres, ça ne se passe pas pareil...

Merci.
--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe
SAM
Le #22065391
Le 11/9/08 11:21 AM, Patrick 'Zener' Brunet a écrit :
Bonjour.



Ciao,

"SAM" de news: 4916130e$0$969$
[...]



div.titelg {
background: url(fleche.gif) no-repeat left center #00c;
font-size: 120%;
padding-left: 60px;
}




Tiens, tu as un truc 100% fiable pour faire ça avec un container qui soit un
inline ?



Là çà fonctionne impec dans un span tant avec IE6 que 7
(et bien sûr tous les autres brouteurs graphiques non IE)

Typiquement pour rajouter une iconette (fournie par la CSS) via un
background-image à un lien au milieu du texte.



Faut pas non plus pousser mèmère dans les orties !

Néanmoins ...

<a href="#">Mon lien (<span class="option">option 1</span>) du jour</a>

yapas d'raison que ça ne fonctionne pas avec une css comme :

.option {
background: url(plus.gif) no-repeat left center #ccc;
font-size: 120%;
padding-left: 40px;
}

Evidemment entre IE et les autres, ça ne se passe pas pareil...



Si, si, ça passe exactement pareil (à vérifier pour IE.5.5).

Merci.



Méderien ;-)

--
sm
contact: http://stephane.moriaux.pagesperso-orange.fr/contact
romer
Le #22065281
SAM
au même endroit que quoi ?



C'est une flèche bitmap placée devant un titre.

Tu n'as qu'à la mettre en background
et mettre un padding-left au texte pour laisser voir l'image

div.titelg {
background: url(fleche.gif) no-repeat left center #00c;
font-size: 120%;
padding-left: 60px;
}



En effet, ainsi ça fonctionne - je n'avais pas pensé à la possibilité du
background avec décalage gauche.

à mettre en bouton de barre d'outils persos du navigateur :
et le truc de background, ici :



Tanx
--
A+

Romer
Patrick 'Zener' Brunet
Le #22065231
Bonjour.

"SAM" de news: 4916c0b6$0$881$
Le 11/9/08 11:21 AM, Patrick 'Zener' Brunet a écrit :
> "SAM" > a écrit dans le message
> de news: 4916130e$0$969$
>> [...]
>
>> div.titelg {
>> background: url(fleche.gif) no-repeat left center #00c;
>> font-size: 120%;
>> padding-left: 60px;
>> }
>>
>
> Tiens, tu as un truc 100% fiable pour faire ça avec
> un container qui soit un inline ?

Là çà fonctionne impec dans un span tant avec IE6 que 7
(et bien sûr tous les autres brouteurs graphiques non IE)

> Typiquement pour rajouter une iconette (fournie par la CSS)
> via un background-image à un lien au milieu du texte.

Faut pas non plus pousser mèmère dans les orties !

Néanmoins ...

<a href="#">Mon lien (<span class="option">option 1</span>)
du jour</a>

yapas d'raison que ça ne fonctionne pas avec une css comme :

.option {
background: url(plus.gif) no-repeat left center #ccc;
font-size: 120%;
padding-left: 40px;
}

> Evidemment entre IE et les autres, ça ne se passe pas pareil...

Si, si, ça passe exactement pareil (à vérifier pour IE.5.5).




Alors j'ai fait un bilan (j'utilise ça sur mes sites pour les liens
"page suivante/page précédente", et aussi pour les iconettes
de lien sortant.

Avec inline et un padding, ça marche bien même sur IE6, par contre sur
IE5.5, le padding est ignoré et l'iconette se trouve sous le texte.
En fait sur IE5.5, inline semble interdire tout ce qui confère une
extra-longueur: width comme padding.

C'est mieux avec inline-block que IE5.5 reconnaît bien, mais qui évidemment
pose d'autres problèmes...

J'ai souvenir qu'au début j'avais même tenté de réserver la place avec un
GIF transparent, mais c'était aussi lourd que dégueu, alors comme c'est
mineur, j'ai laissé tomber pour IE5.5.

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe
Publicité
Poster une réponse
Anonyme