18079 sujets

Questions générales et questions de débutants

Centrage vertical en design fluide

Bonjour à tous Smiley smile

Une petite chose que j'ai trouvée et qui pourrait compléter le tutoriel sur le centrage de Raphaël.

Soit html :
<!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" />
        <title>Mise en page fluide pour conteneur centré suivant x et y.</title>

        
    </head>
    <body>

        <div id="conteneur">
            <h1 class="firstelement">Mise en page fluide pour conteneur centré suivant x et y.</h1>
            <p>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin id est non mi volutpat eleifend. Maecenas commodo nunc et eros. Nulla sit amet metus. Duis sit amet leo vel justo sollicitudin mattis. Integer tincidunt arcu vel elit. Nunc consectetuer velit eu massa fermentum lacinia. Mauris purus leo, egestas non, euismod nec, congue laoreet, lorem. Donec est wisi, molestie vitae, auctor et, bibendum sed, augue. Morbi mattis dolor ac sapien. Nulla lobortis lacus ac neque. Morbi sapien metus, accumsan non, bibendum at, ornare sed, sem. Nulla nisl elit, sagittis vel, auctor at, ultrices eget, enim. Proin in leo. Ut convallis.
            </p>
        </div>

    </body>
</html>


et css :
body,html {
            height:100%;
            margin:0;
            padding:0;
            overflow:hidden;
            }

            body {
            text-align:center;
            }

            #conteneur {
            text-align:left;
            width:80%;
            height:80%;
            margin:auto;
            padding:0 10px;
            background:#aaa;
            position:relative;
            top:10%;
            overflow:auto;
            }
            
            .firstelement {
            margin-top:0;/* pour résoudre un petit problème avec opera */
            padding-top:1em;
            }


Exemple

Vous en pensez quoi ?
Modifié par clb56 (27 Jul 2005 - 11:16)
moi j'aime beaucoup ! ça pallie a pas mal d'inconvénients de la technique des marges négatives.

Je pense que je vais utiliser ça ! Pour le site sur lequel je bosse, je voulais "tout dans un rectangle de taille fixe centré". Et bien avec ta méthode, il me suffit de donner une taille fixe à #conteneur. Le coup du top:10%; est trés bien aussi puisqu'on s'affranchit de la problématique de centrage vertical.
Au final, la solution est visuellement assez proche d'un centrage horiz+vert, et est beaucoup plus performante puisqu'elle calle ton conteneur sur le bord du browser, alors qu'avec les marges négatives, tu caches toute une partie du contenu pour peu que la résolution soit insuffisante. Pour une consultation sur un terminal embarqué ou PDA avec petits écrans, ya pas photo je pense.

Il doit surement y avoir a redire, mais, de on point de vue, je préfère ça Smiley smile

au travail !
clb56 a écrit :

Vous en pensez quoi ?


C'est une application logique et bien combinée du centrage horizontale par les marges "auto" et de ce fichu centrage vertical dont je ne parviens toujours pas, malgré tous mes efforts, à comprendre l'intérêt dans un media non paginé Smiley rolleyes

C'est bien vu, en tous cas.
Laurent Denis a écrit :

ce fichu centrage vertical dont je ne parviens toujours pas, malgré tous mes efforts, à comprendre l'intérêt dans un media non paginé Smiley rolleyes


+1 Smiley cligne

C'est sans doute la question la plus sévère à propos des propriétés de style. Au delà de la séduction (de l'auto séduction ?) cela est il bien raisonnable ?
Bonne nuit.
Sans vouloir faire le rabat joie, puisqu'il nous est demandé de dire ce qu'on en pense : Sur IE-Mac c'est la page blanche totale et comme dirait tancrede : y'a pas photo ! (bien que le code soit là.)
Sur Safari 1.2 le bloc reste désespérément collé au plafond.
En ajoutant un vaste contenu à ton bloc : cela revient à avoir un écran dans l'écran. Un peu comme les poupées russes. Sur les navigateurs ou cette méthode fonctionne c'est un effet qui est à ajouter à la panoplie du webmaster.

Voir la proposition de clb56 / alternative de centrage au volume de contenu légèrement augmenté.
<edit = j'ai fait un petit essai avec une hauteur de body à 150% pour voir si ça pouvait faire descendre le bloc sur Safari... que Niet. Mais sur les Gecko ça marche bien. />
<re-edit = Nouvel essai : le bloc faisant 80% largeur/hauteur, une tentative en indiquant margin: 10% au lieu de "auto". A peu près bon sur Safari presque centré verticalement mais sur les autres beaucoup trop bas... dommage />
Modifié par Aureance (05 Aug 2005 - 04:22)
Sujet clos
Aller à