Div imbriqués ayant la même largeur

**Erakis** · 09/12/2009, 00h18

Bonjour à tous,

J'ai un div qui contient tout le contenu de ma page. À l'intérieur de ce div, j'ai ajouté un autre div pour l'en-tête et un autre pour le contenu.

Toutefois, lorsque la largeur du contenu dépasse la largeur de ma fenêtre, j'ai un problème :

Style

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
 :
body 
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color :#ffffff;
}
 
div.pageAllContent
{
	width :100%;
}
 
div.pageAllContent div.pageHeader
{
	background-color :#000000;
	border-bottom : solid 1px #000000;
	height :70px;
	width :100%;
}
 
div.pageAllContent div.pageMiddleContent
{
	width :100%;
	padding :0px 10px 0px 10px;	
}

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
        <div class="pageAllContent">
            <div class="pageHeader">
 
            </div>
 
            <div class="pageMiddleContent">
              <!-- Ici placer une table qui sera plus large que fenêtre -->
            </div>
        </div>

Avec ce bout de code, le noir de mon header s'arrête avec la largeur de la fenêtre au lieu de s'arrêter avec la largeur de son contenu.

J'ai essayé toute sorte de propriétés CSS (margin, overflow, etc...) mais je n'ai rien trouvé

Merci pour votre aide.

**CCyrillus** · 09/12/2009, 01h16

Bonjour,

le width:100%; correspond a la largeur de ta fenêtre , a part IE6 , les autres navigateurs gardent cette largeur de fenetre comme référence.

Pour que tes fonds s'étalent au dela du viewport (fenêtre) il faut leur donné un comportement de 'tableau' et modifier le contexte de formatage pour IE7 via les commentaires conditionnels.
exemple :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01, buzz l'eclair</title>
<style type='text/css'>
div.pageAllContent
{
 
width :100%;
 
display:table;
}
 
div.pageAllContent div.pageHeader
{
	background-color :#000000;
	border-bottom : solid 1px #000000;
	height :70px;
	width :100%;color:white
}
 
div.pageAllContent div.pageMiddleContent
{
	width :100%;
	padding :0px 10px 0px 10px;	
}
</style>
<!--[if lte ie 7]>
<style type='text/css'>
div.pageAllContent
{
width:auto!important;/*ie7*/	
width :100%;
min-width:100%;
display:inline;
zoom:1;}
</style>
<![endif]-->
</head>
<body>
       <div class="pageAllContent">
            <div class="pageHeader">
                ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
            </div>
 
            <div class="pageMiddleContent">
              <!-- Ici placer une table qui sera plus large que fenêtre -->
            </div>
        </div>
</body>
</html>

GC

**Erakis** · 09/12/2009, 01h30

Merci, j'avais déjà essayé la propriété CSS display :table. Cela règle le problème mais qu'à moitié.

Testez ce bout de code et vous verrez que complètement à la droite de la fenêtre (lorsqu'on scroll), le noir ne s'étend pas jusqu'au BOUT. Il reste une dizaine de pixels vacante.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test de DIVs imbriqués</title>
<style type='text/css'>
body 
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color :#ffffff;
}
 
div.pageAllContent
{
    width :100%;
    display:table;
}
 
div.pageAllContent div.pageHeader
{
	background-color :#000000;
	border-bottom : solid 1px #000000;
	height :70px;
	width :100%;
	color :white;
}
 
div.pageAllContent div.pageMiddleContent
{
	width :100%;
	padding :0px 10px 0px 10px;	
	font-size :60px;
}
</style>
<!--[if lte ie 7]>
<style type='text/css'>
div.pageAllContent
{
width:auto!important;/*ie7*/	
width :100%;
min-width:100%;
display:inline;
zoom:1;}
</style>
<![endif]-->
</head>
<body>
       <div class="pageAllContent">
            <div class="pageHeader">
                 Titre de la page                
            </div>
 
            <div class="pageMiddleContent">
              ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
            </div>
        </div>
</body>
</html>

**CCyrillus** · 09/12/2009, 01h33

oki , et avec un reset a 0 des marges internes et externes sur html et body ?

<edit> et j'oublié aussi le border-collapse:collapse;

qui va probablement de pair avec le display:table;

re edit . le fautif :
width :100%;
padding :0px 10px 0px 10px;

**Erakis** · 09/12/2009, 01h42

J'ai trouvé la solution

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test de divs imbriqués</title>
<style type='text/css'>
body 
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color :#ffffff;
}
 
div.pageAllContent
{
    width :100%;
    display :table;
}
 
div.pageAllContent div.pageHeader
{
	background-color :#000000;
	border-bottom : solid 1px #000000;
	height :70px;
	width :100%;
	color :white;
	display: table-row; /* CORRECTION */
}
 
div.pageAllContent div.pageMiddleContent
{
	width :100%;
	padding :0px 10px 0px 10px;	
	font-size :60px;
	display: table-row; /* CORRECTION */
}
</style>
<!--[if lte ie 7]>
<style type='text/css'>
div.pageAllContent
{
width:auto!important;/*ie7*/	
width :100%;
min-width:100%;
display:inline;
zoom:1;}
</style>
<![endif]-->
</head>
<body>
       <div class="pageAllContent">
            <div class="pageHeader">
                 Titre de la page                
            </div>
 
            <div class="pageMiddleContent">
              ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
            </div>
        </div>
</body>
</html>

Il fallait utiliser "display: table-row;" dans les div imbriqués au pageAllContent.

Il est grand temps que je m'achète un livre sur le CSS. J'en fait pas assez souvent et je perd trop de temps lorsque je dois m'y remettre.

Avez-vous un bon livre à me conseiller ? J'ai pensé à celui-ci http://www.apress.com/book/view/1590598040. Certes, il n'est pas récent, mais il n'est pas cher et j'aime bien cette série.

À moins que vous ayez beaucoup mieux à me conseiller ? En fait, la seule chose qui me fait hésiter de ce livre, c'est le fait qu'il ne soit pas en couleur.

**CCyrillus** · 09/12/2009, 01h50

Table-row n'est peut-etre pas la meilleur solution.

width:100% + les padding latéraux s'ajoute .
Le width n'est pas franchement necessaire.

Désolé , rien a te proposer ou a critiquer comme lecture , je n'en n'ai pas .

D'autres ici sauront te conseiller.

GC

Div imbriqués ayant la même largeur

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager