Discussion :

[lvr]

Bonjour,

J'essaye de centrer un tableau sur l'entierté de la fenêtre tout en ayant un DIV servant de menu en haut à droite.

Le code est définit comme suit:
[HTML]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="Menu">....</div>
<table align="center">...</table>

[CSS]

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#Menu {
  display: block;
  float: right;
  top: 10px
}

Le tableau se retrouve centré sur l'espace disponible à gauche du menu et pas sur l'entierté de la fenêtre.

J'ai testé sur Opera 9.10 et Firefox 2.0

Comme faire en sorte que ce tableau soit centré sur la largeur de la fenêtre ?

Merci,

Laurent

[Olimatou]

L'idéal est d'utiliser une autre DIV qui servira de container à la table et ensuite l'utiliser pour positionner celle-ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="MonContainer"><table class="MaTable">...</table></div>
<div class="MonMenu">...</div>

De cette manière, il est possible de définir la position relative du tableau par rapport à la division en utilisant les styles correspondant. la division peut alors servir de container à tout autre élément et la table être dimensionnée à Width :100% (de la largeur de la division, bien sûr, donc la largeur de la division devra être de 100% également pour occuper la largeur de la fenêtre ...).

De plus, le style CSS porte uniquement sur la division, ce qui n'est pas suffisant. Il faut définir les propriété à assigner à la table dans une class (C'est plus facile à gérer pour faire des modifications plus tard, ou des tests, que de parcourir tout le code à la recherche des différents éléments.)

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.MonMenu {...}
.MonContainer {...}
table.MaTable {...} /* pour réduire la class MaTable aux éléments table uniquement */

Enfin, et peut être le plus important, en utilisant des éléments positionnés par FLOAT, et/(ou) avec un positionnement absolu, le plus simple est de déplacer les balises concernant ceux-ci en fin de page pour éviter tout les débordements et mauvais render sur les différents navigateurs. Ne pas oublier que tant que le positionnement d'un élément n'est pas défini sur absolu, chaque positionnement d'élément reste relatif à l'élément qui le précède...

Pour régler le chevauchement des différents containers pour l'affichage, la propriété de style CSS << z-index >> peut être utilisée...

En positionnement absolu, les divisions pourrons être positionnées strictement à l'endroit désiré (top, left, etc...).

Et voilà...

toi moi

[trotters213]

Tu peux définir ton menu en position:absolute.
Pour ce qui est du centrage de ton tableau : il suffit que tu lui donnes une largeur et que tu utilises margin:0 auto; dans ton CSS.