Espacement intérieur?

Bonjour,

j'aurais besoin d'aide pour un problème somme-toute assez basique...

Voici ma page :
http://www.simpson-tv.fr/index2.php

Je voudrais simplement mettre une marge intérieure dans l'un de mes divs (celui dans lequel il y a du texte) ! Ayant l'habitude de travailler avec des tableaux, j'indique intuitivement dans les propriétés de mon div :

padding-left: -10px; (pour que le texte soit espacé de 10px à gauche du bord gauche mon div par exemple)

Mais cela ne fonctionne pas... Comment faut-il faire?

Merci d'avance.

Remarque : désolé par avance si la solution se trouve déjà dans l'un des tutoriels de ce site (j'en ai pourtant lu une bonne partie)...
Modifié par SlipKo?n (05 Sep 2007 - 20:27)

Oui, mais quand je fais ça, ça "allonge" mon contenant de 10px (au final, le texte n'a pas bougé d'un poil, c'est le contenant qui fait 10px de plus en largeur)... N'y a-t-il pas moyen de faire comme avec les tableaux (l'attribut padding crée une marge intérieur sans altérer la taille du contenant)...??

Bonne nuit (vu l'heure )

Quelques petites modifications s'imposent dans ton code pour que cela fonctionne :

rajout de balises de paragraphe dans ton div :

<div id="content"><p>Restabat
ut Caesar post haec properaret accitus et abstergendae causa
suspicionis sororem suam, eius uxorem, Constantius ad se tandem
desideratam venire multis fictisque blanditiis hortabatur. quae licet
ambigeret metuens saepe cruentum, spe tamen quod eum lenire poterit ut
germanum profecta, cum Bithyniam introisset, in statione quae Caenos
Gallicanos appellatur, absumpta est vi febrium repentina. cuius post
obitum maritus contemplans cecidisse fiduciam qua se fultum
existimabat, anxia cogitatione, quid moliretur haerebat.</p></div>

et modification en conséquence de la css :

#content {
	float:right;
	width:79%;/*si nous laissons 80%, ça ne rentre plus car la bordure prend de la place*/
	text-align:left;
	border-left:dashed;
	border-left-width:1px;
	border-color:#9F5001;
}

#content p{
	padding-left:10px;/*nous appliquons la marge intérieure aux éléments contenus et pas contenants*/
	margin:0;
}

Il ne faut pas oublier que tu as spécifié une taille à ton contenant, le 80%, et si tu veux faire des marges, ce sera toujours à l'extérieur de ce 80%. C'est pour ça qu'il faut taper dans l'élément contenu pour créer tes marges, d'où mon rajout des balises <p>.

Une autre solution :
Si tu ne veux pas rajouter un contenant, il va falloir rogner sur la taille de ton div. Pour plus de facilité, j'ai transformé tes % en px, et donc ton menu 20%=160px et ton content 80%=640px.
J'enleve déjà 1px pour ta bordure = 639px.
puis j'enleve la valeur du padding-left à 10px = 629px.
Ce qui donne dans ton xhtml :

	<div id="content">Restabat
ut Caesar post haec properaret accitus et abstergendae causa
suspicionis sororem suam, eius uxorem, Constantius ad se tandem
desideratam venire multis fictisque blanditiis hortabatur. quae licet
ambigeret metuens saepe cruentum, spe tamen quod eum lenire poterit ut
germanum profecta, cum Bithyniam introisset, in statione quae Caenos
Gallicanos appellatur, absumpta est vi febrium repentina. cuius post
obitum maritus contemplans cecidisse fiduciam qua se fultum
existimabat, anxia cogitatione, quid moliretur haerebat.</div>

Et dans ta css :

#content {
	float:right;
	width:629px;
	text-align:left;
	border-left:dashed;
	border-left-width:1px;
	border-color:#9F5001;
	padding-left:10px;
}

Bon courage
Modifié par buh31 (06 Sep 2007 - 03:24)