Pseudo-Weblog

J'ai passé un peu de temps à faire des test avec CSS. Mon but était de faire disparaître les frames. Pour cela, j'ai testé deux moyens. Le premier est de faire des frames avec des tailles prédéfinies correspondant à des pourcentages de la taille de la fenêtre. Pour rajouter la possibilité à un navigateur n'utilisant pas CSS de bien afficher cette page, le corps est affiché en premier, et les menus à la fin. Le second utilise un bloc au début de la fenêtre, contenant un menu, et le second bloc est en "auto-scroll", la taille du parent étant définie comme faisant 100% de la taille de la fenêtre. Le but étant d'avoir un menu de taille variable en tête de page.

Ces tests sont disponibles sur ce site, et je laisse aux lecteurs connaissant mieux CSS que moi le soin de corriger les eventuelles fautes dans mes feuilles de style. Reste aux codeurs la responsabilité de respecter la norme et de faire en sorte que la première solution aussi bien que la seconde s'affichent comme prévu. Il est a noter que votre navigateur doit suivre la RFC2616 (HTTP) section 14.14 pour atteindre ces documents. Si vous n'y arrivez pas, accedez-y par l'URI complete: test 1 et test 2.

Pour une meilleure lecture, voici la feuille de style de la première solution. J'ai réuni les deux feuilles de style dans le cas d'un navigateur comprenant @import

    div.fbody {
        background-color: #BBB;
        color: black;
        position: fixed;
        top: 15%;
        left: 20%;
        height: 85%;
        width: 80%;
        overflow: auto;
        margin: 0px;
    }
    div.ftop {
        background-color: #DDD;
        color: black;
        position: fixed;
        top: 0px;
        left: 0px;
        height: 15%;
        width: 100%;
        overflow: auto;
        margin: 0px;
        display: block;
    }
    div.fleft {
        background-color: #FFF;
        color: black;
        position: fixed;
        top: 20%;
        left: 0px;
        height: 85%;
        width: 20%;
        overflow: auto;
        margin: 0px;
        display: block;
    }
    .hiddenlist {
        list-style-type: none;
    }
    div.fnone {
        background-color: white;
        color: red;
        display: none;
    }
    

Et voici la feuille de style de la seconde solution. La aussi, j'ai réuni les deux feuilles de style pour simuler un navigateur comprenant @import

    div.fbody {
        background-color: #BBB;
        color: black;
        overflow: auto;
        margin: 0px;
    }
    div.ftop {
        background-color: #DDD;
        color: black;
        overflow: auto;
        margin: 0px;
        display: block;
    }
    div.fnone {
        background-color: white;
        color: red;
        display: none;
    }
    html {
        margin: 0px;
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    body {
        margin: 0px;
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: auto;
    }