28221 sujets

CSS et mise en forme, CSS3

Height/min-height : Problemes divers

Tout d'abord bonjour à tous Smiley smile
Habitué des forums Media-box je viens prendre la température par ici pour un souci CSS (ça faisait longtemps Smiley confus )

Je développe un site web pour une commune, sous IE pas de problèmes pour la mise en page, mais étant un féroce adepte de Firefox je ne tiens pas à le laisser de coté même si apparemment ce n'est pas la priorité de mon boss Smiley cligne

Bref...

Donc voici le souci : il est visible sous Mozilla à l'adresse :
http://doxe.free.fr/mairie_gravigny/

Ma mise en page ce compose de plusieurs div imbriqués :

le premier :

/****** Conteneur principal ******/

div#global {
margin:0 auto;
padding:0;
width:790px;
height:100%;
background:#FCFCFC url(img/bg_global.png) repeat-y;
text-align:justify;
}


Me permet de créer l'effet "ombrage" sur chaque côté du bloc

Le second qui fait suite à "global" :

/****** Conteneur ******/

div#conteneur {
width:750px;
margin:0 auto;
padding:0;
height:100%;
background:#FCFCFC url(img/bg_conteneur.png) no-repeat bottom right;
}


Me sert à mettre un second background placé en bas à droite de mon design.

Le souci que je rencontre c'est avec les min-height et les height je ne m'en sors pas Smiley decu IE qui capte rien me fais tout comme j'aimerais que se soit mais pas mon Firefox.

J'ai utilisé ce hack mais dés que j'essaie de changer les ordres de parenté etc... pour tester c'est ou l'un ou l'autre bloc qui occupe toute la page et pas seulement la fenetre.

/****** Hack ******/

html>body #global #conteneur{
height:auto;
min-height:100%;
}


Celui qui me trouve la soluce aura ma reconnaissance eternelle car la je vois plus (j'ai beaucoup cherché avant evidemment Smiley cligne )

Merci d'avance à tous

:D

-- Doxe
#conteneur
{
height: auto !important;
height: 600px; /* because ie suxxe */
min-height: 550px;;
width: 750px;
background:#FCFCFC url(img/bg_conteneur.png) no-repeat bottom right;
}
Merci Raphael j'avais bien evidemment déja potassé ce billet en long en large en travers Smiley smile

Le souci c'est que mes 2 blocs : #global et #conteneur sont concernés par ce hack et c'est là que je coince.
Bon je creuse toujours et j'ai fais un peu évolué les choses mais le souci reste le même Smiley decu

En fait si je met ceci :

html>body div#global div#conteneur {
height:auto;
min-height:100%;
}


Mon fond qui doit se situé en bas à droite se met bien en bas de ma page comme désiré mais le fond qui "cadre" l'interface s'arrête avant.

Quand je met ça :

html>body div#global, div#conteneur {
height:auto;
min-height:100%;
}


Sur une page qui a suffisamment de contenu (ex : http://doxe.free.fr/mairie_gravigny/infos_pratiques/etat_civil.php ) pas de problèmes...

Par contre si le contenu n est pas suffisant par exemple la page d'accueil ( http://doxe.free.fr/mairie_gravigny/ ) mon fond qui cadre descend bien mais pas le fond qui devrait être en bas à droite Smiley eek .

Là je pêche un peu par mon manque de connaissance, j'ai fais le tour des forums et des différents articles proposés. Si quelqu'un a un peu de temps pour que l'on voit ça ensemble Smiley smile

D'avance merci

-- Doxe
Une première chose : nulle part je ne vois dans ton code la hauteur que tu entends spécifier à min-height. Il y a là quelque chose d'illogique me semble-t-il. Dire min-height=100% c'est finalement ne pas imposer de hauteur minimum (car tu peux avoir 100% de 0 qui fait 0 et la notion min-height est inutile pour définir une hauteur minimum à 0).

Sinon, min-height n'est pas chose facile. Les solutions classiques ne résolvent généralement que des sous-ensembles du problème. En particulier, sans vouloir te décourager, IE/Mac et Safari, qui ne gèrent pas non plus min-height, sont insensibles à ces solutions.

Dans ton cas, si tu souhaites vraiment avoir une hauteur minimum, je préconise d'abandonner l'utilisation de la propriété min-height et de la simuler. Pour obtenir une hauteur minimum de 300px tu appliques padding-top:300px à #global et margin-top:-300px à #conteneur.
Pour plus de détails regarde :
http://www.ultra-fluide.com/ressources/css/css-hacks.htm#min-height
Xavier a écrit :
Dans ton cas, si tu souhaites vraiment avoir une hauteur minimum, je préconise d'abandonner l'utilisation de la propriété min-height et de la simuler. Pour obtenir une hauteur minimum de 300px tu appliques padding-top:300px à #global et margin-top:-300px à #conteneur.
Pour plus de détails regarde :
http://www.ultra-fluide.com/ressources/css/css-hacks.htm#min-height


Panade totale dans Opera beta.

(Je n'ai pas pris la peine de tester plus avant).
Modifié le 03 Feb 2005 - 14:11
@Laurent Denis> Tu vas parfois un peu trop vite. Cela ne remet pas en cause ni tes compétences ni tes connaissances, mais tes jugements à l’emporte pièce.
Si tu avais au moins consulté le lien que j'indiquais, tu aurais constaté qu'en effet Opéra nécessite un complément, et ça fonctionne (testé sous Opéra 8 et 7.54)
Merci cependant de ton intervention qui me permet de compléter l'astuce.

@Tout le monde> Il faut ajouter min-height: 1px; à #global pour la compatibilité avec Opéra.
Sujet clos
Aller à