28173 sujets

CSS et mise en forme, CSS3

[Résolu] Height 100% et padding-top : fusion de marges.

Bonjour Smiley smile

J'ai un problème concernant une hauteur de page de 100% et un padding-top de 40px.

Je m'explique. J'ai un div#page qui englobe tout le contenu de ma page. Ce div#page doit prendre une largeur minimum et maximum (solution retenue et proposée par Laurent Denis suite de la discussion sur les designs fluides pour les critiques de mon site). Donc j'impose à ce div#page les attributs min-width et max-width. Pas de soucis jusque là. Je mets alors une couleur de fond à body qui va faire une impression de cadre (à droite et à gauche) autour de div#page.

Le problème est là. Si le contenu de la page est trop court, alors je vois la couleur de fond en bas de div#page. Je ne veux le voir que à droite et à gauche du div.
Donc je mets une hauteur de 100% etc., comme on nous le conseille partout (html, body { height:100%; }, div#page { min-height:100%; } etc.).

Mais mon cadre div#page doit avoir un padding-top de 40px, ce qui va créer une espace vertical de 40px en bas de la page, ce qui crée un ascenseur vertical pour rien ! Juste pour 40px qui sont vides.
Le problème c'est que je décale mon div en haut de 40px vers le bas, et donc avec le height:100% il ne se remet à jours, et il fait en réalité 100%+40px.

Pourquoi un padding-top de 40px ? J'ai besoin de faire un petit effet sympa avec des images en fore- et back- ground, et je fais un espace de 40px.

Comment éviter ce problème ? Mon serveur étant en rade, je ne peux pas montrer la page en question désolé :s, mais j'espère avoir été clair (ah nan ? ^^)

Merci.
Modifié par HyWaN (24 May 2007 - 00:38)
Salut HyWaN.

Pas moyen d'y échapper, les padding & margin interviennent dans le calcul de la hauteur, ce qui fait que tu te retrouves automatiquement avec une hauteur de 100% + 40px, d'où l'ascenseur.

Tu ne peux pas remplacer ce padding par un margin-top appliqué au premier enfant de div#page ?
polak25 a écrit :
Mets nous ton css et html en ligne stp

J'ai dis que mon serveur était en rade polak :]

Si j'applique un margin-top au premier enfant de div#page j'ai un comportement très bizarre, c'est comme s'il s'appliquait à div#page lui même.

Je peux insérer mon code ici ? Ce ne sera pas trop lourd ?
Thomas D. a écrit :
et d'abord, c'est pas bizarre,


+1

Le plus simple c'est de mettre un padding-top:40px; et le margin-top à 0 pour le 1er élément compris dans le global.
Modifié par Christian Le Bouler (23 May 2007 - 20:38)
Et si on ne sait pas à l'avance ce qu'on aura comme contenu dans div#global, on peut faire ceci :
[b]HTML :[/b]
<body>
<div id="global">
<div id="globalbis">
... Ici un contenu dynamique non prévisible ...
</div><!-- fin de div#globalbis -->
</div><!-- fin de div#global -->
</body>

[b]CSS :[/b]
html, body {
	height: 100%;
	margin: 0; padding: 0;
}
div#global {
	min-height: 100%;
}
div#globalbis {
	padding-top: 40px;
	padding-bottom: 1px;
}

(Le padding-bottom servant à éviter la fusion des marges en bas...)
Oui mais cela me créait tellement de problèmes que j'ai abandonné. Avec ces idées de fusion de marges, je tiens peut être une solution Smiley smile

Edit : lol a < 15sec près j'écris avant toi Smiley cligne
Modifié par HyWaN (23 May 2007 - 23:39)
Ahh c'est bon j'ai compris la fusion de la marge.

En fait, il fusionnait pas vers le haut (pas header vers page), mais vers le bas (page vers header). Pour ça qu'il me faisait quelque chose de « bizarre » ( Smiley murf ).

C'est bon, problème résolu.

J'ai mis mon padding:40px 0 0 0; à mon premier élément enfant de div#page (soit div#header). Et j'ai mis un padding:1px 0 0 0; à div#page.
La fusion n'est plus possible, le problème est résolu.

Bon j'ai un décalage de 1px, mais c'est pas tellement visible Smiley cligne

... en écrivant le message je me rends compte d'une chose. Maintenant j'ai un ascenseur, mais pour 1px Smiley scream

Edit : en fait, je dois travailler avec les margin et pas les padding si on fait comme proposé.
Modifié par HyWaN (23 May 2007 - 23:57)
Et bien il ne te reste plus qu'à enlever ce padding de 1 px parce qu'il ne sert à rien.

Pour être plus précis, si la marge supérieur du premier élément enfant avec marge par défaut est mise à zéro (Dans ce que tu dits div#header compte pour rien, car les div n'ont pas de marges par défaut, donc le phénomène de fusion provient d'un élément encore un peu plus profond dans l'imbrication des balises), alors tu n'auras plus d'ascenceur vertical.
Modifié par Christian Le Bouler (24 May 2007 - 00:04)
Ah je n'avais pas vu ton dernier message Florent, effectivement le doublage du conteneur principal rend en général tout cela beaucoup plus maniable.

C'est techniquement peu utile dans le cas présent mais globalement ça reste une possibilité efficace.
C'est bon j'ai réussi Smiley smile

Dans un lien donné par Thomas D. (le premier en fait), on donne plusieurs astuces. J'ai utilisé l'overflow:auto; Oui ce n'est pas compatible avec IE 6, mais un petit !important; et une redéfinition pour IE et le problème est réglé.

Alors au final j'ai fais quoi ... hmmm.

CSS :

html, body {
	direction:ltr;
	margin:0;
	padding:0;
	height:100%;
}
body {
	font:90%/1.3em "Trebuchet MS", Verdana, Arial;
	background:#dedabc !important;
		/* fix IE */
		background:#fff;
}

div#header {
	margin:40px 0 0 0;
	padding:1em;
	border:1px #dedabc solid;
	border-width:1px 0;
	background:#fbf4f8 url("img/headerBkg.jpg") 100% -40px no-repeat;
}

div#page {
	margin:0 auto;
	min-height:100%;
	min-width:950px;
	max-width:1500px;
	padding:0 !important;
	overflow:auto !important;
		/* fix IE */
		padding:1px 0;
		overflow:visible;
	background:#fff url("img/bodyBkg.jpg") 100% 0 no-repeat;
}


HTML :

<body>

<div id="page">

  <div id="header">
    <img /> <h1 /> et <span />
  </div>

  <!-- d'autre div et bidule truc chose -->

</div>

</body>


Tester avec Firefox 2.0.0.3, IE 6.0.2, et Opera 9.10. Un résultat de test devrait arrivé sous IE 7. [edit] Il est arrivé, et tout fonctionne comme sur Firefox et Opera. Je testerais sous Safari ce wkend. Tout fonctionne bien donc.
Sauf que sous IE 6, je n'ai pas l'effet attendu, c'est juste redevenu comme avant, avec un bon tout blanc (puisqu'il ne supporte pas les min-width et -height). Je ne veux plus me casser la tête sur IE Smiley langue du moins, pas ce soir.

Merci pour votre aide, décidemment, toujours aussi efficace Alsacréations Smiley cligne

Bonne soirée.
Modifié par HyWaN (24 May 2007 - 00:38)
Sujet clos
Aller à