padding ne marche pas dans div absolute ?

**ml1234** · 25/05/2009, 16h37

bonjour,
mon wrapper 960x810 est relatif, maincontent 960x445, ainsi que header, nav bar et footer sont absolus et j'ai trois lignes de texte dans maincontent que je souhaite décaller de 20px vers la droite et 10px vers le bas. padding dans maincontent qui a toujours marché dans les div ne marche pas avec div absolu et le maincontent sort du wrapper et pourtant un padding c'est intérieur !? header et footer sont aussi en absolu.

pour résoudre cela j'ai ajouté un padding dans <p> et <h1> et cela semble fonctionner. c'est la bonne méthode ?

j'ai aussi une classe de texte pour laquelle le padding ne change rien du tout par rapport à <h1> et <p>. pourquoi ?

merci d'avance
Marc

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
#wrapper {
	background-color: #000000;
	text-align: left;
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border: 3px solid red;
	position: relative;
	height: 810px;
}
 
#maincontent {
	background-color: #999999;
	line-height: 1.5;
	border: 1px solid black;
	height: 445px;
	width: 960px;
	position: absolute;
	left: 0px;
	top: 297px;
	right: 0px;
	bottom: 0px;
	padding-left: 25px;
}
 
.maincontent_text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #0467CD;
	padding: 0px;
	margin: 0px;
}
 
 
#maincontent h1 {
	font-variant: small-caps;
	color: #00FFFF;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
}
 
#maincontent p {
	font-variant: small-caps;
	color: #0000FF;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 100px;
}
 
<body>
 
<div id="wrapper">
 
<div id="maincontent">
 
  	<h1>Main content</h1>
 
      	<p>Ligne 1</p>
      	<p>Ligne 2</p>
      	<p>Ligne 3</p>
 
        <span class="maincontent_text">mon texte</span>
 
</div>  <!-- end of maincontent -->
 
</div>

**ml1234** · 25/05/2009, 18h36

je pense que ce sont mes width de chaque div qui posent problème.
j'ai seulement gardé le width du wrapper et les padding semblent fonctionner.
je viens de cosntater que j'ai le même souci avec les height fixes.

quand on travaille en absolute ou en float et qu'on sait qu'on aura un flash swf de H=300 dans header, un menu avec des boutons de H=30px,... n'est-il pas conseillé de spécifier la hauteur ?

merci

**desert** · 25/05/2009, 18h41

Bonjour,
Le padding marche très bien. Le comportement de #maincontent qui sort de son parent #wrap est tout à fait normal car position absolue + largeur plus grande que le parent = débordement.

Le mieux serait déjà de ne pas utiliser de position absolute dont l'utilisation ici n'est guère nécessaire.
Si tu ajoutes un padding, tu vas devoir retirer de la largeur car width + padding = 985px au lieu des 960px désirés.

Pour le padding sur le span, effectivement, cela ne marche pas. Cette balise est de type inline et n'a donc pas le même comportement qu'un élément de type block (div, p, form, etc...). Son but premier, c'est d'embellir du texte.
Si tu veux que ton span réagisse comme un div ou un p, tu lui ajoutes la propriété display:block. Dans ton cas, j'aurais plutôt utilité une balise p qui me paraît plus judicieuse.

**ml1234** · 25/05/2009, 20h42

merci beaucoup,

je vais essayer de passer tout en float.
sinon, avant de cloturer le sujet, dans cet exemple avec des absolute,
j'ai remplacé mon span footer par un div et le bkg-color du footer ne s'étend pas sur les 900px mais se limite au texte. pourquoi ?
cela m'arrive souvent quand je fais un div avec une couleur de fond que cette couleur ne s'étende pas au reste du div

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
#footer {
	background-color: #CCCCCC;
	text-align: center;
	margin: 0px;
	height: 100px;
	left: 0px;
	top: 749px;
	padding-top: 50px;
	padding-left: 0px;
	position: absolute;
}
 
 
.footer_text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #0467CD;
	padding: 0px;
	margin: 0px;
	background-color: #99CC00;
}
 
<div id="footer">
    <hr />
    <div class="footer_text">mon texte</div>
    <p>Footer</p>
</div>  <!-- end of footer -->

merci

**12monkeys** · 25/05/2009, 20h56

Bonsoir

Je ne vois pas exactement de quoi tu parles : vu que je ne vois pas de height 900px dans ton code...

C'est quel élément qui as une couleur qui ne s'étend pas dans sa hauteur ? #footer ou .footer_text ?

**Macmillenium** · 25/05/2009, 21h08

Bonsoir,

Envoyé par desert

Pour le padding sur le span, effectivement, cela ne marche pas. Cette balise est de type inline et n'a donc pas le même comportement qu'un élément de type block (div, p, form, etc...). Son but premier, c'est d'embellir du texte.

padding fonctionne correctement sur les éléments de rendu inline, c'est plutôt margin qui ne pourrait être attribuer qu'aux éléments de rendu block et inline remplacés (input, img etc.)

Envoyé par ml1234

j'ai aussi une classe de texte pour laquelle le padding ne change rien du tout par rapport à <h1> et <p>. pourquoi ?

Ta question n'est pas claire.

Envoyé par ml1234

j'ai remplacé mon span footer par un div et le bkg-color du footer ne s'étend pas sur les 900px mais se limite au texte. pourquoi ?

Un élément positionné en absolute s'adapte à la taille de son contenu et non pas son conteneur, il faudrait rajouter un width:100% à ton footer.

**ml1234** · 25/05/2009, 21h38

merci à tous
je ne connaissais pas le width de 100%, c'est super.
j'avais aussi fait une barre de menu horizontale avec des li et mon bkg (repeat) n'allait pas jusqu'au bout, width=100% marche aussi.
deux problèmes résolus en même temps, chouette.
je marque le sujet comme résolu sinon je vais encore me faire tirer les oreilles -)

marc

**Macmillenium** · 25/05/2009, 21h47

Envoyé par ml1234

je marque le sujet comme résolu sinon je vais encore me faire tirer les oreilles -)

Je ne suis pas sûr que tu sois sur la bonne voie ...
Un peu de lecture pour mieux comprendre le principe.

**desert** · 26/05/2009, 10h22

Envoyé par Macmillenium

padding fonctionne correctement sur les éléments de rendu inline, c'est plutôt margin qui ne pourrait être attribuer qu'aux éléments de rendu block et inline remplacés (input, img etc.)

Ouep. Au temps pour moi, seuls les paddins horizontaux fonctionnent.
Merci de la rectification.