18073 sujets

Questions générales et questions de débutants

Site en largeur Fluide [RESOLU]

Bonsoir à tous,

J'aimerais votre aide sur le sujet suivant :
http://css.alsacreations.com/modeles/modele6.htm

J'ai acheté et lu le livre de Raphael et j'ai du mal à comprendre le flux dans le corps de la page web.

Si je résume mon idée à partir du modèle de mise en page :
Le header vient se placer en haut,
Ensuite le menu gauche
Puis le centre à coté du gauche (a sa droite)
Puis le menu droit à coté du centre (a sa droite aussi)
Et enfin le pied

Hors dans le source de la page web, les DIV sont placés ainsi
Header, Gauche, Droite, Centre et Pied.

Ma question est pourquou dans cet ordre et non pas celui-ci :
Header, Gauche, Centre, Droite et Pied

Essayer et regarder le résultat :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0048)http://css.alsacreations.com/modeles/modele6.htm -->
<HTML lang=fr xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Largeur fluide, header/menu gauche/menu droite/contenu/footer.</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
#header {
	HEIGHT: 100px; BACKGROUND-COLOR: #99cccc
}
#conteneur {
	WIDTH: 100%; POSITION: absolute; BACKGROUND-COLOR: #ccccff
}
#centre {
	MARGIN-LEFT: 150px; MARGIN-RIGHT: 150px; BACKGROUND-COLOR: #9999cc
}
#gauche {
	LEFT: 0px; WIDTH: 150px; POSITION: absolute
}
#droite {
	RIGHT: 0px; WIDTH: 150px; POSITION: absolute
}
#pied {
	HEIGHT: 30px; BACKGROUND-COLOR: #99cc99
}
.menugauche {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.menugauche LI {
	MARGIN-BOTTOM: 5px
}
.menugauche A {
	MARGIN: 0px 2px; COLOR: #000000; TEXT-DECORATION: underline
}
.menugauche A:hover {
	TEXT-DECORATION: none
}
.menudroit {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.menudroit LI {
	MARGIN-BOTTOM: 5px
}
.menudroit A {
	MARGIN: 0px 2px; COLOR: #000000; TEXT-DECORATION: underline
}
.menudroit A:hover {
	TEXT-DECORATION: none
}
P {
	MARGIN: 0px 0px 10px
}
</STYLE>

<META content="MSHTML 6.00.3790.279" name=GENERATOR></HEAD>
<BODY>
<DIV id=conteneur>
<DIV id=header>header <A 
href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous 
les modèles)</A> </DIV>
<DIV id=gauche>
<P>menu</P>
<P>largeur fixe : 150px</P>
<UL class=menugauche>
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 1</A> 
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 2</A> 
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 3</A> 
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 4</A> </LI></UL></DIV>

<DIV id=centre>partie centrale qui "pousse" les colones vers le bas.<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>partie avec du contenu occupant le reste de la largeur<BR></DIV>

<DIV id=droite>
<P>droite</P>
<P>largeur fixe : 150px</P>
<UL class=menudroit>
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 1</A> 
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 2</A> 
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 3</A> 
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 4</A> </LI></UL></DIV>
<DIV id=pied>pied de page</DIV></DIV></BODY></HTML>


Merci d'avance de m'éclaicir sur ce point

JP
Modifié par tibrus (30 Aug 2005 - 10:18)
Les menus de gauche et de droite sont des flottants donc ils sortent du flux ... ça signifie que le navigateur ne les prends pas en compte pour positionner les blocs suivants, OK ?

Le bloc central, par contre, reste dans le flux ... donc le navigateur positionnera le bloc suivant en-dessous.

Si tu mets l'abord le bloc central dans ton code, puis le bloc de droite, le navigateur va bien faire flotter ce dernier mais à partir d'un nouveau point de référence, qui est le bas du cadre central. Donc il faut le mettre avant.

Je ne sais pas si j'ai été clair Smiley biggol
Bonjour Sopo,

Merci pour ce début de réponse.
Je crois que je commence à comprendre un peu mieux.

Je vais poursuivre des tests en essayant de rajouter des menus flottant et observer ainsi le phénomène pour la nouvelle mouture de mon site.

JP
Sujet clos
Aller à