28221 sujets

CSS et mise en forme, CSS3

Menu + centre qui pousse le footer

Bonjour,

j'arrive pas a faire que si je rajoute du texte dans mes menus, soit droite soit gauche ou du texte au milieu, le footeur descende avec !

j'utilise le design Header + colone gauche + centre + colone droite + footer !

je veux que ça soit fluide en largeur et en hauteur ( vers le bas)

merci

@+
j'utilise pour l'instant les démos de ce site : 

<div id="conteneur">

  <div id="header">
    <div align="center">header </div>
  </div>

	  <div id="gauche">
	    <p>menu</p>
	  	<p>largeur fixe : 150px</p>
	  	
			<ul class="menugauche">
			  <p><a href="">Menu 1</a><br />
			      <a href="">Menu 2</a><br />
			      <a href="">Menu 3</a><br />
			      <br />
	          </p>
		    </ul>
  </div>
	  
	  <div id="droite">
	    <p>droite</p>
	  	<p>largeur fixe : 150px</p>
	  	
			<ul class="menudroit">
			<a href="">Menu 1</a><br />
			<a href="">Menu 2</a><br />
			<a href="">Menu 3</a><br />
			<a href="">Menu 4</a><br />
			</ul>
  </div>
	  
  	<div id="centre">
  	  <div align="center">News :<br />
  	    <br />
  	    <br />
  	    Blabla<br />
  	    <br />
  	    <br />
  	    <br />
  	    <br />
  	    <br />
  	    <br />
  	    <br />
  	    <br />
  	    <br /> 
  	    <br />

  	  </div>
  	</div>
	  
	  <div id="pied">
	    <div align="center">Copyright</div>
	  </div>
</div>


et le css :

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 50px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}


Quand je met les menus extensibles, il passe par en-dessous du footer !

merci
Un <ul> ne peut contenir autre chose que des <li> :

[#red]<ul class="menugauche">
<p><a href="">Menu 1</a><br />
<a href="">Menu 2</a><br />
<a href="">Menu 3</a><br />
<br />
</p>
</ul>[/#]

<ul class="menugauche">
 <li><a href="">Menu 1</li>
 <li><a href="">Menu 2</li>
 <li><a href="">Menu 3</li>
</ul>

Modifié le 27 Dec 2004 - 10:59
Valentin a écrit :

ok, merci, c'set corrigé, mais mon menu ne repousse pas mon footer !

comment faire ?

Je ne sais pas, je n'ai pas encore vérifié, mais voici d'autres suggestions :

Un header ?

<div id="header">
<div align="center">header </div>
</div>

Alors utiles <h1>, <h2> ou <h3>.

<div id="header">
 <h1 align="center">header </h1>
</div>

Il y a un <div> inutile ici :

<div id="pied">
<div align="center">Copyright</div>
</div>

Et je placerais align="center" en CSS

<div id="pied" align="center">Copyright</div>

Comme ceci :

<div id="pied">Copyright</div>

#pied { 
   text-align: center; 
}

Modifié le 27 Dec 2004 - 11:16
Valentin a écrit :

...mon menu ne repousse pas mon footer !

C'est un problème courant avec le positionnement absolu.

Je n'ai pas de solution pour le moment, mais j'encourage les défenseurs du positionnement absolu à se pencher sur ton problème ! Smiley cligne
Je n'arrive pas à reproduire ton problème avec les codes que tu as donnés.
Un lien vers ta page en ligne serait utile.
Administrateur
Valentin a écrit :

...mon menu ne repousse pas mon footer !


Stephan a écrit :

C'est un problème courant avec le positionnement absolu.

Je n'ai pas de solution pour le moment, mais j'encourage les défenseurs du positionnement absolu à se pencher sur ton problème ! Smiley cligne


On ne peut pas "pousser" un footer si l'on n'est pas dans le flux (sauf avec la propriété clear combinée aux éléments flottants).
Le positionnement absolu sort du flux, il n'est donc plus en interaction avec les autres éléments.
Donc, ça confirme ce que je pensais.
Si tu veux que le footer passe en bas du menu, il te faut suffisamment de contenu.
Modifié le 27 Dec 2004 - 16:29
[code]
#pied {
height: 30px;
background-color: #99CC99;
margin-left: 150px;
margin-right: 150px;
}

Lao-Tseu a dit: le sage laisse aux éléments en position absolue la place de s'exprimer librement en hauteur comme en largeur

Smiley cligne
Bonjour,

j'ai mis un petit aperçut de ce que je voudrais évité ici :

http://vtnet.org.free.fr/gta_hl/test
parce que en ce moment mon hébergeur est H.S, et mon nom de domaine aussi Smiley decu

Je voudrais que si mon contenu soit minime, et que mes menus soit grand, évité cette situation Smiley smile

merci

@+

J'ai simplifier mon code suite a vos conseil Smiley cligne 


<div id="conteneur">

  <div id="header">
    <p class="text-center">header </p>
  </div>

	  <div id="gauche">
	    <p>menu</p>
	  	<p>largeur fixe : 150px</p>
			  <p><a href="">Menu 1</a><br />
			      <a href="">Menu 2</a><br />
			      <a href="">Menu 3</a><br />
			      <br />
			      <br />
			      <br />
			      <br />
			      <br />
			      <br />
			      <br />
			      <br />
			      <br />
			      <br />
			      lol
			      <br />
			      <br />
	          </p>
  </div>
	  
	  <div id="droite">
	    <p>droite</p>
	  	<p>largeur fixe : 150px</p>
	  	
			<a href="">Menu 1</a><br />
			<a href="">Menu 2</a><br />
			<a href="">Menu 3</a><br />
			<a href="">Menu 4</a><br />
			<br />
			<br />
			pom pom <br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			voila, je voudrais &eacute;vit&eacute; ceci !
			<br />
  </div>
	  
  	<div id="centre">
  	  <p classe="text-center">News :<br />
  	    <br />
  	    <br />
  	    Blabla<br />
  	    <br />
  	    <br />
  	    <br />
  	    <br />
  	    <br />
  	    <br />
  	    <br />
  	    <br />
  	    <br /> 
  	    <br />

  	  </p>
  	</div>
	  
	  <div id="pied">
	    <p class="text-center">Copyright</p>
	  </div>
</div>
l'index.php

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 50px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}
.text-center {
text-align: center;
}

et là le CSS ^^

@+
Modifié le 27 Dec 2004 - 20:31
Hello,

Je ne suis pas sûr qu'il y ait eune solution simple à ce problème ! Faut-il repasser au tableau à 3 collonnes ? Smiley ohwell
Sujet clos
Aller à