[CSS] Hoogte van rij instellen - Softwareontwikkeling

zaterdag 22 maart 2008 13:42

Acties:

Your ad here?

Topicstarter

Ik ben nog steeds aan het knutselen aan mijn ASCII Art Fabrieksel. Inmiddels ben ik overgestapt naar een tabel voor de opmaak van de ascii-pagina. Met CSS lukten verschillende dingen niet (menu even breed als ascii, ascii verticaal centreren) dus vandaar.

Ik heb echter niet veel ervaring met opmaak via tabellen

en ik krijg het niet voor elkaar om de hoogte van het menu goed te krijgen.

De hele pagina zit in een grote tabel met height: 100% en overflow: auto.

Als de ASCII minder dan beeldvullend is dan rekt de bovenste rij een op. Op zich wel logisch... de tabel moet worden opgerekt om 100% hoogte te bereiken, en dat wordt verdeeld over alle rijen. Het ziet er echter niet uit als het menu bijna beeldvullend is (bij hele kleine ASCII's).

Het instellen van een hoogte voor de bovenste rij of cel heeft geen effect, tenzij ik table-layout: fixed inschakel. In dat geval loopt de ascii echter uit de tabel (te zien doordat het menu niet meer meerekt) en dat is ook weer niet de bedoeling. Bovendien werkt het verticaal centreren dan niet meer.

Ik krijg dus de layout die ik wil hebben niet voor elkaar. Op zich wil ik best van tabellen afstappen (voelt vies

) maar zoals gezegd krijg ik het met CSS ook niet voor elkaar.

Er moet dus tegelijkertijd aan de volgende voorwaarden worden voldaan:
- Menu over de volledige breedte van de pagina (dit hoeft nog niet persee maar is wel mooier)
- Menu fixed height (eventueel in em... als het maar niet beeldvullend kan worden)
- ASCII horizontaal en verticaal gecentreerd

Is dat überhaupt mogelijk in CSS2?

[ Voor 15% gewijzigd door Bozozo op 22-03-2008 17:27 ]

TabCinema : NiftySplit

zaterdag 22 maart 2008 23:15

Acties:

_Thanatos_

Ja, en kaal

Ik zou niet weten waarom niet. Het menu pleur je in een <div> met "width:100%;height:6em" ofzo. Voor het mooie zou je em "position:fixed" erbij kunnen geven. De ASCII gooi je in een <pre> met "margin:auto 0;text-align:center".

Vgs mij kan dat best werken zo.

日本！🎌

zondag 23 maart 2008 00:00

Acties:

Bozozo

Your ad here?

Topicstarter

Da's niet verticaal aligned. Anders is het inderdaad niet zo moeilijk

TabCinema : NiftySplit

zondag 23 maart 2008 15:29

Acties:

Bozozo

Your ad here?

Topicstarter

Het is me gelukt! 100% height, verticaal centreren én een fixed height balk boven je content. Eigenlijk is het niet eens zo moeilijk.

Cascading Stylesheet:

    html, body {
        height: 99%;
        padding: 0;
        margin: 0;
        border: none;
    }
    table#wrapper {
        border-collapse: collapse;
        width: 100%;
        height: 100%;
        background: transparent url("menu_background.gif") repeat-x top left; //55px hoog
    }
    div#menu {
        position: absolute;
        top: 0;
        left: 0;
    }
    div#ascii {
        text-align: center;
        padding-top: 55px;
    }

HTML:

<body>
    <table id="wrapper">
        <tr>
            <td>
                <div id="menu">
                    <!-- Menu -->
                </div>
                
                <div id="ascii">
                    <!-- Verticaal gecentreerde content -->
                </div>
            </td>
        </tr>
    </table>
</body>

Dit alles wekt de illusie van een menu met achtergrond (over de volledige breedte, daarom staat de achtergrondafbeelding in de table), met daaronder vertical gecentreerde fluid content.

edit: inmiddels werkend te bewonderen

[ Voor 4% gewijzigd door Bozozo op 23-03-2008 15:31 ]

TabCinema : NiftySplit