Aller au contenu

image en background / classe css


javelot

Sujets conseillés

Bonjour,

J'une classe .en {

background-image:url(../images/en.png);

background-repeat:no-repeat;

margin-left:0;

}

Je voudrais que l'image s'affiche à gauche de la cellule et le texte juste à droite de l'image. Faut-il 2 classes ?

Et je voudrais voir l'équivalent d'un alt="Texte alternatif".

Comment faire ?

Lien vers le commentaire
Partager sur d’autres sites

Si j'ai bien compris, tu veux une image d'arrière-plan à gauche de ton texte, un peu comme la puce d'une liste. Dans ce cas, joue sur le padding-left de ton contenu, et utilise la propriété background-position: center left; pour placer ton image dans l'espace réservé par le padding-left en question (center est l'alignement vertical, left est l'alignement horizontal. voir http://www.yoyodesign.org/doc/w3c/css2/col...ground-position -en français-)

Soit approximativement pour une image de 20px de large et un espace de 5px pour le séparer du texte:

{
background-image:url(../images/en.png);
background-repeat:no-repeat;
margin-left:0;
background-position: center left;
padding-left: 25px; /* 20px d'image + 5px d'espace*/
}

D'autre part, les images de background CSS ne peuvent pas avoir d'équivalent textuel, à la différence des images "en dur" dans le HTML.

D'après le nom de ton image dans ton exemple de code, il s'agit peut-être d'ajouter un drapeau représentant la langue (en pour anglais) ? Auquel cas, un marqueur "en dur" du type <img scr="en.png" alt="en anglais"> sera la solution la plus accessible.

Lien vers le commentaire
Partager sur d’autres sites

Merci.

Tu as bien deviné l'utilisation de mon image. Quel génie ! Par contre, l'image fait 45px et pas 20. On ne peut pas tout deviner ;)

Plus sérieusement, pas de solution pour le texte 'alt' en css ?

Ca me pose un problème, je ne veux pas mettre l'image en dur. Je trouve plus logique de mettre ça en css.

Lien vers le commentaire
Partager sur d’autres sites

Si tu donnes une information comme c'est le cas d'un drapeau il me semble plus logique de le mettre en dur puisque tu donnes du sens et pas seulement de la décoration.

Oui. Et en même temps, la manière de donner cette information peut être considérée comme de la présentation. Enfin, je pinaille un peu.

De toute façon, je vais mettre l'image en dur puisque c'est la seule manière.

Merci des infos.

Lien vers le commentaire
Partager sur d’autres sites

Excusez-moi, mais comme je n'ai jamais cette uri sous la main, je vais prendre une petite liberté et me permettre un Monîîîque ? Help !

Pourrais-tu nous rappeler, s'il te plaît, l'uri de ce post de K. Dubost (lagrange.net) sur les petits drapeaux et les hreflang, qui semble tout à fait à propos ?

(l'uri en question a été citée très récemment sur un fil de ce forum par notre indispensable administratrice. Chapeaux bas, messieurs, devant celle-ci, et ses signets imparables bien plus rigoureusement organisés que les nôtres !).

Lien vers le commentaire
Partager sur d’autres sites

D'habitude je met juste ceci:

a[hreflang]:after {content:" ["attr(hreflang)"]"; color: #000; font-weight: normal;}

Dans l'article de lagrange si j'ai bien compris c'est qu'il faut prévoir le cas de toutes les langues ? Et donc d'avoir un petit drapeau adapté à chacun.

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

(l'uri en question a été citée très récemment sur un fil de ce forum par notre indispensable administratrice.

<{POST_SNAPBACK}>

Il faut rendre à César... c'est notre tout aussi indispensable ElMoustiko qui avait cité cet article de Karl :D

Et les signets d'Igor semblent très bien organisés aussi puisqu'il nous a rappelé le lien en question :up:

Pour me racheter, voilà la discussion que tu évoques Laurent : Attribut hreflang, pour les liens

Igor, le problème des drapeaux c'est qu'ils représentent un pays et non une langue.

De nombreux pays ont plusieurs langues officielles : Belgique (français, néerlandais, allemand), Suisse (français, allemand, italien), Canada (français, anglais)... quel drapeau choisir ?

Lien vers le commentaire
Partager sur d’autres sites

Igor, le problème des drapeaux c'est qu'ils représentent un pays et non une langue.

De nombreux pays ont plusieurs langues officielles : Belgique (français, néerlandais, allemand), Suisse (français, allemand, italien), Canada (français, anglais)... quel drapeau choisir ?

C'est bien ce qui est gênant de mon point de vue, mais personnellement je renseigne systématiquement les langues non-francophones et n'utilise pas les drapeaux. Pour cause je viens seulement de lire cet article sur lagrange puis la discussion sur ce forum.

ps: pour les bookmarks c'est pas de l'organisation, c'est un coup de bol, j'avais marqué ce lien il ya quelques semaines pour une lecture plus tard et là j'y ai seulement repensé.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...