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

**Nullette** · 30 Juin 2009

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;

}

Dudu · 30 Juin 2009

Salut Nullette

En modifiant la valeur du padding (plus précisément le padding-left), ça devrait changer quelque chose

**Nullette** · 30 Juin 2009

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.

Noaric · 30 Juin 2009

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>

Dudu · 30 Juin 2009

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 )

dragondz · 30 Juin 2009

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

**Nullette** · 30 Juin 2009

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

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.

PotatoesJunky · 30 Juin 2009

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.

**Nullette** · 30 Juin 2009

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é ?

**captain_torche** · 30 Juin 2009

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 ?

**Nullette** · 30 Juin 2009

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

**captain_torche** · 30 Juin 2009

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

Noaric · 30 Juin 2009

Cite est une balise de type inline, concrètement ça ne réagira pas pareil au niveau des retours à la ligne (entre autres ) ...

**Nullette** · 30 Juin 2009

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"

**captain_torche** · 30 Juin 2009

Dans ce cas, il faut utiliser blockquote.

**Nullette** · 30 Juin 2009

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.

**Nullette** · 14 Août 2009

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

Connexion

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

Sujets conseillés

Nullette

Dudu

Nullette

Noaric

Dudu

dragondz

Nullette

PotatoesJunky

Nullette

captain_torche

Nullette

captain_torche

Noaric

Nullette

captain_torche

Nullette

Nullette

Veuillez vous connecter pour commenter

Parcourir

Activité