Probléme de cadrage CSS

[Tizel]

Bonjour,

J'ai un probléme avec ma feuille CSS car je n'ai pas le même résultat dans Mozilla et dans internet explorer.

J'ai déja réussit à cadrer ma page à peu pret comme je veux:

- un haut de page

- un menu à gauche

- une section pub à droite

- une section principale au centre

- une section pied de page

Le probléme est qu'avec Mozilla, la section principale est sous le menu... et non au centre...

Tizel

PJ: page HTML et Feuille de style

[Loupilo]

Salut,

Si j'ai bien compris ton problème, bien que j'ai du mal avec ta CSS, vu toutes les tabulations :

Ajoute au div principal les propriétés suivantes :

postion: relative;
left: 7.8em;

Seulement je ne peux pas tester sous Internet Explorer...

Sinon, il y a un truc que je comprends pas dans ta page :

Pourquoi un div principal et un contenu ?

A+

Loupilo

PS: Lit l'excellent article de LaurentDenis, Initiation au centrage CSS ;@)

[mee2]

Le div principal est centré par margin-left: auto; et margin-right: auto;, mais tu annules ces paramètres avec margin: 2px;

En ôtant le margin: 2px;, le div principal se retrouve au milieu.

div.principal
	{
  background-color: #0000FF;
  
  margin-left: auto;
  margin-right: auto;

  display: compact;
  width:70%;

  /* margin: 2px; */
	}

Où, pour garder une marge de 2 pixels en haut et en bas,

div.principal
	{
  background-color: #0000FF;

  margin: 2px;
  margin-left: auto;
  margin-right: auto;

  display: compact;
  width:70%;
	}

[MissMonde]

il y a 2 indications de marge dans ton div principal : auto et 2%;

il faut choisir.

enlève les 2% et ça reviendra au centre.

[MissMonde]

j'ai été prise de vitesse

[Sans Esprit]

Les plus grand probleme que j'ai pu avoir moi avec le CSS venez du fait que j'avais oublié l'unité { px, cm,pt.... }

Les a tu toutes mises ?

[Tizel]

Merci pour toutes ces réponses, mes problémes sont en partie résolus et une grosse partie des mystéres qui entourent les CSS se sont envolés...

Je suis sur que d'ici à ce que je termine mon site, je ferais de nouveau appel à vous...

Tizel

[Loupilo]

il y a 2 indications de marge dans ton div principal : auto et 2%;

Je suis complètement à côté de la masse aujourd'hui...

Excusez mon message ci dessus. Il faut dire que j'ai vu ta CSS à travers WebDeveloper, et que tout de suite, on ne retient que la moitié...

Désolé..

A+

Loupilo

[Tizel]

Tu es tout excusé Loupilo, et je te soumet un nouveau probléme pour te rattraper

Alors, j'ai finit (grace à vos précieux conseils) la mise en place de mes différentes section (et sans utiliser de tableau s'il vous plait ).

Il y a cependant un truc qui me chifonne, pourquoi, alors que les marges du "cadre gauche" et du "cadre central" sont les même, la distance "cadre d'en-tête/cadre gauche" et la distance "cadre d'en-tête/cadre central" sont différents. Typiquement, on dirait que le cadre central ne tient pas compte du fait que le cadre d'en-tête à une marge. (Le probléme est le même que j'utilise mozilla ou IE).

Je peut faire en sorte que les distances soit les même en donnant une valeur de 4 pixels à mon cadre central... Mais je voudrais savoir pourquoi je suis obligé d'apporter cette correction...

Tizel

Page exemple

Feuille de style

[MissMonde]

Salut Tizel,

tu nous le fais chaque jour de plus en plus difficile ??

je vais bientôt abandonner, c'est trop fort pour moi.

mais je réponds une dernière fois :

les marges des éléments qui sont dans le flux normal fusionnent cad que s'applique la plus élevée (dans ce cas c'est 2px).

les marges des éléments qui ne sont pas dans le flux normal (flottants ou absolus) ne fusionnent jamais, donc nous avons 4 px.

(sous réserve de confirmation)

PS : en examinant ta feuille de style, j'ai vu que tu avais mis à certains endroits :

marging : 2px

marging-left : 15%

margin-right :15%

ton 2 px, quand il est tout seul, s'applique aux 4 côtés de ton bloc, donc tu as 2 indications de marge gauche(2px et 15%) et 2 indications de marge droite(2px et 15%).

tu as 2 possibilités pour écrire correctement le code :

1.

margin-top :2 px;

margin-left :15%;

margin-right:15%;

margin-bottom:2px;

2.

margin : 2px 15%;

[Tizel]

Merci Miss Monde pour ces quelques précisions... Je comprend mieux maintenant...

Pour ce qui est de ta remarque sur le :

marging : 2px
marging-left : 15%
margin-right :15%

je pensait que "margin:2px" fixait la marge à deux pixels (sur les 4 cotés), puis que les deux autres (left et right) écraisait la définition à 2px.

Je sais, c'est moins propre que les solutions que tu me propose, mais est ce que, si je garde ma solution, je risque d'avoir des problémes ?

Tizel

[MissMonde]

En fait, l'ordre de traitement des commandes fait qu'effectivement, tes margin à 15% écrasent les margin à 2%, puisque c'est la dernière commande qui prévaut.

Donc pas de problème, si tu les laisses dans cet ordre.

(merci, ça m'a permis de mieux comprendre et de replonger dans la théorie)

[Tizel]

Merci Miss Monde...

Malheureusement, je n'en ai pas finit de mes déboires avec les CSS :

La preuve ici : http://tizel.free.fr/algorithmes-de-tri/avant-propos.php

(le CSS étant http://tizel.free.fr/style.css ).

Il y a un espace entre la flache qui monte vers le haut et la puce centrale...

J'ai essayé plein de padding:0px, margin:0px, border:0px...

Mais ça marche po

A votre bon coeur...

Tizel

[MissMonde]

peut-être ici :

http://www.alsacreations.com/blog/index.ph...es-indesirables

je n'ai pas essayé, je ne sais pas si ça correspond à ton problème.

[Tizel]

Euh... sous IE, je n'avais aucun probléme en fait... C'était sous mozilla que le probléme se posait.

Merci beaucoup, j'ai résolu le probléme, encore une fois grace à toi.

Tizel