[presque resolu]Centrer verticalement une div

salut à tous

j'ai un petit soucis pour centrer verticalement une div...
en fait c'est pour un message de redirection, la div etant de petite taille, j'aimerai qu'elle soit centrer verticalement.

voici le code xhtml:

<div id="page">
<h3>blablabla</h3>
<p class="bidule">blablablablablabla<a class="lien" href="la-bas.com">cliquer ici</a></p>
</div>

et pour le css:

#page {
width: 525px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
h3 {
text-align: center
margin: 0;
padding: 0;
border 3px double blue;
}
bidule {
color: green;
text-align: center;
}
a:link.lien {
color: red;
}

j'ai essayer vertical-align sur "page" sans resultat
j'ai essayer aussi de mettre les marges top et bottom en auto sur "page" sans resultat

pouvez vous m'aider?

Ps. si quelqu'un ce sent aussi l'âme d'un bon prof , j'ai jamais rien compris à vertical-align
Modifié par beroots (14 Sep 2006 - 13:04)

Bonjour beroots,

Connais-tu la FAQ d'alsa : une vraie caverne d'Ali Baba ?

Modifié par Vero (14 Sep 2006 - 01:29)

je vient de faire un tout dans les tuto d'Alsa et j'ai vue cette methode:

#global {
position:absolute;
left: 50%; 
top: 50%;
width: 700px;
height: 400px;
margin-top: -200px; /* moitié de la hauteur */
margin-left: -350px; /* moitié de la largeur */
border: 1px solid #000;
}

et en plus tout fonctionne

pour ce qui est du cour de vertical-align, c'était dans le tuto donc c'est OK

Encore merci à la team d'Alsa pour ces exelents tuto

Bonjour,

Aïe

Ces centrages par des marges négatives provoquent un rognage inéluctable du contenu pour peu que la zone d'affichage du navigateur soit inférieure à ce qui est supposé.

A proscrire.

oui mais il n'y a pas de raison si je stipule width et height. nan?

sinon display: table-cell mais sa sera pas compatible avec touts les navigateurs si j'ai bien compris...

aurai tu une autre methode à me proposer sinon?

merci d'avance

beroots a écrit :
oui mais il n'y a pas de raison si je stipule width et height. nan?

Si : lorsque la largeur du conteneur initial (dépendant de la largeur de la fenêtre d'affichage) est inférieure à celle de ta boîte, les deux limites de bordures gauche et droite de la boîte se trouvent nécessairement à l'extérieur de ce conteneur initial (idem pour les limites verticales).
Le contenu déborde donc du conteneur initial : il y a overflow. Mais l'overflow ne peut jouer en CSS que dans une seule direction à la fois (à droite ou à gauche), et ce qui dépasse à gauche est donc automatiquement "clippé" (cf propriété clip).

beroots a écrit :

aurai tu une autre methode à me proposer sinon?

Faute de display-table (en effet), un simple tableau HTML à une seule cellule.

Mais quelle que soit la solution, le centrage d'un contenu de quelques mots dans une page vide sera déroutant pour certains utilisateurs qui n'auront pas immédiatement une perception complète de la page. Par exemple, certains utilisateurs de loupe d'écran qui ne la visualisent que par fraction successives, et qui ont toutes les chances de commencer en haut à gauche, là où il n'y a rien.

Si la redirection est automatique au bout de n secondes, le résultat sera typiquement non accessible (ils n'ont pas nécessairement le temps d'atteindre le message qui leur permet d'identifier ce qui va se passer).

Si la redirection n'est pas automatique, ce sera formellement accessible, mais périlleux: l'utilisateur peut renoncer à tout explorer et se dire : "bon, page blanche, il y a un bug quelque-part, je suis coincé".

Mieux vaut, pour des pages de redirection, prévoir, à défaut de mise en page "complète", quelque-chose qui occupe la zone d'affichage de la même manière qu'une page courante...
Modifié par Laurent Denis (15 Sep 2006 - 08:03)

Laurent Denis a écrit :


Si : lorsque la largeur du conteneur initial (dépendant de la largeur de la fenêtre d'affichage) est inférieure à celle de ta boîte, les deux limites de bordures gauche et droite de la boîte se trouvent nécessairement à l'extérieur de ce conteneur initial (idem pour les limites verticales).
Le contenu déborde donc du conteneur initial : il y a overflow. Mais l'overflow ne peut jouer en CSS que dans une seule direction à la fois (à droite ou à gauche), et ce qui dépasse à gauche est donc automatiquement "clippé" (cf propriété clip).

mais si c'est sur le conteneur que tu applique les marges negatives?
j'ai tester avec IE6 FF Opera netscape et Konqueror et ce aussi avec le mode plein ecran quand il est disponible. Tout fonctionne très bien pourtant

peut être que cette méthode est juste à adapter au cas par cas?