Centrér l'ensemble d'un site dans la hauteur

lala 007 · Message par **lala 007** » 14 févr. 2009, 12:59

Bonjour à tous,

Je suis en train de faire un site qui tient entièrement dans un tableau carré de 600 x 600 px que je voudrais totalement centrer sur la page...

Mon problème c'est que je n'ai pas trouvé de solution pour centrer mon tableau dans la hauteur

J'ai posé un premier brouillon ici http://www.patapons.ch/triptih.html

Vous avez une solution à me proposer ?

Merci
Alain

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 14 févr. 2009, 13:55

Oui...

Ne pas utiliser de tableaux pour faire un site web ( GROSSE erreur technique)!

http://www.cybercodeur.net/weblog/prese ... index.html
http://www.alsacreations.com/tuto/lire/ ... leaux.html
http://www.pompage.net/pompe/tablevscss/

Zefling · Message par **Zefling** » 14 févr. 2009, 15:40

Sauf qu'à ma connaissance le tableau est le seul moyen de faire ça : body, table { height 100% }.

Sinon il faut passer par du javascript. C'est pas très compliqué, et peut-être préférable.

Fabrice.Tres.Net : Tu ne réponds pas à sa question.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 14 févr. 2009, 15:53

Mais comme il voulait déjà centrer un tableau... ce qui est différent de centrer un div en hauteur.

On peut centrer un div en hauteur en utilisant l'aspect dynamique des pages: il suffit de générer un centrage en hauteur dans un css en tenant compte de la taille de l'écran !

On peut aussi, tout simplement, le mettre à une valeur arbitraire du haut: par exemple 10% du top ou 200px,...

Mongo Bob · Message par **Mongo Bob** » 14 févr. 2009, 16:17

Là, en plus, le tableau ne se justifie pas du tout, il ne contient que des images (6 en tout), rappelons que les tableaux sont destinés aux données (petits textes, chiffres...).
C'est tout à fait anti-accessible, les robots des moteurs de recherche n'indexeront jamais cette page ni les machines pour non-voyants, qui ne se soucient pas des images.
Si on désactive les images avec Webdevelopper, il n'y a plus que l'attribut "alt" de l'image du logo Triptih qui existe! C'est tout ce qui sera pris en compte par les machines et elles ne sauront pas trop quoi en faire.

Même si l'accessibilité aux machines citées n'est pas ton souci, tu aurais quand même meilleur intérêt à mettre ton logo en texte dans un élément <h1>, les deux boutons dans un <ul> avec deux <li> pour les entrées dans le site anglophone et francophone, avec les images correspondantes, mettre l'ensemble dans un <div> que tu voudras centrer verticalement et tu auras le même problème qu'avec le tableau au départ!

Alors, pour centrer verticalement le bloc conteneur div, faut du css : il faudra le mettre en "position:absolute", lui donner "top:50%" et une valeur de "margin-top" négative égale à la moitié de sa hauteur (600px pour toi), bref :

Code : Tout sélectionner

#divconteneur {
position:absolute;
height:600px;
top:50%;
margin-top:-300px;
}

Mais du coup, tu ne pourras plus utiliser "margin-left: auto; margin-right: auto;" pour le centrer horizontalement, ce div conteneur (ça ne marche que pour les éléments dans le flux, ou non positionnés, disons), faudra que tu appliques le même traitement à l'horizontale, donc, comme tu as dit que c'était un carré de 600x600px, rajouter les 3 lignes du bas :

Code : Tout sélectionner

#divconteneur {
position:absolute;
height:600px;
top:50%;
margin-top:-300px;
width:600px;
left:50%;
margin-left:-300px;
}

Sans passer par le positionnement absolu, je vois pas (Ymai? On peut faire plus simple?

).

<edit>Plus simple :

Fabrice a écrit :On peut aussi, tout simplement, le mettre à une valeur arbitraire du haut: par exemple 10% du top ou 200px,...

</edit>
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Zefling · Message par **Zefling** » 14 févr. 2009, 16:36

Tien je connaissais pas ça. Mais ça ne fonctionne pas si on ne connais pas la taille du contenu. Mais ici elle est connu donc tout vas bien.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Mongo Bob · Message par **Mongo Bob** » 14 févr. 2009, 18:52

Note que tu peux remplacer les px par des %, et que ça marche aussi! en s'adaptant aux différents types d'affichages moniteurs.

Fabrice a écrit :On peut aussi, tout simplement, le mettre à une valeur arbitraire du haut: par exemple 10% du top ou 200px,...

Je reviens sur cette solution de Fabrice, justement, et je me dis finalement que ça va pas marcher sur certains affichages : l'élément n'apparaîtra pas centré, même vaguement, aussi bien sur un écran 1024x768 que sur un 1440x900.
de même

Fabrice a écrit : il suffit de générer un centrage en hauteur dans un css en tenant compte de la taille de l'écran !

là non plus, parce que justement, les tailles d'écrans des visiteurs ne sont jamais les mêmes...
A moins d'être pas trop maniaque et de centrer à peu près, et pourquoi pas, tant que l'élément centré n'est lui-même pas trop haut, ça peut très bien passer...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 14 févr. 2009, 19:04

Mongo Bob a écrit :
Fabrice a écrit :On peut aussi, tout simplement, le mettre à une valeur arbitraire du haut: par exemple 10% du top ou 200px,...
Je reviens sur cette solution de Fabrice, justement, et je me dis finalement que ça va pas marcher sur certains affichages : l'élément n'apparaîtra pas centré, même vaguement, aussi bien sur un écran 1024x768 que sur un 1440x900.
de même
Fabrice a écrit : il suffit de générer un centrage en hauteur dans un css en tenant compte de la taille de l'écran !
là non plus, parce que justement, les tailles d'écrans des visiteurs ne sont jamais les mêmes...
A moins d'être pas trop maniaque et de centrer à peu près, et pourquoi pas, tant que l'élément centré n'est lui-même pas trop haut, ça peut très bien passer...

Dans le premier cas, cela n'a pas pour but de le centrer, mais de le mettre arbitrairement décalé du haut.

Dans le second cas, cela implique de gérer une session en php, on récupère la taille de l'écran, et on génère un fichier css centrant la div en tenant compte de la taille de l'écran!

Suis-je plus clair maintenant que la nuit est tombée?

Mongo Bob · Message par **Mongo Bob** » 14 févr. 2009, 19:17

Fabrice a écrit :Dans le second cas, cela implique de gérer une session en php,

ah mais on en apprend des choses! C'est qu'il va tout nous dire, mais... petit à petit, hein? Ca se mérite!

Fabrice a écrit :Suis-je plus clair maintenant que la nuit est tombée?

oui. Et c'est le moins qu'on puisse dire!

à+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Geckozone

Centrér l'ensemble d'un site dans la hauteur

Centrér l'ensemble d'un site dans la hauteur

Qui est en ligne ?