Discussion :

[solorac]

Bonjour la Communauté,

Je n'arrive pas à mettre une marge à droite afin que mon texte n'aille pas sur la bordure de mon image.

Voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="gauche">Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.
 
</div>

Et le css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#gauche{
float:left;
margin-top:150px;
font-size:10px;
background:url(../images/visiteurs/b4.png) no-repeat;
padding-top:35px;
width:280px;
 
}

Merci pour votre aide.

[Doksuri]

a vue de nez, je dirai qu'il te manques des padding (padding-left, padding-right)

[solorac]

Bonjour la Communauté,

Je n'arrive pas a arrêter mon texte avant la fin de mon image, meme si je mets un padding-right.

Quelle instruction dois-je ajouter que mon texte lorem ipsim s'arrête à 3 pixels de la fin de mon image qui fait 280pixels?

Voici mon code html puis le css concerné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="gauche">Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.
 
</div>

Merci pour votre aide

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#gauche{
float:left;
margin-top:130px;
font-size:12px;
background:url(../images/visiteurs/b4.png) no-repeat;
padding-top:35px;
padding-right:10px;
width:280px;
}

[Ecared]

Salut, étant donné qu je n'ai pas accès à ton image j'ai mis un background-color sur ta div et le texte est bien placé, ton problème provient surement de la taille de ton image et non du texte je te conseille de regarder tout les propriétés allant avec background (size, position, ...)

[Invité]

Bonjour,

Par défaut, le padding s'additionne au width -> Le modèle de boîte CSS
Donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#gauche{
...
   padding:10px;
   width:260px; /*(260 + 2x10) = 280 */
}

Pour éviter ce type de "calcul", on définit box-sizing à border-box :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

* { margin:0; padding:0; border:0; font-size:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

Auquel cas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#gauche{
...
   padding:10px;
   width:280px;
}

[Invité]

Bonjour,

Merci de NE PAS poster des discussions EN DOUBLE (dans différents forums) !!
ca ne sert à rien !

-> les 2 discussions ont été fusionnées.