28173 sujets

CSS et mise en forme, CSS3

[Abandon] Pb mise en page: height: 100%/ bandeau bas page/dépassement

Bonjour,une petite question concernant le placement des divs:
Je fournis ci-joint les fichiers vides de contenu CSS et html du positionnement d'une page.

Mon problème: le div id="colonne-centrale" ne voit pas son contenu poussé lorsqu'il dépasse la hauteur de la page, et le div id="pied-page" ne suit pas non-plus.
J'utilise le positionnement absolu par rapport au div id="total", mais ce dernier ne semble pas vouloir prendre plus de 100% de la page.
J'ai sûrement loupé quelque chose ou utilisé à mauvais escient mes propriétés de poistionnement...

Comment faire pour que mon div id="total" puisse gérer le dépassement supérieur à la hauteur de la page?

Merci d'avance pour vos réponses
Modifié par Gueuxlegueux (22 Jan 2010 - 13:02)
le code:

CSS
html {
  height: 100%;
}

body {
  background-color:#0030b3;
  height: 100%;
  margin: 0;
  padding: 0;
}

div#total {
  min-height: 100%;
  margin: 0 auto;
  min-width: 770px;
  max-width: 1000px;
  background-color: white;
  position: relative;
  border-width: 3px;
  border-style: none solid;
  border-color: #524633;
}

div#en-tete {
  background: #442233;
  margin: 0 10px;
  height: 120px;
  overflow: hidden;
}

div#colonne-gauche {
  float: left;
  width: 160px;
  margin: 10px;
  background-color: #fdde16;
}

div#bandeau-central {
  background-color: #dbac45;
  margin: 10px 180px;
  height: 70px;
}

div#colonne-droite {
  background-color: #ffefce;
  float: right;
  width: 160px;
  margin: 10px;
}

div#colonne-centrale {
  background-color: #fcde8e;
  margin: 10px 180px;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  bottom: 40px;
  }

div#colonne-gauche-bis {
float: left;
position: absolute;
top: 405px;
width: 160px;
margin: 10px;
background-color: #fdde16;
}

div#pied-page {
  background-color: #ece8be;
  position: absolute;
  height: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 10px 0 10px;
}


HTML

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

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
  <title>Vide</title>
  <link rel="stylesheet" media="screen" type="text/css" title="Asso" href="style2.css" />
  
</head>

<body>

<div id="total">

  <div id="en-tete">
  </div>

  

    <div id="colonne-gauche">
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>

    <div id="colonne-droite">
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />   
    </div>

    <div id="bandeau-central">
    </div>

	<div id="colonne-gauche-bis">
	<br /><br /><br /><br /><br /><br />
	</div>
		
    <div id="colonne-centrale">
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	</div>

    <div id="pied-page"><br />
    </div>

  

</div>

</body>
</html>

Modifié par Gueuxlegueux (21 Jan 2010 - 10:27)
Un conseil tout d'abord, vous pouvez fusionner html et body dans votre CSS, et également retirer tous les "div" devant vos attributs:

html {
height: 100%;
}

body {
background-color:#0030b3;
height: 100%;
margin: 0;
padding: 0;
}

/* en */

html, body {
background-color:#0030b3;
height: 100%;
margin: 0;
padding: 0;
}


Voilà, maintenant pour votre problème, c'est tout à fait normal que vos colonnes ne s'agrandissent pas puisque vous avez fixé leurs hauteurs à 70px. Celle-ci auront toujours cette taille. Si vous souhaitez qu'elles s'agrandissent, il faut mettre:


#bandeau-central {
background-color: #dbac45;
margin: 10px 180px;
min-height: 70px;
}

et non

div#bandeau-central {
background-color: #dbac45;
margin: 10px 180px;
height: 70px;
}


Attention, vous dites également:
a écrit :
J'utilise le positionnement absolu par rapport au div id="total", mais ce dernier ne semble pas vouloir prendre plus de 100% de la page.


Seulement, le position en absolute, signifie que vous positionnez à partir du coin supérieur gauche de votre fenêtre et non plus à partir du parent. Pour cela, il faut utiliser "position: relative;" mais c'est attribuer par défaut, inutile donc de l'indiquer.

Par exemple votre pied de page, vous tentez de la positionner tout d'abord tout à gauche avec le "left:0;", puis tout à droite avec "right:0;". Il va falloir choisir. Vous ne pouvez positioner à gauche ET à droite.
Vous pouvez par exemple le position à gauche, et lui fixer la largeur de l'écran (width: 100%)

Votre code CSS présente encore d'autres problèmes. Je pense que vous devriez le reprendre et proscrire les position: absolute; il ne me semble pas que vous en ayez besoin pour ce que vous souhaiter réaliser.

Voici un code de tête:

<body>
<div id="container">
<div id="column_left">
</div>
<div id="column_right">
</div>
<div id="content">
<div id="header">
</div>
contenu de la colonne central
<div id="footer">
</div>
</div>
</div>
</body>



html, body {
background-color:#0030b3;
height: 100%;
margin: 0;
padding: 0;
}

#container{
min-height: 100%;
min-width: 770px;
max-width: 1000px;
background-color: white;
border: 3px solid #524633;
}

#column_left{
float:left;
width: 160px;
height: 100%;
margin: 10px;
background-color: #fdde16;
}

#column_right{
background-color: #ffefce;
float: right;
width: 160px;
margin: 10px;
}

#header{
background-color: #dbac45;
margin: 10px;
height: 70px;
}

#footer{
background-color: #ece8be;
position: fixed;
height: 40px;
bottom: 0;
margin: 0 10px 0 10px;
}


Il y a probablement des modifications à faire.
Bonjour Gueuxlegueux

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Laurie-Anne
J'espère que j'ai bien mis à jour mes messages?!

Zetura
D'abord merci pour avoir pris le temps de lire le code.
J'ai lu ce que vous m'avez conseillé mais tout ne correspond pas réellement ce que je cherche à faire: je me réexplique à l'aide de photos.

upload/26288-plusdetext.jpg
Mon entete est en haut et mon pied de page collé en bas de page.
Mon bandeau central, le pied de page, l'entete et les 2 blocs de gauche ont des hauteurs fixes.
Ce qui doit varier c'est la hauteur de la colonne centrale:
- au minimum, je souhaite que tous les éléments soient visibles en une seule page avec la colonne centrale décalée de 10 pixels (prenant le plus de place possible, même si le contenu est peu long) par rapport au bandeau et à l'entete.
- au maximum, qu'elle s'adapte au contenu plus grand avec un pied de page en bas, non visible au chargement de la page mais bien quand on utilise le barre verticale du navigateur.

La première image montre que mon code marche (même s'il reste incorrect) pour un contenu long.

La deuxiéme par contre...:
upload/26288-Peudetexte.jpg
Le conteneur que j'ai rajouté (gris foncé) ne descend pas jusqu'en bas de page dans ce cas là, et ma colonne-centrale, non plus.

deuxième problème : le trait bleu tout en bas de page alors que je n'ai pas de bordure inférieure pour le conteneur total
Le code:
CSS
html, body {
  background-color:#0030b3;
  height: 100%;
  margin: 0;
  padding: 0;
}

#total {
  min-height: 100%;
  margin: 0 auto;
  min-width: 770px;
  max-width: 1000px;
  background-color: white;
  position: relative;
  border-width: 0 3px 0 3px;
  border-style: solid;
  border-color: #524633;
}

div#en-tete {
  background: #442233;
  margin: 0 10px;
  height: 120px;
  color: white;
  text-align: center;
  font-size: 20px;
}

div#conteneur-central {
  background-color: #556666;
  position: relative;
  padding-bottom: 50px;
  overflow: auto;
  bottom: 0;
  border: 1px solid red;
  }

div#colonne-gauche {
  float: left;
  width: 160px;
  margin: 10px;
  background-color: #fdde16;
  font-size: 20px;
  text-align: center;
}

div#bandeau-central {
  background-color: #dbac45;
  margin: 10px 180px;
  height: 70px;
  text-align: center;
  font-size: 20px;
}

div#colonne-droite {
  background-color: #ffefce;
  float: right;
  width: 160px;
  margin: 10px;
}

div#colonne-centrale {
  background-color: #fcde8e;
  margin: 0 180px;
  top: 0;
  bottom: 0;
  border: 1px solid black;
  }

div#colonne-centrale p {
  text-align: center;
  font-size: 20px;
  }
  
div#colonne-gauche-bis {
float: left;
position: absolute;
top: 275px;
width: 160px;
margin: 10px;
background-color: #fdde16;
font-size: 20px;
text-align: center;
}

div#pied-page {
  background-color: #ece8be;
  position: absolute;
  height: 40px;
  bottom: 0;
  left: 0px;
  right: 0px;
  margin: 0 10px;
  text-align: center;
  font-size: 20px;
}


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

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
  <title>Vide</title>
  <link rel="stylesheet" media="screen" type="text/css" title="Asso" href="style2.css" />
  
</head>

<body>

<div id="total">

  <div id="en-tete">
  en-tete<br />
  hauteur fixe (120 px)
  </div>

  <div id="conteneur-central">

    <div id="colonne-gauche">
	boite- Gche<br />
	hauteur à fixer
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>

    <div id="colonne-droite">
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />   
    </div>
	
    <div id="bandeau-central">
	bandeau-central<br />
	hauteur fixe (70 px)
    </div>
  
	<div id="colonne-gauche-bis">
	2e boîte Gche<br />
	hauteur à fixer<br /><br /><br /><br />
	</div>
		
    <div id="colonne-centrale">
	<p>colonne centrale<br />
	hauteur minimum: jusqu'au pied de page<p>
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	t<br />
	e<br />
	s<br />
	t<br />
	</div>
  </div>

  <div id="pied-page">
	pied de page<br />
	hauteur fixe (40px)
  </div>

  

</div>

</body>
</html>
Je me résous à utiliser un min-height pour définir ma colonne centrale, j'arrive pas à trouver autre chose et ça ira bien comme ça...

Merci quand même à tous! Smiley smile
Modifié par Gueuxlegueux (22 Jan 2010 - 13:06)
Sujet clos
Aller à