28234 sujets

CSS et mise en forme, CSS3

Min-height et pourcentages

Bonjour,

J'essaie actuellement d'améliorer le design de mon site (un site de test se trouve ici). La partie centrale correspond à la balise CSS suivante :


#corps
{
   width: 95%;								/* Largeur du bloc qui contient l'ensemble de la page. */
   max-width: 1200px;							/* Taille maximale du bloc, adaptée aux résolutions 1280x960 (ne fonctionne pas sous IE6 et versions inférieures, à placer dans le <head> de la page HTML). La taille doit également être supérieure à la longueur de la bannière */
   min-width: 760px;							/* Taille minimale du bloc, adaptée aux résolutions 800x600 (cf. max-width). */
   margin: 0 auto;							/* Pour centrer la page (les éléments de type block pour être exact) */
   margin-bottom: 20px;							/* Pour éviter que le corps ne colle trop au pied de page en-dessous */
   padding: 5px;							/* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   border: 2px solid black;						/* Bordure pour marquer les limites du corps de la page */
   background: #626262 url("images/motif.png");	/*Couleur ou image de fond pour le corps */
   color: #B3B3B3;
}



Cependant, pour les pages avec peu de texte, ce cadre n'est pas très haut. J'ai donc tenté d'utiliser min-height pour corriger ce problème. Pas de problème si j'utilise des pixels (min-height: 400px;), mais difficile d'utiliser cette propriété pour toute les résolutions.
J'ai donc tenté de remplacer 400px par 95% (par exemple), mais dans ce cas, aucun effet.

Une idée pour résoudre ce problème sous Firefox (je tenterai d'adapter le code sous IE plus tard) ?
Administrateur
Bonjour,

SkyCorp a écrit :
Cependant, pour les pages avec peu de texte, ce cadre n'est pas très haut.

Et alors? Smiley smile Le cadre s'adapte à son contenu, rien de choquant ou d'affolant ... Si tu connais à l'avance les pages où il y aura (vraiment) moins de contenu, réduit la largeur du bloc correspondant pour ces pages-là en utilisant une autre classe mais sinon laisse faire, on scrollera moins par exemple
Mon but n'est pas de laisser l'utilisateur scroller, bien au contraire, mais juste de remplir un peu plus la page si nécessaire. Au pire, j'ajouterai des images pour combler un peu les pages avec peu de texte. Smiley cligne

Mais je trouve curieux que min-height ne fonctionne pas ici avec des pourcentages sous Firefox.
en faite quand tu indiques 95%, il faut que tu penses à 95% de quoi ?

Si dans ta page tu n'as que 5 lignes de texte (environ 100px de hauteur) , alors tu auras un cadre de 95px.

Tu vas me dire pourquoi ? parce que les balises html et body s'adaptent aussi à la hauteur du contenu de la page.

voilà ce qu'il faut rajouter pour corriger ton problème.

html,body{
   min-height:100%;
}


En pensant bien sure prendre en compte IE6.
Modifié par masseuro (28 Apr 2009 - 12:06)
Je viens d'essayer chez moi en local (sous Firefox) mais aucun changement visible. Par ailleurs, je viens également de me rendre compte que mon width: 95%; ne fonctionne pas non plus! Il ne considère que les pixels à nouveau.
Bonjour,

Masseuro a raison sur le fond, mais se trompe sur le détail: un bloc ne peut pas avoir de hauteur ou hauteur minimale en pourcentages si son parent direct n'a pas de hauteur déterminée... et une hauteur se détermine avec height, pas avec min-height.

Il faut donc le code suivant:
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}


Ensuite, le bloc auquel on donne une hauteur ou hauteur minimale en pourcentages doit être un enfant de l'élément BODY, et pas un descendant de deuxième ou troisième niveau ou plus.

Note en passant: si #corps a des éléments frères, notamment un en-tête, un pied de page, etc., alors utiliser une hauteur minimale en pourcentages est sans doute la mauvaise technique pour obtenir l'effet graphique recherché. Je n'en dis pas plus, car on n'a pas accès à la page complète, pas d'aperçu du design visé, etc., donc ce serait des suppositions en l'air.

SkyCorp a écrit :
Par ailleurs, je viens également de me rendre compte que mon width: 95%; ne fonctionne pas non plus! Il ne considère que les pixels à nouveau.

Vu le code indiqué, je dirais que le navigateur applique bien cette largeur... mais utilise les largeurs minimales et maximales indiquées par ailleurs, et les applique en priorité (lorsqu'il y a lieu).

SkyCorp a écrit :
La partie centrale correspond à la balise CSS suivante :

Il n'y a pas de balises en CSS. Le bloc de code cité correspond à un bloc de déclarations en CSS.
Florent V. a écrit :
Bonjour,

Masseuro a raison sur le fond, mais se trompe sur le détail: un bloc ne peut pas avoir de hauteur ou hauteur minimale en pourcentages si son parent direct n'a pas de hauteur déterminée... et une hauteur se détermine avec height, pas avec min-height.

Il faut donc le code suivant:
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}

C'est bon, j'ai réussi à adapter la hauteur! Merci Smiley smile J'en ai d'ailleurs profité pour faire un width: 100%; pour les balises html et body.

Florent V. a écrit :
Ensuite, le bloc auquel on donne une hauteur ou hauteur minimale en pourcentages doit être un enfant de l'élément BODY, et pas un descendant de deuxième ou troisième niveau ou plus.

Pas de problème de ce point de vue, sinon j'aurais indiqué tous les éléments parents. Mais c'est vrai que j'aurais peut-être dû le préciser

Florent V. a écrit :
Note en passant: si #corps a des éléments frères, notamment un en-tête, un pied de page, etc., alors utiliser une hauteur minimale en pourcentages est sans doute la mauvaise technique pour obtenir l'effet graphique recherché. Je n'en dis pas plus, car on n'a pas accès à la page complète, pas d'aperçu du design visé, etc., donc ce serait des suppositions en l'air.

Si nécessaire, j'ai indiqué la page web de test plus haut (http://testfred.chez.com/). L'en-tête est partiellement définie en pixel (min-height en pixel notamment), ce qui peut effectivement poser problème, mais je pense tout de même qu'un pourcentage est plus approprié que des pixels. S'il existe un autre moyen sans javascript, je suis preneur.
Voici le code CSS correspondant à l'en-tête :
#en_tete
{
   width: 760px;
   min-height: 154px;
   background: black url("images/banniere.png");	/* Bannière */
   margin: 0 auto;							/* Pour centrer la page (les éléments de type block pour être exact) */
   margin-bottom: 10px;					/* Pour éviter que l'en-tête ne soit trop collé avec ce qui se trouvera dessous (le menu et le corps) */
}

#en_tete a								/* Mêmes dimensions au lien, chose possible grâce à la propriété display: block */
{
   width: 400px;
   height: 70px;
   display: block;								/* Transforme le lien  en élément de type block, auquel on peut donner des propriétés de taille */
   background: url("images/test.gif") no-repeat ;
   position: relative;
   top: 15px ;
   margin: 0 auto;								/* Pour centrer la page (les éléments de type block pour être exact) */
   text-indent: -5000px;						/*text-indent négatif pour pouvoir ne cacher le texte hors de la page. Ainsi il reste exploitable pour les syntèses vocales */
}


Rien de particulier à signaler pour le pied de page :
#pied_de_page
{
   padding: 5px;
   text-align: center;
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   border: 2px solid black;
}


SkyCorp a écrit :

Par ailleurs, je viens également de me rendre compte que mon width: 95%; ne fonctionne pas non plus! Il ne considère que les pixels à nouveau.

Florent V. a écrit :
Vu le code indiqué, je dirais que le navigateur applique bien cette largeur... mais utilise les largeurs minimales et maximales indiquées par ailleurs, et les applique en priorité (lorsqu'il y a lieu).

Smiley confused Je n'ai rien dit, la taille est en fait la largeur max. Ma résolution est plus grande que ce que je pensais. Je vais peut-être augmenter légèrement max-width alors.

Florent V. a écrit :
Il n'y a pas de balises en CSS. Le bloc de code cité correspond à un bloc de déclarations en CSS.

Smiley confused Désolé pour ce lapsus qui m'a échappé.
Sujet clos
Aller à