28172 sujets

CSS et mise en forme, CSS3

[Résolu] Adapter le background à la hauteur de page

Bonjour,

Alors oui, c'est un sujet simple, traité des milliers de fois, j'ai fais des recherches (beaucoup de recherches) sur Google pour espérer trouver des solutions à mon problème mais j'ai absolument rien trouvé qui me permet d'arriver au résultat attendu.

Voici la page principale du site en test avec un background blanc de 940px de largueur et 1350px de hauteur (solution temporaire pour donner un aperçu du résultat final).

http://www.aurelienhamel.fr/perso/AH/index.php

Donc voila, j'aimerais que mon background blanc remplisse toutes mes pages et ça peut importe leurs hauteurs avec une marge de 10 pixels en bas pour laisser un léger blanc. J'ai essayé 3 ou 4 solutions différentes mais aucune résultat, dans le meilleur des cas je me retrouve avec un background de 10px en haut de page... mais rien de mieux.

Le code CSS :

@charset "utf-8";

/* Balises generiques */

* {
	margin:0;
	padding:0;
	border:0;
}

body {
	background-color:#ededed;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;	
}

/* Structure du site */

#structure {
	width:940px;
	height:1350px;
        margin: 0 auto;
	background-color: #fff;
	padding-top:10px;
	padding-left:30px;
        padding-right:30px;
}


J'ai également essayé le weight en 100%, mais rien.

Pourriez-vous m'aider ?

Merci
Modifié par DKProject (05 Sep 2012 - 17:14)
Bonjour,

Pas bien sûr d'avoir compris ta problèmatique...

#structure {
	width:940px;
	height:1350px; [#red]* A supprimer[/#]
        overflow:hidden; [#red]* Contexte de formatage[/#]
        margin-bottom:10px; * La marge du bas...       
        margin: 0 auto ;
	background-color: #fff;
	padding-top:10px;
	padding-left:30px;
        padding-right:30px;
}


Ne te donne t-il pas le résultat escompté ?
Non, car j'ai renseigné le height en 1350 pour qu'il colle à la page d'accueil (environ) mais si je vais sur une page plus petite du genre la page contact, j'ai un background central qui s'étendra lui aussi sur 1350px alors que sa hauteur maximal sera bien moindre.

Du coup je me retrouve avec un background énorme.

L'idée c'est de définir que le background blanc central s'adapte à la hauteur des pages en y ajoutant 10px de marge en bottom.

*EDIT : Je viens de voir ton message, j'essaye.
Modifié par DKProject (05 Sep 2012 - 16:35)
6l20 a écrit :
Bonjour,

Pas bien sûr d'avoir compris ta problèmatique...

#structure {
	width:940px;
	height:1350px; [#red]* A supprimer[/#]
        overflow:hidden; [#red]* Contexte de formatage[/#]
        margin-bottom:10px; * La marge du bas...       
        margin: 0 auto ;
	background-color: #fff;
	padding-top:10px;
	padding-left:30px;
        padding-right:30px;
}


Ne te donne t-il pas le résultat escompté ?


Je viens de mettre tes informations.
Dans l'idée, c'est déjà très bien, le bg s'adapte à la page, parfait.

Seul petit problème restant, le margin-bottom n'est pas prit en compte.
J'ai essayé avec 25px pour voir et rien en bouge.

Merci déjà pour ça ! Smiley smile
Hello,

Cela fonctionne chez moi (je ne vois pas de margin-bottom sur ta page...) Smiley cligne
@6l20

Justement, j'aimerais un margin-bottom de 15 / 10 pixels.
Le bg est un peu trop coller sur la version actuelle ! ^^

EDIT : C'est un padding-bottom qu'il fallait mettre ! Smiley smile

@Raphael

Oui c'est ça.
Mais ça ne marche pas quand je le fais sur mon site.

Merci ! Smiley smile
Modifié par DKProject (05 Sep 2012 - 17:15)
Administrateur
DKProject a écrit :
Mais ça ne marche pas quand je le fais sur mon site.

Sans doute un problème de fusion de marges.

Par contre je viens de passer sur ton site et tu as des problèmes bien plus graves : tu as plusieurs occurences des éléments Doctype, Body, etc. : ça provoquera forcément des bugs quelque part.
@DKProject : Tu souhaitais donc une marge interne...

@Raphael : Si je ne me trompe pas, les deux solutions proposées fonctionnent, y en a t-il une à privilégiée plus que l'autre (éventuellement, pourquoi ?)
Administrateur
6l20 a écrit :
@Raphael : Si je ne me trompe pas, les deux solutions proposées fonctionnent, y en a t-il une à privilégiée plus que l'autre (éventuellement, pourquoi ?)


Si je ne me trompe pas, ta solution ne fonctionne *que* si le contenu de la page est déjà important. Si le contenu se réduit, le bloc n'occupera plus toute la hauteur, puisque rien ne l'y impose.
Raphael a écrit :

Si je ne me trompe pas, ta solution ne fonctionne *que* si le contenu de la page est déjà important. Si le contenu se réduit, le bloc n'occupera plus toute la hauteur, puisque rien ne l'y impose.

Meuh oui, suis-je bête Smiley confused
Raphael a écrit :

Sans doute un problème de fusion de marges.

Par contre je viens de passer sur ton site et tu as des problèmes bien plus graves : tu as plusieurs occurences des éléments Doctype, Body, etc. : ça provoquera forcément des bugs quelque part.


Ah oui peut-être...

Comme je l'ai dis dans mon autre sujet, je ne suis pas développeur mais j'essaye tant bien que mal à créer une deuxième version de mon site Internet avec mes propres moyens.

C'est sur que ça serait plus simple avec l'aide d'un vrai développeur mais malheureusement je ne roule pas sur l'or... Smiley decu
Bonjour,
Normal que vous n'arriviez pas a avoir une marge inférieur de 10px, le problème est simple, je vous explique :
Voilà votre structure actuelle :

#structure {
width:940px;
height:1350px; * A supprimer
overflow:hidden; * Contexte de formatage
margin-bottom:10px; * La marge du bas...
margin: 0 auto ;
background-color: #fff;
padding-top:10px;
padding-left:30px;
padding-right:30px;
}

Vous lui indiquez une marge inférieur de 10 px ensuite vous lui indiquez une marge inférieur et supérieur de 0 et une marge gauche et droite automatique afin de le centrer. Le navigateur ne prendra en compte que le deuxième argument vu qu'il li le code de bas en haut d'ou votre margin-bottom est annulé... Logique.

Pour votre hauteur, normalement le navigateur prend automatiquement la bonne hauteur, si vous avez bien codé il n'est donc pas nécessaire de l'indiquer. si pas fixé votre hauteur soit en auto et pas a 100% ca il prendra la hauteur de tout votre écran.

Voilà le résultat final :
#structure {
width:940px;
margin: 0 auto 10px auto;
background-color: #fff;
padding : 10px 30px 0 30px;
}

Normalement cela devrait régler votre problème
Sujet clos
Aller à