[ résolu ] Petits problémes de height et de compatibilité ie/firefox

Bonjour tout le monde !
Alors voila je vais posé une question récurrente qui revient toutes les semaines à ce que j'ai compris ( je suis déja allé voir : ici puis sur la faq la puis aussi le dernier tutoriel ici : tutoriel ) mais pas moyen d'appliquer tous ces exemples à ma mise en page ( oui je sais je suis un cas désespéré ) , bon alors j'ai ma page valide strict ( mais pas encore accessible enfin ca viendra ) je me sers d'un ptit framework basique ( codeigniter ) qui n'interfère pas dans la mise en page ( logique vu que c'est le principe ) , alors j'ai essayé toutes les solutions possible min-height avec commentaire conditionnel, javascript et plein d'autre chose mais mon site ( en construction : widev ) ne veut définitivement pas s'étendre sur toute la hauteur je pense que quelque chose interfère dans cette portion de script ( lorsque je veux placé min height et définir body et html à 100% ) :

body {
  margin:0;
  padding:0;
  background:#0c2238 url('../img/fond.jpg') repeat-x;
}
#base {
  font-family:Tahoma;
  font-size: 0.7em;
  line-height:17px;
  color:#1f1d1d;
  width: 722px;
  margin: 0 auto; 
  padding: 0;
}

Sinon la feuille de style compléte est ici
Voila je suis désolé le design du site est vraiment vilain ( surtout des pages pas finies ) mais je voudrais quand meme qu'il s'étende sur toute la hauteur

2 éme probléme : sur ma page dev donc il y'a des cadres arrondi ( composés de 3 calques top / content / bottom ) pourquoi j'ai un décalage entre celui du bas et les 2 autres ?
Merci d'avance à ceux qui se pencheront sur mes problémes...
Modifié par moumoute (03 Feb 2007 - 16:59)

moumoute a écrit :
mon site ( en construction : widev ) ne veut définitivement pas s'étendre sur toute la hauteur

Il a raison. Fais-lui confiance.

Laurent Denis a écrit :
Il a raison. Fais-lui confiance.

Je dois avoué que là j'ai pas compris, j'ai oublié un truc ? ou je vois pas le rapport avec mes questions ? enfin je sais pas ...
Modifié par moumoute (02 Feb 2007 - 18:37)

Ben je ne sais pas ce que tu as utilisé comme technique pour avoir une hauteur minimale de 100%, mais je n'en vois plus la moindre trace...

En rajoutant ceci dans ta feuille de style, ça devrait te donner une piste :

html, body {
	height: 100%;
}
#base {
	min-height: 100%;
	background: red;
}

Si tu testes avec Firefox, Opera, Safari, IE7... tu verras que ça marche très bien. Ne manquera plus qu'une image de fond répétée en hauteur sur div#base, et ça ira bien.

Restera alors le correctif (via commentaire conditionnel) pour IE6 et inférieurs, qui ne comprend pas min-height (la FAQ en parle).

Comme alternative au tutoriel « design complet » sur Alsa, voir l'étape n°1 du tutoriel suivant (le reste ne te concerne pas à priori) :
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html

Edit : faut pas trop faire attention aux boutades de Laurent.
Modifié par Florent V. (02 Feb 2007 - 18:45)

Ah ok pour la boutade =) c'est juste que comme je suis nouveau je croyais avoir oublié de faire un truc, sinon pour le code je vais testé mais justement si il n'y a rien c'est que à chaque fois que j'ai essayé de le mettre je me retrouvais avec un résultat indésirable mais bon je vais revoir ca

Bon petites évolutions, alors ... déjà si je voyais rien avant c'est normal comme je n'avais pas de couleur de fond je n'avais pas de repère, j'ai mis une couleur bien vive pour qu'on voit mieux le probléme : la, donc je pense qu'il faut que je repense un peu mon site, la ce n'est plus savoir pourquoi mais comment :
donc je suppose qu'il faut que ce soit un div qui englobe tout le site avec une image de fond ( height de 100 % ) et que tout mes autres éléments viennent masqués ce fond en se "superposant" ( je parle de la bannière et du footer ) ? ou alors je sais pas si c'est possible mais de faire en sorte que mon div.centre ( qui contient les parties gauche et droite et qui contient déja l'image de fond ) occupe toute la hauteur qui lui reste pour arriver à 100% ? enfin jetez un oeil sur le probléme et dites moi comment vous feriez siouplait sinon je ferai un autre design c'est pas grave , ( pour ma 2 eme question pas de solutions ? )

moumoute a écrit :
donc je suppose qu'il faut que ce soit un div qui englobe tout le site avec une image de fond ( height de 100 % ) et que tout mes autres éléments viennent masqués ce fond en se "superposant" ( je parle de la bannière et du footer ) ?

Oui, en gros c'est ça.
Avec le résultat que tu as actuellement, ton conteneur global prend déjà toute la hauteur (ça se voit à la couleur orange). Si tu remplaces la couleur de fond par une image reprenant ton fond blanc et tes bordures, ça ira très bien.

Par contre, attention : le conteneur global doit avoir une hauteur minimale de 100%, pas un height: 100%. Si tu utilises une hauteur fixe, et si le contenu est plus important que la hauteur de la fenêtre du navigateur, le conteneur global resterait figé à 100% de la hauteur de la fenêtre, et le contenu débordera.

Donc : conteneur global avec image répétée en vertical, hauteur minimale de 100% (ce qui nécessite d'avoir html et body en height: 100%, par contre), et enfin un height: 100% sur ce même conteneur global, pour Internet Explorer uniquement (histoire de pallier aux insuffisances de ce navigateur...).

moumoute a écrit :
ou alors je sais pas si c'est possible mais de faire en sorte que mon div.centre ( qui contient les parties gauche et droite et qui contient déja l'image de fond ) occupe toute la hauteur qui lui reste pour arriver à 100% ?

C'est théoriquement possible dans certains cas mais en pratique pas du tout, donc autant laisser tomber cette possibilité.

moumoute a écrit :
2 éme probléme : sur ma page dev donc il y'a des cadres arrondi ( composés de 3 calques top / content / bottom ) pourquoi j'ai un décalage entre celui du bas et les 2 autres ?

T'as quand même fait un truc compliqué, je trouve. J'ai un peu la flemme de décortiquer tout ça, donc je te propose un modèle un peu plus simple, qui te conviendra peut-être :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html


Une remarque en passant : il me semble que tu n'utilises pas un seul titre de section (hN) pour structurer ton document. C'est une forme de manifeste esthétique, ou bien c'est juste par ignorance ?

Dans le dernier cas :
- les hN (h1, h2, h3...) c'est bon, mangez-en ;
- ça peut se styler facilement avec des CSS, c'est pas parce qu'on a utilisé un h1 qu'on doit avoir un texte énorme ;
- faut les utiliser avec un peu de logique tout de même, sinon ça sert à rien ;
- si c'est bien utilisé, c'est très utile pour renforcer l'accessibilité d'un document.

Merci pour tout, pour les Hn en fait ça destructurait mon design , comme si l'élément H avait des marges par défaut enfin je sais que ca faisait planté quelque part

Florent V. a écrit :

Edit : faut pas trop faire attention aux boutades de Laurent.

Boutade, oui

Mais sur un solide fond de réserves quant à ces designs.

Exemple: le grand vide séparant les contenus "courts" et le pied de page rendra ce dernier à peu près introuvable pour l'utilisateur d'une loupe...

Par ailleurs (mais plus anecdotique), ton exemple est intéressant dans IE7...
Modifié par Laurent Denis (03 Feb 2007 - 09:53)

erf mon probléme est presque résolu ( enfin sur firefox c'est good ) mais par contre ca sur internet explorer meme avec le hack

 <!--[if lte IE 6]>
<style type="text/css">
#base {
	height:100%;
}	
</style>
<![endif]-->

ca marche pas

moumoute a écrit :
erf mon probléme est presque résolu ( enfin sur firefox c'est good ) mais par contre ca sur internet explorer meme avec le hack (...) ca marche pas

D'une, les commentaires conditionnels ne sont pas des hacks.
Ensuite, est-ce que tu as testé pour voir s'ils étaient correctement appliqués ? Par exemple en attribuant une couleur de fond flashy à un élément, ou une bordure, etc. ?

Ensuite, je ne suis pas convaincu de l'intérêt de ceci :

#centre {
	position:relative;
	background:url('../img/backgroundPattern.png') repeat-y;
}

L'image de fond est inutile, et le positionnement relatif, combiné à des flottants, peut faire des choses étranges parfois dans IE6...

Au passage, le rendu dans IE7 a l'air correct.

Laurent Denis a écrit :
Mais sur un solide fond de réserves quant à ces designs.

Exemple: le grand vide séparant les contenus "courts" et le pied de page rendra ce dernier à peu près introuvable pour l'utilisateur d'une loupe...

Effectivement, c'est à prendre en compte. Il faudra peut-être que je rajoute un avertissement sur mon tutoriel.

Laurent Denis a écrit :
Par ailleurs (mais plus anecdotique), ton exemple est intéressant dans IE7...

Pas vu de problème particulier dans IE7. Tu pensais à quoi exactement ?

Finalement laurent m'a convaincu =) c'est pas vraiment ce que je souhaite un truc super grand avec desfois rien dedans, vais recommencer le design toute façon ça aura été une bonne expérience