[Résolu] Problème de marges

Bonsoir,

Je découvre (tant bien que mal) le CSS, et j'ai enfin réussi une interface plus ou moins valable... Seul problème (jusqu'à maintenant) : Lorsque j'insère le titre d'une page (la balise H1 a une mise en forme particulière, avec un background, pour "émuler" une bannière de page), les marges se comportent bizarrement : Sous IE le titre en question est scotché au bord de l'écran (verticalement) et sous Gecko il est décalé d'une vingtaine de pixels, laissant apparaitre le fond normalement destiné à la colonne centrale...

La page en question (MISE A JOUR) : http://www.denvercountryclub.yi.org/denver7/modele.htm


J'ai tenté de modifier les valeurs des marges, des paddle, rien n'y fait : Toujours le même résultat, ou pire ! Je ne pense pas que cela vienne des propriétés de H1 lui-même, mais bien d'une erreur dans l'assemblage des couches (la couche supérieure se décolle du point 0 lorsqu'on la remplit)


Est-ce que quelqu'un a une idée de où cela peut-il venir ?

CSS (MISE A JOUR) : http://www.denvercountryclub.yi.org/denver7/denvercountryclub/denvercountryclub.css

Merci d'avance
Modifié par SolykZ (02 Sep 2006 - 18:13)

Salut,

a écrit :
Je découvre (tant bien que mal)

Ca m'étonne pas, ta feuille de style m'a effrayé.

Si tu débute je pense que c'est la meilleure façon de s'empêtrer et de perdre du temps sur ton apprentissage que de prendre des feuilles de styles bourrés de hack techniques.

C'est une mise ne page à trois colonnes, il y a des gabarits , ici , beaucoup plus simples et tu t'y retrouveras mieux et en l'adaptant toi meme tu apprendras.

Y comprends tu quelque chose à ta css?
si non. c'est inutile...

Tout ce que je peux te dire, c'est que j'ai vu avec DOM inspector marges externes en .empour ton <h1> , et j'arrive pas a les retrouver...
Je suis pas sur sur ce soit ce qu'il faut...

J'y comprends quelques trucs, mais le passage où je suis totalement à la largue, c'est les div... J'ai lu et relu des pages en parlant, dans tous les sens possibles de la chose : Nada ! Des marges par ici, des padding par là, bref, tout ce qu'il ne faut pas montrer à un noob...

Concernant CETTE feuille de style, je n'ai pas le choix de la faire si évoluée, même si c'est prématuré... Si tu regarde le site actuel (www.denvercountryclub.wb.st) et si tu compares avec une feuille de style qu'un noob pourrait faire, je me dis que l'écart entre les deux sera trop grand... J'y suis presque, c'est vraiment LE détail qui arrache toute la mise en page, ce bug en haut de l'écran ! Une fois que je saurai d'où il vient, la CSS sera prête, je pourrai terminer le site, et ensuite mieux me pencher sur le coté "compréhension"...

[Edit]J'ai fait un tour sur la galerie CSS, j'aime beaucoup celui-ci : http://css.alsacreations.com/modeles/modele10.htm mais je devrais de toute façon y inclure un hack de telle manière que l'interface prenne tout l'écran... Car là, le gros blanc en dessous, c'est franchement pas beau...
Modifié par SolykZ (01 Sep 2006 - 22:09)

Bonjour à tous et bienvenue à SolykZ,

Si je puis me permettre de donner un avis sur cette dernière intervention, avis du noob que je fus (et suis toujours dans bien des cas !), mieux vaudrait-il comprendre ce qui se passe avant d'essayer de faire quelque chose ...

Si un détail "arrache' toute la mise en page, c'est que cette dernière a été mal pensée ...

Pour partir sur des bases saines, je te conseille, comme l'a fait Hum, de partir sur un gabarit qui correspond à tes attentes. Ainsi, tu auras un modèle de structure solide, sur lequel tu pourras progresser en terme d'apprentissage et de développement de ton site.

La mise en page en css, c'est un coup à prendre et il y a des petits trucs et des méthodologies qui ont fait leur preuve.

Bonsoir Véro,

Je prends en compte vos conseils, à toi ainsi qu'à Hum, et je repars depuis un modèle valable, pour le modifier moi-même petit à petit... C'est un retour aux sources qui fera malheureusement déplaisir à mes visiteurs, car pour beaucoup d'entre-eux l'interface du site est superbe, et tant que je n'aurai pas assimilé quelques trucs, il me sera impossible de leur rendre un truc du genre mais valide W3C... Mais bon, une fois tout ça maitrisé, le contenu n'en sera que meilleur qu'en ce moment...

(Je ne me lance cependant pas de fleurs, si j'en suis arrivé à l'idée de repartir de zéro c'est que je trouve mon travail très mal fait (Merci Frontpage) cependant je suis fier de l'interface actuelle car je l'avais réalisée entièrement, en partant d'un carré blanc de 256x256...

J'ai cependant peur des problèmes de rendu... En espérant qu'IE7 relève la barre ! En effet, dès sa sortie officielle il sera proposé en mise à jour critique donc tout le monde passera en une fois à IE7... Ce qui veut dire que si cette fois ils ont fait un réel effort, l'on pourra alléger fortement nos chères et tendres pages de quelques hacks bien bordéliques !

Par contre, si IE7 n'a que d'évolution que le chiffre....on est pas dans la mer** !

Si tu veux un autre avis, ne sois pas pessimiste à l'avance au sujet de problèmes de rendu sous IE ou truc bidule ... ne te laisses pas influencer par des commentaires trop nombreux sur la question.

Il y a plusieurs possibilités pour intégrer le même design. Choisir celle qui t'évitera de bidouiller sera un excellent apprentissage.
Et lorsque tu y verras plus clair, si vraiment ta mise en page pose un soucis sur un point particulier, tu trouveras sûrement une solution sur le forum.

Le plus important, au départ, est que ta page ait une structure cohérente par rapport au contenu utile et un code html sain, c'est à dire respectueux sur le plan sémantique.

Et tu intègreras les petites astuces au fur et à mesure.

Modifié par Vero (02 Sep 2006 - 12:18)

a écrit :
Choisir celle qui t'évitera de bidouiller sera un excellent apprentissage.
Et lorsque tu y verras plus clair, si vraiment ta mise en page pose un soucis sur un point particulier, tu trouveras sûrement une solution sur le forum.

+ 1 - C'est ce que je pense aussi.

Tu fais le bon choix, et tu verras que avec un peu de chance tu n'en aura pas pour très logtemps car là tu pourra y voir clair par rapport a ce que tu as actuellement.

a écrit :
En effet, dès sa sortie officielle il sera proposé en mise à jour critique donc tout le monde passera en une fois à IE7... Ce qui veut dire que si cette fois ils ont fait un réel effort, l'on pourra alléger fortement nos chères et tendres pages de quelques hacks bien bordéliques !

Sans vouloir casser l'ambiance, ça risque d'être un peu plus compliqué que ça Mais comme Hum & Véro te l'ont dit, inutile de te soucier des bugs d'IE pour le moment.

Développe ton site pour qu'il soit valide et donne ce que tu attends sur Firefox & Opera.

Après, pour IE, on a des rustines pour à peu près toutes les situations courantes

Bonjour tout le monde !


Bon, j'ai donc hier recommencé à zéro... Tout va nickel, mais franchement très bien ! Ensuite vient le moment où ça foirait lors de mon premier essai : Le positionnement dans le header de ma "fausse bannière" : De nouveau le même problème qu'avant : Le bloc header vient se placer à environ 20px sous le bord haut de la page... J'ai vraiment fait le strict nécessaire, donc aucune bidouille ou quoi ! Je perds vraiment courage, je comprends beaucoup mieux de quoi je parle, mais ça ne m'aide pourtant pas à règler ce truc !

Un screen :
http://www.hiboox.com/vignettes/3506/44fa8bc5.jpg

Le code des blocs :

/* Placement des couches - DEBUT */

#conteneur {
	position: absolute;
	width: 100%;
	min-height: 100%;
	background: #96553D;
	background-image: url(interface.jpg);
}

#entete {
	top:0;
	text-align: center;
	height: 100px;
	background: #96553D;
	color: #E6C5B3;
}

#centre {
	margin-left: 200px;
	margin-right: 200px;
	background: #E6C5B3;
	text-indent: 15px;
}

#gauche {
	position: absolute;
	left: 0;
	text-align: center;
	width: 200px;
	background: #96553D;
	color: #E6C5B3;
}

#droite {
	position: absolute;
	right: 0;
	text-align: center;
	width: 200px;
	background: #96553D;
	color: #E6C5B3;
}

#pied {
	bottom: 0;
	text-align: center;
	background: #96553D;
	color: #E6C5B3;
}

/* Placement des couches - FIN */

Vraiment si quelqu'un sait d'où ça vient dites-le moi j'ai tout fouillé sans résultat Merci d'avance

C'est probablement un problème de fusion des marges.

Pas bien grave

Salut,

je te promet de revenir t'aider plus tard mais là j'ai peut de temps...

Je vais simplement te dire comment je procède pour m'y retrouver quand j'ai des difficultés avec un élément.

Essaye de cerner quel élément te pose problème, ou sur lequel tu souhaites agir.

Pour ce faire, donne lui des marges bien visibles. Comme ça tu verras ou il est , la place qu'il prend etc

h1 {border: 2px solid blue}

et pareil sur son conteneur s'il en a un....je ne vois pas de <h1> dans le bout de css que tu as laissé.

le <h1>, à des marges par défaut, réinitialise les voir ce que ça donne :

h1 {border: 2px solid blue; margin: 0; padding: 0}

L'url est toujours la même?
que je regardes tout à l'heure...

Sinon, essaye de crée un dossier , et met tout ça dedans pour faire un exemple en ligne et là "on" pourras t'aider bien mieux...


Sopo me grille encore, ça va decenir habituel
Modifié par Hum (02 Sep 2006 - 17:42)

Je viens de regarder la page que Sopo m'a donnée... Suite à cela, j'ai placé

	border: 1px solid;

Sur le header et là miracle, il se place correctement en top:0px !!
Mais maintenant, j'ai une belle bordure qui encadre mon header -_-'


Mais j'ai quand même l'impression que le problème vient d'ailleurs... Je vais faire comme tu m'as dit, Hum, et je verrai bien... Je travaille en local pour l'instant, sitôt que je sais d'où ça vient je borderise le tout et j'uploaderai...


En tout cas merci pour votre aide (très rapide en plus !)


[EDIT]
Je viens de faire un margin:0px sur le header, il se place correctement cette fois ! Je ne pensais pas que ça pouvait avoir autant d'importance ! Maintenant je n'ai plus qu'à trouver d'où vient le dépassement entre le header et la colonne centrale (bien visible sur le screen) et ça passera comme une lettre à la poste

[EDIT 2]
Je viens de mettre la colonne centrale en absolute, l'espacement entre celle-ci et le header disparaissait, pour laisser un gros vide entre le bord haut de la colonne centrale et "TITRE 2". J'ai margin:1px sur H2 et H3, et tout m'a l'air clean !

J'uploade le tout et je mets à jour le premier post de ce topic pour que vous puissiez voir les résultats
Modifié par SolykZ (02 Sep 2006 - 18:16)

Prochaine étape : Faire en sorte que la page, même si elle n'est pas assez remplie, prenne toute la hauteur de la fenêtre... Là je suppose qu'il va falloir bidouiller un peu ?
Modifié par SolykZ (02 Sep 2006 - 18:16)