Création d'un bloc en divs.

**Kanapesh** · 08/01/2009, 10h34

Bonjour bonjour !

Aujourd'hui je me suis mis au défi de créer un bloc en divs ajustable en hauteur et en largeur.
Malheureusement (comme d'hab

) je me heurte à un problème que je retourne dans tous les sens mais que je n'arrive pas a résoudre, mes bords gauche et droit ne réagissent pas du tout comme je le voudrais, c'est à dire comme des bords , en fermant de haut en bas les cotés de mon cadre.

Le bloc/cadre est composé de 9divs + 1 qui englobe les autres , voici le code:

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
<html>
<head>
<link type="text/css" rel="stylesheet" title="cadre" href="cadre.css"/>
</head>
<body>
<div id="cadreentier">
	<div id="hautgauche"></div>
	<div id="hautdroit"></div>
	<div id="hautcentre"></div>
	<div id="bordgauche"></div>
		<div id="contenucadre">
			<p>Quam ob lorem blabla [...]
			</p>
		</div>
	<div id="borddroit"></div>
	<div id="basgauche"></div>
	<div id="basdroit"></div>
	<div id="bascentre"></div>
</div>
</body>
</html>

Et le 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
/*div{border:red solid 1px;
	padding:10px;
	}*/
#cadreentier{
	margin-left:auto;
	margin-right:auto;
	width:25%;
	}
#hautgauche{
	background:url(cadre_hg.jpg);
	height:41px;
	width:13px;
	float:left;
	}	
#hautdroit{
	background:url(cadre_hd.jpg);
	height:41px;
	width:87px;
	float:right;
	}
#hautcentre{
	background:url(cadre_h.jpg) repeat-x;
	height:41px;
	}
#bordgauche{
	background:url(cadre_bord.jpg) repeat-y;
	width:5px;
       float:left;
	}
#borddroit{
	background:url(cadre_bord.jpg) repeat-y;
	width:5px;
	float:right;
	}
#contenucadre{
	margin:5px;
	text-align:justify;
	overflow:hidden;
	height:150px;
	}
#basgauche{
	background:url(cadre_bg.jpg);
	height:13px;
	width:13px;
	float:left;
	}
#basdroit{
	background:url(cadre_bd.jpg);
	height:13px;
	width:13px;
	float:right;
	}
#bascentre{
	background:url(cadre_b.gif) repeat-x;
	height:13px;
	}

Voici 2 petites images pour cibler le problème:

La première est le résultat obtenu
Dans la seconde , les divs sont mis en évidence grace à des bordures.

**Kanapesh** · 08/01/2009, 14h27

En modifiant un peu mon html je 'ai réussi à obtenir quelque chose de mieux mon bord droit se retrouve maintenant à la bonne place (voir l'image).

Je n'arrive par contre toujours pas a comprendre pourquoi mon repeat ne fonctionne pas.

**c_s_s** · 08/01/2009, 17h10

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
26
27
28
29
30
31
32
#conteneur {
	background:url(cadre_bord.gif) repeat-y left top;
	float:left;	
}
#conteneur-bis {
	background:url(cadre_bord.gif) repeat-y right top;	
}
#haut {	
	padding-top:41px;	
	background:url(cadre_h.gif) repeat-x left top;	
}
#bas {
	padding-bottom:13px;
	background:url(cadre_b.gif) repeat-x left bottom;
}
.hautg {
	background:url(cadre_hg.gif) no-repeat left top;
	padding-left:13px;
}		
.hautd {
	background:url(cadre_hd.gif) no-repeat right top;
	padding-right:41px;
}	
.basg {
	background:url(cadre_bg.gif) no-repeat left bottom;
	padding-left:13px;
	margin:0 -41px 0 -13px;
}
.basd {
	background:url(cadre_bd.gif) no-repeat right bottom;
	padding-right:13px;	
}

Code xhtml :

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
<!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>Cadre extensible - Bordures personnalisées</title>
	<link type="text/css" rel="stylesheet" media="screen" href="cadre.css" title="cadre" />
</head>
<body>
<div id="conteneur">
	<div id="conteneur-bis">		
		<div class="hautg">
			<div class="hautd">
				<div id="haut">			
					<div class="basg">
						<div class="basd">
							<div id="bas">								
								... Ici tout ton contenu ... ... Ici tout ton contenu ... ... Ici tout ton contenu ...<br /><br />
								... Ici tout ton contenu ... ... Ici tout ton contenu ... ... Ici tout ton contenu ...<br /><br />
								... Ici tout ton contenu ... ... Ici tout ton contenu ... ... Ici tout ton contenu ...<br /><br />								
							</div>
						</div>	
					</div>
				</div>
			</div>		
		</div>			
	</div>
</div>
</body>
</html>

**Kanapesh** · 09/01/2009, 09h34

Yes yes ! Merci ! ^^

Création d'un bloc en divs.

CSS

Vue hybride

Discussions similaires

Partager

Partager