Div gauche, background ne fait pas 100% de la page

Dans ma division de gauche, je veux que mon background bleu descende jusqu'en bas de la page. Bisarrement, il s'arrête à une longueur que je n'ai pas définie?

Quelqu'un peu m'aider?

Voici le liens: http://www.enviro-option.com/qualite-air-analyse.html
et ma CSS: http://www.enviro-option.com/style2.css


Merci!

Bonjour,

Pour que ton bloc left s'étire en fonction de ton contenant sous FF donne lui la propriété overflow: hidden; (c'est une des solutions possible) IE lui grâce (à cause) d'un bug le fait tout seul...

bon courage

J'ai essayé mais ca ne fonctionne pas malheureusement. En IE, il ne le fait pas plus.

Salut

Je tente une réponse (je ne suis spécialiste) :

S'il s'agit du div left, le problème vient surement de

height : 100%;

Comme tu as aussi défini cette valeur pour body et html, tu obtiens une hauteur égale à celle de la fenêtre.

Essaie de jouer sur cette propriété. Pourquoi tout simplement ne pas la supprimer de ton div ?

a+

Re
Si, déjà ton background englobera tes dernières images sous FF, ce qui n'était pas le cas avant.

Puis autant pour moi, je n'avais pas vu ton footer et je viens de comprendre ton problème...

Déjà, il y a quelques trucs sérieux à reprendre:

tes séparateurs <p> </p> c'est pas le top, tu peux changer cela en modifiant le margin (top ou bottom) de chaque élèment...

Et surtout ton organisation au niveau des blocs est un peu comment dirais je à l'emporte piéce ce qui va rendre la solution à ton problème délicat...

Il faudrait restructuer sainement tout cela en se fixant un objectif à atteindre (header-3 colonnes-footer) et les moyens disponibles pour le réaliser ... il y a tout ça dans les tutoriels, ensuite ton problème se réglera presque tout seul ...

il S'agissait d'une vielle page, que je viens de remplacer...Même la, ca ne règle pas le problème malheureusement. Pour le Div left 100%, si il n'est pas la le background s'arrête à la hauteur du menu, alors, je dois le mettre. Si je l'enlève de body, ca ne change rien...

Merci pour vos suggestions, mais ce n'est toujours pas résolu.
Modifié par ginodec (26 Sep 2006 - 21:55)

bonjour,

c'est un probleme de "fausse colonnes" , tout d'abord comme dit precedemment , en enlevant le width:100%; ( ou en proposant le min-width:100%; a la place pour ff ..} le contenu sera englobé sans toutefois faire les 100%; de hauteur de la page.

Par ailleurs en css tu n'arriveras pas a faire appliqué a IE un "100%" qui fassent plus de la hauteur de la fenetre , il ne sait pas faire ! il garde en reference a 100% la hauteur de la fenetre (sauf en donnant une hauteur precise dans une unité de mesure autre que % au conteneur de reference).

Un javascript peut eventuellment te permettre de recupere la hauteur de la page et ainsi en deduire "dynamiquement" la hauteur a appliqué a #left.

Une façon courante de simuler une colonne sur la hauteur de la page est de la proposer en background-image en repetition sur la hauteur , dans body par exemple.

dans ton cas , eventuellemnt , la partie superieur au menu peut caché l'image de fond en appliquant une bordure blanche de 30px par exemple ou 5em; (a toi de voir) en collant le div left a la banniere,
pour couper/cacher a nouveau l'image en bas de page , a nouveau une bordure superieur blanche peut-etre appliqué au pied par exemple.
le fond de la page etant blanc dans ton lien cela semble etre une solution/piste possible relativement aisé a mettre en oeuvre.

En passant par la FAQ , regarde le min-height pour IE et les autres , et fais eventuellment une petite recherche sur le choix d'un "doctype" et de l'utilité du prologue xml et n'hesite surtout pas a creuser dans les conseils que te donne Ghost .

Bonnne continuatuion.
Modifié par gcyrillus (26 Sep 2006 - 22:20)

Re

L'ideal c'est de tricher !!
tu places ta page dans un conteneur de la couleur de ton fond bleu, tu donnes à ta colonne de droite un fond blanc, à celle du milieux un fond blanc aussi et à ta colonne de gauche un fond transparent ainsi quelque soit la taille de cette colonne le fond ira jusqu'au footer...

Pour cela, il faut remettre un peu d'ordre dans tes blocs avant c'était le sens de mon propos précédent.

Ca semble bien comme idée, je vais essayer ca.

Merci

J'ai essayé a peu près tout, changer le background etc. Finalement J'en suis venu a la conclusion que ca ne fonctionne pas très bien en fonction du modèle que j'ai fait. Étant donné que je ne veux pas recommencer a zéro, je me suis fait une section left2 (j'ai triché!), avec une hauteur déterminée de 1400px pour les cas ou j'ai besoin de plus long. J'ai aussi changer mon background footer pour blanc pour que ca ait l'air moins broche à foin.

Merci pour votre aide! C'est vraiment apprécié

Re

Essaye cela et vois si ça t'inspire ou si je suis à côté de la plaque ...

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>test ghost</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
#conteneur{
width: 500px;
border: 1px solid #000;
background: #627dfe;
overflow: hidden;
margin: auto;
}

#conteneur2{
width: 400px;
background: #fff;
overflow: hidden;
float: right;
}

#gauche{
float: left;
width: 100px;
background: #627dfe;

}

#droite{
float: left;
width: 150px;
background: #fff;
}

#centre{
float: left;
width: 250px;
background: #fff;
}

p{
margin: 10px;
}

</style>
</head>
<body>
<div id="conteneur">

<div id="gauche"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. . </p></div>
<div id="conteneur2">
<div id="centre"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas malesuada volutpat ante. Fusce mollis ligula a nunc. Curabitur nulla dui, accumsan eu, consectetuer vel, egestas a, justo. Sed egestas quam nec sem. Curabitur volutpat cursus nibh. Vivamus rhoncus lorem nec turpis. Vestibulum accumsan enim quis risus. Etiam rutrum diam eget risus. Vivamus sagittis elit in purus. Donec feugiat tortor vel purus viverra posuere. Suspendisse in eros tincidunt eros cursus malesuada. Etiam quis risus at lectus venenatis viverra. Nullam gravida lacus ac erat. Sed egestas, felis et luctus blandit, augue est laoreet mi, quis porta quam justo in magna. Vestibulum vitae turpis. In gravida nibh ornare mauris. Sed volutpat. Donec eget turpis et diam bibendum pretium. Sed posuere mauris interdum nibh. Suspendisse orci.</p></div>  

<div id="droite"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas malesuada volutpat ante. Fusce mollis ligula a nunc. Curabitur nulla dui, accumsan eu, consectetuer vel, egestas a, justo. Sed egestas quam nec sem. </p> </div>
</div>

</div>
</body>
</html>

Bon c'est vite fait et sûrement compatible IE et FF à tester

Merci, je vais tester ca un peu plus tard, je t'en redonne des nouvelles.

Ghost, si je défini une largeur pour mon cadre, qu'est-ce que je devrias utiliser pour que ca soit optimal pour une majorité d'écrans?
J'ai défini 1000 px comme largeur et ca semble être ok.
Modifié par ginodec (29 Sep 2006 - 00:04)

J'ai refais mon site en entier avec l'aide de ton model. Je te remercie beaucoup, tout est plus simple maintenant. Ca m'a vraiment beacoup aidé!

Bonjour,

De rien, c'est avec plaisir
1000px c'est un peu beaucoup pour optimiser sur du 1024, compte 950px.
Sinon tu peux travailler en % et normalement être fluide c'est à dire s'adapter à toutes résolutions du style

#conteneur{
width: 100%;
border: 1px solid #000;
background: #627dfe;
overflow: hidden;
margin: auto;
}

#conteneur2{
width: 80%;
background: #fff;
overflow: hidden;
float: right;
}

#gauche{
float: left;
width: 20%;
background: #627dfe;
}

#droite{
float: left;
width: 20%;
background: #fff;
}

#centre{
float: left;
width: 80%;
background: #fff;
}

Faut tester mais ça me semble ok...

Bon courage