• [^] # Re: C'est une façon de penser

    Posté par . En réponse au journal Positionnement CSS. Évalué à 3.

    Moi, je rêve de déclaration dans ce style :

    HTML :

    [div id="container"]
    [div id="leftPane"]
    [div id="searchBox"]
    ...
    [/div]
    [div id="menu"]
    ...
    [/div]
    [/div]
    [div id="rightPane"]
    [div id="navigation"]
    ...
    [/div]
    [div id="content"]
    ...
    [/div]
    [/div]
    [/div]

    CSS :

    #container {
    position: centered; /* centered in browser window */
    min-margin: 2em; /* if browser window too little, keep 2em as margin */
    width: 65em;
    height: 45em;
    }

    #leftPane {
    position: left; /* At the left in container */
    width: 12em;
    /* height automatically herited from container */
    }

    #rightPane {
    position: fill; /* fill container space */
    }

    #searchBox {
    position: top; /* At the top in leftPane */
    height: 3em;
    /* width automatically herited from leftPane */
    }

    #menu {
    position: fill; /* fill leftPane space */
    }

    #navigation {
    position: top; /* At the top in rightPane */
    height: 3em;
    /* width automatically herited from rightPane */
    }

    #content {
    position: fill; /* fill rightPane space */
    overflow:auto;
    }


    ----------------------------

    Ca permettrait de faire les layout bcp plus simplement ... Ici, pour les tailles et les positions, on s'y perd ... On ne sait plus qui hérite de qui, si les pourcents sont par rapport au parent ou au browser, ...