Aller au contenu

Css - Position d'une petite image par rapport au texte


Nullette

Sujets conseillés

Bonjour,

je n'arrive pas à positionner l'image par rapport au texte. Je voudrais qu'il y ait un espace entre l'image et le texte.

L'image est une "guillemet" et elle est trop collée au texte.

J'ai essayé plusieurs background-position, mais, il doit y avoir autre chose ....

Voici le code

.post_text
{
padding : 5px;
margin : 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e0e0e0;
color: #808080;
background-color: #ffffff;
background-image: url(images/quote.gif);
background-repeat: no-repeat;
background-position: left top;

}

Lien vers le commentaire
Partager sur d’autres sites

Salut Dudu,

j'ai mis padding-left : 5px;

à la place de padding : 5px;

Ca ne change absolument rien.

J'ai beau lire toutes les explications sur le net concernant les padding et margin, background-position .....

je n'y comprends rien.

L'image fait 15 x14 px.

J'ai augmenté padding à 10px .. c'est mieux.

L'image est au dessus du texte, il faudrait un peu d'espace horizontal, à droite de l'image pour le texte.

En fait ce que je voudrais est un texte cité avec une guillemet en haut à gauche.

Lien vers le commentaire
Partager sur d’autres sites

Salut,

pour moi ça marche en faisant comme ça (j'ai mis 35 mais c'est à modifier suivant la taille de l'image) :

<html>
<head>
<style type="text/css">
<!--
.post_text{
padding : 5px 5px 5px 35px;
margin : 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e0e0e0;
color: #808080;
background-color: #ffffff;
background-image: url(quote.gif);
background-repeat: no-repeat;
background-position: left top;
}

-->
</style>

</head>


<body>

<p class="post_text">
text
</p>

Lien vers le commentaire
Partager sur d’autres sites

Salut Dudu,

j'ai mis padding-left : 5px;

à la place de padding : 5px;

Ca ne change absolument rien.

C'est parfaitement normal ! :)

"padding: 5px" signifie "marge de 5 px en haut en bas à gauche à droite"

"padding-left: 5px" signifie "marge de 5 px à gauche"

Donc dans les deux cas, la marge à gauche reste de 5 px, et c'est justement cette valeur-là qui semble trop petite, et qui donne l'impression que le "guillemet" est collé au texte.

L'image fait 15 x14 px.

J'ai augmenté padding à 10px .. c'est mieux.

L'image est au dessus du texte, il faudrait un peu d'espace horizontal, à droite de l'image pour le texte.

En fait ce que je voudrais est un texte cité avec une guillemet en haut à gauche.

Attention quand tu augmentes le padding à 10px, car si tu écris "padding: 10px" cela signifie que TOUTES les marges passent à 10 px (haut, bas, gauche, droite).

Si l'image fait 15px de large, il faut une marge gauche d'au moins cette valeur, plus "un peu d'espace horizontal" soit à peu près 5 px.

Donc, un padding-left de 20px.

Si à droite, en haut, et en bas, tu n'as besoin que de 5 px, il ne faudra changer que la marge gauche.

Donc padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 20px;

Que tu peux raccourcir comme ceci: "padding : 5px 5px 5px 20px;" (quand tu mets 4 valeurs, c'est haut, droite, bas, gauche; dans le sens des aiguilles d'une montre ;))

Lien vers le commentaire
Partager sur d’autres sites

Merci Noaric et merci Dudu.

Maintenant je peux montrer de belles citations :)

Je vais sauvegarder tes explications. Je les connais, mais, à chaque fois je m'emmêle dans les margin et padding et je manque de patience.

Je n'ai pas l'esprit ... mathématique ni logique :)

et surtout n'oublie pas de mettre padding-left: 20px après ton padding de 10px :smartass:

Oups, que se passe-t-il ?

Je dois ajouter encore un padding ?

Mon code actuel est comme celui présenté par Noaric, avec le dernier padding à 20px au lieu de

35px.

Lien vers le commentaire
Partager sur d’autres sites

Non, pas besoin de rajouter un padding supplémentaire, ce serait redondant et seul l'un des deux serait pris en compte.

En gros, si tu veux toutes les marges à 10px + une marge gauche à 20px, tu tapes simplement :

padding: 10px 10px 10px 20px;

Au passage (ça peut toujours servir), l'ordre des marges pour padding ou margin : haut droite bas gauche.

Lien vers le commentaire
Partager sur d’autres sites

Merci encore.

(PotatoesJunky, ils sont beaux tes logos !).

Puisque nous sommes en pleine conversation pour mon petit problème, maintenant résolu, je me pose une autre question :

j'utiliserai cette class pour certaines citations, il n'y aura donc pas la balise <cite>, est-ce gênant pour l'accessibilité ?

Lien vers le commentaire
Partager sur d’autres sites

Ca ne devrait pas trop nuire à l'accessibilité (je ne sais pas comment les synthétiseurs vocaux se comportent avec la balise cite), mais tu molestes la sémantique ;)

Tu ne PEUX pas utiliser cette balise avec ton système, ou tu n'avais simplement pas pensé à l'utiliser ?

Lien vers le commentaire
Partager sur d’autres sites

J'utilise régulièrement la balise <cite>.

Avec le code objet de ma question, j'ai voulu rendre certaines citations plus jolies.

Je viens d'essayer :

<p class="post_text"><cite>blabla</cite></p>

Ca fonctionne, mais je n'ai pas encore vérifié avec W3

Lien vers le commentaire
Partager sur d’autres sites

Et pourquoi pas appliquer le CSS directement sur la balise cite ?

Parce que cela ne conviendrait pas à toutes les citations (j'en ai beaucoup, sur plusieurs pages).

La plupart des citations s'intègrent dans le texte, alors qu'avec la nouvelle class il y a les paddings et la petite image.

La page est valide en XHTML, en css elle n'est pas complètement valide à cause d'un "radius"

Lien vers le commentaire
Partager sur d’autres sites

Je n'utilise presque plus blockquote (il figure sur ma feuille de style css), parce que j'avais lu, je ne sais plus où que quand il y a des blockquote on ne peut plus diminuer la taille de la fenêtre (je crois). Enfin, je me souviens que cela peut créer un problème pour certains utilisateurs.

Lien vers le commentaire
Partager sur d’autres sites

  • 1 month later...

Salut ,

est-ce qu'un modérateur pourrait supprimer le lien ?

La page ne sera pas mise en ligne, contrairement à ce qui était prévu.

Le lien me crée des erreurs 404.

Merci et ... excusez-moi :)

Merci Olitax :)

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...