Je ne veux pas du "Padding" partout.

Bonsoir

ma question porte sur un problème de padding. celui-ci créer une marge pour toute la page mais je souhaiterais que la première image (layoutDiv1) n'ai pas de padding pour que l'image n'ai pas de marge blanche. Je ne sais pas comment m'y prendre car tous les essais que je fais me mette le "bronx" plutôt qu'autre chose. Si vous avez une piste.
Vous avez compris que je suis débutant et que je ne m'y connais pas trop.

Ma page : http://www.navitimer.info/

le bout de code css :

.gridContainer {
	width: 88.2%;
	max-width: 980px;
	padding-left: 0.6%;
	padding-right: 0.6%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;

merci de votre aide

Bonjour blake,

J'ai jetté un oeil sur ton code source et à moins que quelque-chose m’ait échappé, ton "problème" n'en est pas un mais juste un comportement normal de l'application des styles css sur les conteneurs (affectant par la même les contenus).

Si j'ai bien compris la structure et en partant depuis ton BODY :
- Tu ouvre une DIV avec comme classe gridContainer à laquelle tu affecte un Padding de .6%
- A l'intérieur de cette DIV tu y inclus 2 autres DIV : LayoutDiv 1 & 2 (avec une images à l'intérieur ; qui entre-nous soit dit n'est pas le meilleur choix en terme de balise [voir FIGURE], et ton titre [là encore je trouve la construction discutable au vu du doctype])

Pour moi il me semble donc logique que ton image référencée sous LayoutDiv1 subbisse les effet du padding défini sur gridContainer étant un enfant direct de cette DIV.

Du fait je vois deux façon d'aborder la résolution de la question :
* Soit virer le padding sur gridContainer pour l'appliquer à LayoutDiv2 sous la forme d'un MARGIN
* Soit appliquer une marge négative à LayoutDiv1 de -.6%

Une troisième, et là je pense que ce serait (beaucoup) mieux pour la suite de ton webdev, serait de revoir ta structure html en y incorporant les balises du HTML5 vu que ton doctype prétend que ta page est en Html5.


Pour rappel :
MARGIN agit sur l'espace entre le conteneur et ce qui l'entoure (directement)
PADDING agit sur les élément à l'intérieur d'un conteneur

Bon courage !

PS : il y a aussi des erreurs d'inattention dans ta page. Pour les détecter j'utilise le pluggin Firefox HTML Tidy. Il indique les endroits, qui selon lui, ont une erreur.

Salut,

Effectivement comme le dit Greg c'est normal et tel que c'est architecturé, tu ne peux pas y échapper proprement (la solution du margin négatif c'est pas propre ! )
Il faut virer le padding de gridContainer et soit :
1) créer un conteneur avec ton padding qui contiendra le reste de la page (à savoir tes LayoutDiv2+ )
2) donner à chaque LayoutDiv2+ une classe commune LayoutDiv qui donne un padding
3) faire une rèsgle css du genre gridContainer > div qui ajoute du padding et overider le padding de la premiere div #LayoutDiv1 (moins maintenable je pense)

Merci pour vos réponses,

J'ai pu modifier ma page avec vos conseils, ce n'est peut etre pas dans les règles de l'art mais ça me donne ce que je cherchais.

Je vais essayer de digérer tous vos conseil pour améliorer le code de la page.


Bonne soirée
Blake