Discussion :

[noobyyy]

bonjour,

j'aimerai avoir au mileu de ma page une surface noir. Elle part de tout en haut pour finir tout en bas. sauf ! que la surface utilisé par un div ne va pas tout en bas comment faire ?

exemple: cliquez ici

voici ma feuille css:

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
 
body {  
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 11pt; 
	line-height: 14px; 
	color: #504d46; 
	background: url(bg.gif) top center;
	margin-top: 0px;
	margin-bottom: 0px;
}
 
span#titre {
	font-weight: bold;
	font-variant: small-caps;
	font-size: 10pt;
	color: #FCF8A8;
}
 
span.color {
	font-size: 15pt;
	color: #FF8400;
	font-weight: bold;
	font-variant: small-caps;	
}
 
div.desc:first-letter {
	font-weight: bold;
	font-variant: small-caps;
	font-size: 14pt;
	color: #FCF8A8;
}
 
div.desc {
	font-weight: bold;
	font-variant: small-caps;
	font-size: 10pt;
	text-indent: 10px;
	text-align: justify;
	margin-left: 20px;
	margin-right: 20px;
}
 
 
/***box*******************************************/
.bg-left { background:url(bg-left.png) left repeat-y;}
.bg-right { background:url(bg-right.png) right repeat-y; overflow:hidden; padding:0px 16px 0px 16px;}
.bg-cont { background-color: #000000;}
 
.border-left {background:url(border-left.gif) repeat-y left #000000;}
.border-right {background:url(border-right.gif) repeat-y right;}
.border-top {background:url(border-top.gif) repeat-x top;}
.border-bot {background:url(border-bot.gif) repeat-x bottom;}
.corner-top-left {background:url(corner-top-left.gif) no-repeat left top;}
.corner-top-right {background:url(corner-top-right.gif) no-repeat right top;}
.corner-bot-left {background:url(corner-bot-left.gif) no-repeat left bottom;}
.corner-bot-right {background:url(corner-bot-right.gif) no-repeat right bottom;}
 
.content { height: 100%; width:100%; background-color: black;}
 
.min-width {width:900px; background:url(bg-top.gif) top center repeat-x}
.main {width:827px; margin:0 auto; overflow:hidden; position:relative; background:url(bg-top.jpg) top left no-repeat;}

code xhtml:

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
 
echo	
    '<div class="min-width">'."\n".
    	'<div class="main">'."\n".
        	'<div class="bg-left png">'."\n".
            	'<div class="bg-right png">'."\n".
                	'<div class="bg-cont">'."\n".
 
					'<br />saut de ligne test<br />'."\n".
					'<br />saut de ligne test<br />'."\n".
					'<br />saut de ligne test<br />'."\n".
					'<br />saut de ligne test<br />'."\n".
					'<br />saut de ligne test<br />'."\n".
					'<br />saut de ligne test<br />'."\n".
					'<br />saut de ligne test<br />'."\n".
					'<br />saut de ligne test<br />'."\n".
					'<br />saut de ligne test<br />'."\n".
 
 
					'</div>'."\n".
				'</div>'."\n".
			'</div>'."\n".
		'</div>'."\n".
	'</div>'."\n";

[sebhm]

Bonjour,

c'est normal car la hauteur de ton DIV noir est plus petite que la hauteur de ta page.
Tu peux appliquer une hauteur à ton DIV (mais je suis pas fan de cela)
Tu pourrais avoir un DIV 'conteneur' qui contiendrait toute ta page, mais qui serait différent de body et donc qui ne prendrait pas forcément toute la hauteur de ta page si le texte est court. Tu appliquerais alors ton background à ce conteneur.

[noobyyy]

moi je veux bien utiliser un div pour mettre tout en noir et que sa se fasse de haut en bas mais ensuite il faudrait que je mette nouveau div a l'intérieur pour utiliser mon texte mais je ne comprends pas comment faire ceci.

[sebhm]

désolé mais je n'ai pas compris ton dernier post

[noobyyy]

je veux dire que pour faire mon truc je crée un div en le nommant par exemple test1 et dans ses propriétés je lui affecte le fond noir. Puis a l'intérieur de ce fond noir je vais recréer un div pour pouvoir faire mon texte. Mais comme je n'ai pas coder la partie noir je suis un peu perdu tu comprends ?

[sebhm]

et si tu ne faisais qu'un seul DIV avec fond noir et du texte ?
tu utilises le padding pour centrer ton texte.

[Macmillenium]

Bonjour,

j'aimerai avoir au mileu de ma page une surface noir. Elle part de tout en haut pour finir tout en bas. sauf ! que la surface utilisé par un div ne va pas tout en bas comment faire ?

Il faudrait que cette DIV soit un enfant direct de BODY, c-à-d :

Code html :

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

1
2
3
4
 
<body>
<div class="tadiv">
...

Ensuite, il suffit d'attribuer un height:100% aux éléments racines HTML et BOYD et un min-height:100% à ta DIV.
FAQ : Comment positionner un footer en bas de page ?
FAQ : Comment fonctionne la hauteur en pourcentage ?

[sebhm]

j'ai une barre de scroll qui apparait...

parce que la faq dit

Code :

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

1
2
min-height : 100%;
padding-bottom : 50px; /* padding-bottom = hauteur du footer */

du coup, ca fait plus que 100%
et je n'arrive pas à faire un truc du genre

Code :

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

1
2
min-height : 95%;
padding-bottom : 5%; /* padding-bottom = hauteur du footer */

[Macmillenium]

On peut attribuer le padding-bottom à une autre DIV :

Code css :

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
 
html, body {
	margin : 0;
	padding : 0;
	height : 100%;
}
 
#conteneur {
	position : relative; /* référent du footer */
	min-height : 100%;
	background : green;
}
 
#contenu {
	padding-bottom : 50px; /* padding-bottom = hauteur du footer */
}
 
#footer {
	position : absolute;
	width : 100%; /* obligatoire si le footer n'a pas de taille fixe */
	height : 50px; /** hauteur attribuée en tant que padding-bottom pour le conteneur */
	bottom : 0; /* positionner le footer tout en bas **/
	left : 0; /* positionner le footer à gauche **/
	background : red;
}

Code html :

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

1
2
3
4
5
6
7
8
9
 
<div id="conteneur">
	<div id="contenu">
		Conteneur
		<div id="footer">
			Footer en bas de page.
		</div>
	</div>
</div>

[ÉDIT] Ajouté à la FAQ