28172 sujets

CSS et mise en forme, CSS3

[Resolu] Gabarit à largeur fixe avec menu et partie centrale

Bonjour à tous Smiley smile ,

Je voulais juste savoir si c'est possible de réaliser un gabarit CSS de largeur fixe avec :
- 1 header et 1 footer,
- 1 menu gauche et 1 bloc central qui pousse le pied de page en fonction de leur hauteurs respectives ?

Je doute de la faisabilité car le menu gauche a une largeur fixe et à part en le positionnant en Float (ce qui donnera le layout sous IE), je ne vois pas trop comment faire ...

Merci à vous
Modifié par popovitch (21 Oct 2008 - 17:20)
Salut Sylvain,

SI tu ajoutes 40 titres à gauche le pied ne bouge pas ... c'est tout le problème que je cherche Smiley cligne
Modifié par popovitch (21 Oct 2008 - 14:10)
Modérateur
bonjour,

dans ce gabarit le menu est positionné en absolu , c'est la raison du pourquoi comment .

Si tu veut qu'il interagisse avec le pied , tu dois le reintégré dans le flux de la page , en le positionnant en float par exemple.

Des petits soucis de 'decalage' ou positionement peuvent donner des résultat differents d'un nav a l'autre .

Je te propose de voir cette page :
http://yidille.free.fr/plux/valign/index.php?8-plusieurs-gabarits-une-seule-feuille-de-style
A defaut de te proposer un gabarit 'façon tableau' elle propose l'utilisation de flottants et l'application d'un contexte de formatage particulier .
(float + overflow et zoom:1 )

Les problemes de fausses colonnes ou bug sur les flottants d'IE ne sont pas evoqué.
Seul le display:inline; est appliqué conjointement au float et le zoom:1; aux elements restant dans le flux (voir concept de haslayou dans IE) .

En souhaitant que cela t'aide a avançé un peu Smiley smile .
Merci cyrillus pour ces infos même si je n'ai pas tout compris, je vais creuser ... En attendant, j'ai essayé ceci et à confirmer mais ça a l'air de passer (même sous IE6 ce qui me semble d'autant plus bizzare), voyez-voir :

<!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>Largeur fixe 750, header/menu gauche/contenu/footer.</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: #99CCCC;
}
#conteneur {
position: relative;
width: 750px;
margin: 0 auto; 
background-color:#CCCCFF;
}
#centre {
float: left;
width:600px;
background-color:#9999CC;
}
#gauche {
float: left;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
clear:both;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche 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 <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

	  <div id="gauche">
	  <p>largeur fixe : 150px</p>
	  	
		<ul class="menugauche">
		<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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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><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 centrale qui &quot;pousse&quot; les colonnes 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="pied">pied de page de largeur fixe : 750px </div>
</div>
	  

</body>
</html>
Modérateur
popovitch a écrit :
Merci cyrillus pour ces infos même si je n'ai pas tout compris, je vais creuser ... En attendant, j'ai essayé ceci et à confirmer mais ça a l'air de passer (même sous IE6 ce qui me semble d'autant plus bizzare), voyez-voir :


Ce comportement est tout a fait normal Smiley smile , même chez IE6 . De plus , en faisant flotter les 2 éléments , le bug des 3 pixels dans IE ne géneras pas .

C'est tout bon Smiley smile .
Sujet clos
Aller à