[XHTML] Pied d'un affichage

Version imprimable

Bonsoir à tous mes amis du net,

J'ai tout petit souci, bien légère...
Je me demande comment on fait pour "fermer" le design en fonction de la taille hauteur d'un corps...

Je m'explique :

Regardez cette image pour vous aider à comprendre

Je n'arrive pas à faire fermer le design en fonction d'où le texte se termine...

Voici le code source de ma fiche xhtml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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" >
   <head>
       <title>WebDesgin par Ghost Warrior</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link href="includes/style_gw_d.css" rel="stylesheet" media="screen" />
   </head>
   <body>
		<div id="cadre_principal">
			<?php include('includes/partie_header.php'); ?>
			<?php include('includes/partie_barre_navig.php'); ?>
			<div id="partie_corps_general">
				<div id="partie_gauche">
					gauche<br />
					fgdfgdfgd gd gd g dfg df gds fg dfg dfg df gdfg dfgsdfg,sdfklgjdsfl mjgmdfj gsdf gdf gmldsfgjsdflgmj ldsfjgsdmlgjsdfg jldfsjg sdfmgj lskdfjgsdj
				</div>
				<div id="partie_droite">
					droite<br />
					fgjfkdjgmlkdfs sdkl gjdsf gklsdflmkgdsmlkfg jkldsf gklmsdf gfdsflkgfdsklgsdkfl gklsdf gklmsdfgklmsdfl gsdflkgfslkd glmksdf gmlksdf
				</div>
			</div>
		</div>
   </body>
</html>

Code:

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
body
	{
	background-color: #999999;
	margin: 0px;
	}
 
#cadre_principal
	{
	margin: auto;
	width: 85%;
	border: 1px solid #000000;
	}
 
#partie_header
	{
	background-color: #2D6E95;
	border-bottom: 1px solid #000000;
	}
 
#partie_barre_navig
	{
	border-bottom: 1px solid #000000;
	}
 
#partie_corps_general
	{
	background-color: #FFFFFF;
	padding-bottom: 30px;
	padding-left: 50px;
	padding-top: 45px;
	padding-right: 45px;
	}
 
#partie_gauche
	{
	float: left;
	width: 70%;
	}
 
#partie_droite
	{
	float: right;
	width: 25%;
	}

Où est mon erreur ?

Merci d'avance !

13/11/2006, 07h49
Roromix

Essaye d'ajouter

Code:

position:absolute

dans le css de la partie gauche et de la partie droite.

:salut:
Essaie plutôt ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="partie_corps_general"> <div id="partie_gauche"> gauche<br /> fgdfgdfgd gd gd g dfg dmlgjsdfg jldfsjg sdfmgj lskdfjgsdj </div> <div id="partie_droite"> droite<br /> fgjfkdjgmlkdfs sdkl gjdlkgfslkd glmksdf gmlksdf </div> <div style="clear:both"></div> </div>
car tu sors tes 2 parties partie_gauche et partie_droite du flux donc leur conteneur (partie_corps_general) pense qu'il ne contient rien donc il se ferme seul. Avec la div contenant le clear, ça devrait se résoudre.

13/11/2006, 11h33
S~C

Merci vous deux de m'avoir répondu,

@ Roromix : j'ai essayé ta solution, mais sans succès (qui ne tente rien n'a rien ;))

@ trotters213 : avec ta solution, cela a marché impeccablement, mais parait qu'il y a un autre solution qu'on peut impliquer directement dans la css sans autant de créer un div "vide"... Non ?

Amicalement !
13/11/2006, 12h15
trotters213

Et bien tu peux laisser tes divs dans le flux (donc ne pas utiliser de float) et les positionner relativement.
13/11/2006, 12h17
S~C

Euh, aurais-tu de la sympathique de me traduire en code source parce que en français je ne comprends pas trop

Avec plaisir :mrgreen:
Bon c'est moche mais je te laisses gérer le truc dynamique en Javascript :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#content {
background-color:#66ff99;
}
 
#gauche {
border:#ff0000 dotted 1px;
position:relative;
width:400px;
}
 
#droite {
border:#0000ff solid 1px;
position:relative;
width:400px;
top:-125px;
left:500px;
}
</style>
</head>
 
<body>
<div id="content">
	<div id="gauche">
		<p>tyjtfjtyj</p>
		<p>ilo_louiu</p>
		<p>retvregvy</p>
	</div>
	<div id="droite">
		<p>tyjtfjtyj</p>
		<p>ilo_louiu</p>
		<p>retvregvy</p>
	</div>
</div>
</body>
</html>

13/11/2006, 12h31
Candygirl
Citation:

Envoyé par S~C

mais parait qu'il y a un autre solution qu'on peut impliquer directement dans la css sans autant de créer un div "vide"... Non ?

Tu peux attribuer la propriété clear à n'importe lequel de tes éléments. En général, au bas des sites, tu as un footer et c'est à lui que tu appliqueras le clear.

Après si tu n'as rien au-dessous de tes flottants, je vois 2 manières pour faire descendre ton conteneur sans ajouter du html intuile juste dans le but de le faire:

- mettre le conteneur aussi en float ou absolute (souvent pas appliquable vu la configuration du site)

- utiliser la pseudo-class :after pour appliquer le clear:
Code:

1 2 3 4 5 6 7 #partie_corps_general:after { content:'.'; clear:both; display:block; visibility:hidden; height:0; }
et donner le layout sur IE vu qu'il ne connaît pas le :after:
Code:

1 2 3 4 5 6 #partie_corps_general {display: inline-block;} /* Hides from IE-mac \*/ * html .#partie_corps_general {height: 1%;} #partie_corps_general {display: block;} /* End hide from IE-mac */
(que tu peux insérer à l'aide des commentaires conditionnels)

Tu trouveras une explication détaillée ici:
http://www.positioniseverything.net/easyclearing.html

La méthode a du être revisitée pour IE7, en utilisant un display:inline-block
http://www.456bereastreet.com/archiv...ie7/#comment22
13/11/2006, 12h31
S~C

Merci pour la réponse, j'irai tester dans la soirée parce que j'ai d'autres à faire !

Merci encore beaucoup d'avoir pris du temps !