centrer un bloc sur la hauteur, avec hauteur en pourcents

ViPHP
ViPHP | 3607 Messages

04 oct. 2006, 13:37

BOnjour à tous!
Je continu la réalisation de ma petite gallerie (cf http://www.phpfrance.com/forums/voir_sujet-22850.php que j'ai résolu tt seul parceque j'avais fait une bête erreur :oops: ).
et voilà mon problème actuellement, donc ma page est divisée en deux partie:
une partie à gauche où sont placées les miniatures et une partie à droite où la photo s'affiche en grand.
bon alors j'en arrive à mon problème, je voudrait pouvoir centrer mon bloc de gauche dans la hauteur, et si possible mettre sa hauteur en pourcents (ou alors une ahuteur minimale qui irait avec toutes les résolutions au pire)
j'ai essayer de faire par exemple:

Code : Tout sélectionner

#bloc { width: 80%; margin-top: 10%; //la moitiée de la hauteur qui reste }
mais ça ne marche pas, je ne sais pas trop comment m'y prendre, je vous met içi le code "simplifié":

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="./css/styles.css" media="screen" /> <script type="text/javascript" src="./js/galerie.js"></script> <title>Galerie photo</title> </head> <body> <div id="galerie"> <ul id="galerie_mini"> //miniatures </ul> <dl id="photo"> // grande photo </dl> </div> </body> </html>
et voici mon code css:

Code : Tout sélectionner

body{ background: #eed ; margin:0px; padding:0px; } div#galerie { width: 100% ; padding: 0px ; margin: 0px ; text-align: center ; font: 0.9em Georgia, serif ; } ul#galerie_mini { display: block; margin: 0 ; padding: 0 ; list-style-type: none ; float: left; height: 500px; margin-top: 50px; width: 200px; overflow: auto; } ul#galerie_mini li { } ul#galerie_mini li a img { margin: 2px 1px ; border: 1px solid #dcb ; } dl#photo { float: top; margin: 0 auto ; } dl#photo dt { font: italic 2.5em/1.5em Georgia, serif ; color: #dcb ; padding: 0px; margin: 0px; } dl#photo dd { margin: 0 ; } dl#photo img { border: 1px solid #dcb ; }
je remet le lien vers la gallerie: http://puffins.fr/uploadislande/
Voilà en espérant que quelqun ai la solution ... :!:
merci d'avance

Mammouth du PHP | 2937 Messages

05 oct. 2006, 11:15

Salut!

Pour le centrage vertical des blocs en CSS avec une hauteur en pourcentage, il faut régler les marges verticales, chacune à la moitié de la hauteur desdits blocs.

Code : Tout sélectionner

#bloc { height: 50%; margin: 25% 0; }
Toutefois, si l'élément de bloc est peu rempli, il n'occupera pas toute la hauteur définie. En outre, sous IE, si le bloc est très rempli, le centrage vertical se perdra en bas.