[XHTML] Pied d'un affichage

**S~C** · 13/11/2006, 01h36

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 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
<!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 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
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 !

**Roromix** · 13/11/2006, 07h49

Essaye d'ajouter

Code :

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

position:absolute

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

**trotters213** · 13/11/2006, 09h03

Essaie plutôt ceci :

Code HTML :

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

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.

**S~C** · 13/11/2006, 11h33

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 !

**trotters213** · 13/11/2006, 12h15

Et bien tu peux laisser tes divs dans le flux (donc ne pas utiliser de float) et les positionner relativement.

**S~C** · 13/11/2006, 12h17

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

**Candygirl** · 13/11/2006, 12h31

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 :

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

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 :

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

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

[XHTML] Pied d'un affichage

HTML

Vue hybride

Discussions similaires

Partager

Partager