div dans un div

**Shadow69** · 09/06/2007, 21h55

Bonjour,

j'ai toujours fait des table pour mes sites et aujourd'hui je commence a me dire qu'il faudrai arreter et passer aux div, notamment parce que ca commence a être obsolète les tables et ensuite parce qu'au niveau du positionnement on a pas mal de possibilités.

Cependant j'aurrai besoin de votre aide, j'ai fais mes div pour ce qui est de mon header et de mon footer, et je désire maintenant réaliser la partie centrale de mon site, décomposée elle meme en deux partie verticale, une ou il y aurra le contenu et une a droite ou je mettrai des blocs (pub, syndications, lecteur multimedia... etc)

pour cela je fais le code suivant, (ma zone content ne servant ici qu'a définir un arriere plan, ma zone contenu etant le contenu principal, et la zone de droite pour les blocs):

je voudrai que mes zones contenu et partie-droite soient comme "ancrés a la zone de content, que la hauteur des deux div soit toujours la meme peu importe le contenu qu'il ya dedans, et que les deux divs dans la partie content dépasse pas graphiquement la hauteur de celle ci (voir shéma)

Voici l'extrait de ma feuille de style actuelle

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
 
#content
{
	position: relative;
	min-height: 100px;
	width: 990px;
	background-color: #000000;
	border-bottom: #FFFFFF 1px solid;
	border-left: #FFFFFF 1px solid;
	border-right: #FFFFFF 1px solid;
	overflow: hidden;
}
 
#contenu
{
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	min-height: 300px;
	width: 690px;
	background-color: #3a3a3a;
	border-right: #cacaca 1px solid;
	padding: 3px 3px 3px 3px;
}
 
#partie-droite
{
	background-color: #1e1e1e;
	border-left: #cacaca 1px solid;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	min-height: 300px;
	width: 285px;
	padding: 3px 3px 3px 3px;
 
}

ainsi que mon code

Code :

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

1
2
3
4
5
6
7
8
 
<div id="content">
 <div id="contenu">
 <asp:ContentPlaceHolder ID="SiteContentPlaceHolder" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 <div id="partie-droite"></div>
</div>

**blueice** · 10/06/2007, 11h21

Comme ca :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Modèle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: gray;
}
#conteneur {
position: relative;
width: 750px;
margin: 0 auto; 
background-color:red;
}
#centre {
background-color:orange;
margin-right: 200px;
}
#droite {
position: absolute;
right:0;
width: 200px;
}
#pied {
height: 30px;
background-color: gray;
}
 
.menudroite {
list-style-type: none;
margin: 0;
padding:0;
}
.menudroite li {
margin-bottom: 5px;
}
.menudroite a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroite a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style>
</head>
 
<body>
 
<div id="conteneur">
 
	  <div id="header">header de largeur fixe : 750px
 
</div>
 
	  <div id="droite"><p>menu</p>
	  <p>largeur fixe : 200px</p>
		<ul class="menudroite">
		<li><a href="">Menu 1</a></li>
		<li><a href="">Menu 2</a></li>
		<li><a href="">Menu 3</a></li>
		<li><a href="">Menu 4</a></li>
		</ul>
	  </div>
 
	  <div id="centre">
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
 
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	</div>
 
 
	  <div id="pied">pied de page de largeur fixe : 750px </div>
</div>
 
 
</body>
</html>

div dans un div

HTML

Vue hybride

Discussions similaires

Partager

Partager