[CSS] Table-based layout naar CSS - Softwareontwikkeling

vrijdag 4 maart 2005 09:50

Acties:

Topicstarter

Kan iedere op een table gebaseerde layout omgezet worden in CSS?

Wanneer ik 2 kolommen m.b.v. een table maak (links een menu op basis van <ul> en rechts een document) dan wordt de linker kolom zo groot als nodig is en de overgebleven ruimte (de table vult de gehele breedte) is voor het document. Ik heb zitten proberen het in CSS te doen maar volgens mij ontkom ik er niet aan om een breedte voor de linkerkolom op te geven?

vrijdag 4 maart 2005 09:55

Acties:

Osiris

Probeer de waarde "auto" eens voor de linkerkolom

vrijdag 4 maart 2005 10:00

Acties:

MNeMoNiCS

Topicstarter

Osiris schreef op vrijdag 04 maart 2005 @ 09:55:
Probeer de waarde "auto" eens voor de linkerkolom

Moet ik ze dan beide op auto zetten? En hoe kan ik ze het beste naast elkaar plaaten (1 float of allebei absoluut positioneren)?

vrijdag 4 maart 2005 10:28

Acties:

BtM909

Watch out Guys...

Kan je misschien eens voorbeeld tonen (desnoods een schets

)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 4 maart 2005 10:42

Acties:

MNeMoNiCS

Topicstarter

BtM909 schreef op vrijdag 04 maart 2005 @ 10:28:
Kan je misschien eens voorbeeld tonen (desnoods een schets )

Een table voorbeeld dan maar; de linkerkolom wordt zo groot als nodig (als je bijvoorbeeld de lettergrootte in je browser aanpast, de rechterkolom krijgt gewoon alle overige ruimte toegewezen.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<style type="text/css">
td { border: thin solid black; padding: 1em;}
</style>
</head>
<body>

<table summary="">
  <tr>
    <td colspan="2">Header</td>
  </tr><tr>
    <td>

<ul>
  <li><a href="#">link1</a></li>
  <li><a href="#">link2</a></li>
  <li><a href="#">link3</a></li>
</ul>

    </td>
    <td>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec facilisis,
orci vitae imperdiet accumsan, justo lectus iaculis sapien, in imperdiet
eros ligula id tortor. Nullam vel magna eu eros adipiscing varius. Curabitur
eros mi, auctor mattis, tempor a, varius eu, nibh. Aliquam sit amet lectus.
Duis in lectus. In mattis dolor. Donec feugiat eros vel urna. Vestibulum vitae
purus. Nullam sapien purus, volutpat ut, suscipit et, sodales vitae, dolor.
Fusce tellus nunc, convallis et, rutrum et, facilisis ut, est. Ut arcu. Nulla
sed eros.</p>

    </td>
  </tr><tr>
    <td colspan="2">Footer</td>
  </tr>
</table>

</body>
</html>

[ Voor 17% gewijzigd door MNeMoNiCS op 04-03-2005 10:43 ]

vrijdag 4 maart 2005 11:22

Acties:

Res-q

Redder in nood?

Het makkelijkst lijkt mij toch om de linkerkolom een vaste breedte te geven... Ik heb even wat geprobeerd, maar ik kwam er met float left en right zo ff niet uit, met vaste breedte wel

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        
        <title>
            test
        </title>
        
        <style type="text/css">
            html, body  {
                    height: 100%;
                    padding: 0px;
                    margin: 0px;
                    overflow: hidden;
                    text-align: left;
                    }
            
            #container  {
                    width: 100%;
                    height: 100%;
                    padding-top: 120px;
                    padding-bottom: 30px;
                    text-align: center;
                    -moz-box-sizing: padding-box;
                    }
            
            #top        {
                    position: absolute;
                    top: 0px;
                    height: 120px;
                    width: 100%;
                    background-color: lightblue;
                    }
                    
            #middlecontainer {
                    position: relative;
                    height: 100%;
                    width: 100%;
                    overflow: auto;
                    }
            
            #left       {
                    position: absolute;
                    text-align: left;
                    left: 0px;
                    width: 170px;
                    height: 100%;
                    background-color: lightgreen;
                    }
            
            #middle     {
                    position: relative;
                    text-align: left;
                    height: 100%;
                    margin-left: 170px;
                    background-color: yellow;
                    }
                    
            #bottom     {
                    position: absolute;
                    height: 30px;
                    width: 100%;
                    bottom: 0px;
                    background-color: orange;
                    }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="top">
                header
            </div>
            
            <div id="middlecontainer">
                <div id="left">
                    <ul>
                        <li><a href="#">link1</a></li>
                        <li><a href="#">link2</a></li>
                        <li><a href="#">link3</a></li>
                    </ul>
                </div>
                
                <div id="middle">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec facilisis,
                    orci vitae imperdiet accumsan, justo lectus iaculis sapien, in imperdiet
                    eros ligula id tortor. Nullam vel magna eu eros adipiscing varius. Curabitur
                    eros mi, auctor mattis, tempor a, varius eu, nibh. Aliquam sit amet lectus.
                    Duis in lectus. In mattis dolor. Donec feugiat eros vel urna. Vestibulum vitae
                    purus. Nullam sapien purus, volutpat ut, suscipit et, sodales vitae, dolor.
                    Fusce tellus nunc, convallis et, rutrum et, facilisis ut, est. Ut arcu. Nulla
                    sed eros.
                </div>
            </div>
            
            <div id="bottom">
                footer
            </div>
        </div>
    </body>
</html>

en zo is het voorspeld!

vrijdag 4 maart 2005 11:32

Acties:

MNeMoNiCS

Topicstarter

Res-q schreef op vrijdag 04 maart 2005 @ 11:22:
Het makkelijkst lijkt mij toch om de linkerkolom een vaste breedte te geven... Ik heb even wat geprobeerd, maar ik kwam er met float left en right zo ff niet uit, met vaste breedte wel

De vraag is dus eigenlijk of je daar niet aan kan ontkomen, want het is jammer om ruimte te "verspillen" aan het menu die ook voor de hoofdtekst zelf gebruikt kan worden.

Het kan in mozilla trouwens ook met { display: table-cell } maar wat is dan nog de winst t.o.v. een "echte" table (afgezien ervan dat IE deze waarde niet kent).

vrijdag 4 maart 2005 11:35

Acties:

Res-q

Redder in nood?

mja, in bovenstaande stukje heb ik zitten kloten met float: left; en float: right voor de beide containers, maar dat helpt niet, hij plaatst dan de rechter 'cel' over de linker, en dat is niet de bedoeling. Ook met het absoluut/relatief positioneren kom ik er zo niet uit...

edit:
Als een bezoeker nou de lettergrootte aanpast en het past niet meer binnen de kolom dan gaat ie automatisch verder op de volgende regel... ik weet niet of dat een probleem is? als dat geen probleem is zie ik geen bezwaar om een vaste breedte mee te geven...

[ Voor 35% gewijzigd door Res-q op 04-03-2005 11:39 ]

en zo is het voorspeld!

vrijdag 4 maart 2005 12:11

Acties:

MNeMoNiCS

Topicstarter

Res-q schreef op vrijdag 04 maart 2005 @ 11:35:
mja, in bovenstaande stukje heb ik zitten kloten met float: left; en float: right voor de beide containers, maar dat helpt niet, hij plaatst dan de rechter 'cel' over de linker, en dat is niet de bedoeling. Ook met het absoluut/relatief positioneren kom ik er zo niet uit...

edit:
Als een bezoeker nou de lettergrootte aanpast en het past niet meer binnen de kolom dan gaat ie automatisch verder op de volgende regel... ik weet niet of dat een probleem is? als dat geen probleem is zie ik geen bezwaar om een vaste breedte mee te geven...

Bedankt voor je reactie trouwens.

Misschien ontkom ik er wel niet aan om een breedte op te geven omdat dit gewoon onmogelijk is in CSS, maar dat zou dus betekenen dat tabellen nog altijd flexibeler zijn om je pagina te ontwerpen?

vrijdag 4 maart 2005 12:18

Acties:

Res-q

Redder in nood?

Volgens mij ontkom je daar inderdaad niet aan, wel jammer inderdaad. En flexibeler zou ik tabellen nou niet direct willen noemen; neem eens een kijkje op www.csszengarden.com , en probeer dat maar eens met tabellen...

en zo is het voorspeld!

vrijdag 4 maart 2005 12:29

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Op basis van Res-q's opzet:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>test</title>
</head>

    <body>
            <h1>header</h1>
            <ul id="menuList">
                <li><a href="#">link1</a></li>
                <li><a href="#">link2</a></li>
                <li><a href="#">link3</a></li>
            </ul>
            <div id="bodyText">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec facilisis,
                    orci vitae imperdiet accumsan, justo lectus iaculis sapien, in imperdiet
                    eros ligula id tortor. Nullam vel magna eu eros adipiscing varius. Curabitur
                    eros mi, auctor mattis, tempor a, varius eu, nibh. Aliquam sit amet lectus.
                    Duis in lectus. In mattis dolor. Donec feugiat eros vel urna. Vestibulum vitae
                    purus. Nullam sapien purus, volutpat ut, suscipit et, sodales vitae, dolor.
                    Fusce tellus nunc, convallis et, rutrum et, facilisis ut, est. Ut arcu. Nulla
                    sed eros.
            </div>
            
        <div id="footer">footer</div>
    </body>
</html>

Cascading Stylesheet:

HTML, BODY {
    height: 100%; width: 100%;
    padding: 0px; margin: 0px;
    overflow: hidden;
}
H1 {
    height: 120px;
    width: 100%;
    background-color: lightblue;
}
UL#menu {
    float: left;
    width: 170px;
    height: 100%;
    background-color: lightgreen;
}         
DIV#bodyText     {
    background-color: yellow;
    height: 100%;
    overflow: auto;                
}
DIV#footer     {
    position: absolute;
    height: 30px;
    left: 0; bottom: 0;
    background-color: orange;
}

dit zou redelijk moet werken, en voor zover ik kan zien de wensen van de TS oplossen... enkel de footer kan mogelijk nog een probleempje opleveren, omdat juist dat misschien wat moeilijker wordt, en de specifieke boxmodel-problemen oplevert als je bv margin-bottom gaat gebruiken om de hoogte van het menu en bodyText niet helemaal tot onderop de pagina te laten lopen ...

wat tips:
Strip je code van alle overbodige tags:
bij <DIV><UL>[LI's]</UL></DIV> kun je ook gewoon direkt het UL-element positioneren ...
gebruik zoveel mogelijk semantisch correcte HTML en hierin is een DIV of SPAN eigenlijk een none-item.

Gebruik in CSS ook liever relatieve positionering dan absolute positionering : laat de elementen _zelf_ het werk doen en probeer niet juist teveel voor hen te specificeren ... hoe 'absoluter' je werkt, hoe sneller je in de problemen komt

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 4 maart 2005 13:06

Acties:

Res-q

Redder in nood?

Mja, wat je nu doet is het probleem verplaatsen, namelijk de UL een vaste breedte geven

. Verder werkt het op deze manier ook niet: de content komt gewoon onder het menu te staan

.

[ Voor 35% gewijzigd door Res-q op 04-03-2005 13:09 ]

en zo is het voorspeld!

vrijdag 4 maart 2005 13:11

Acties:

MNeMoNiCS

Topicstarter

RM-rf schreef op vrijdag 04 maart 2005 @ 12:29:
Op basis van Res-q's opzet:
HTML:
1
..knip..
dit zou redelijk moet werken, en voor zover ik kan zien de wensen van de TS oplossen... enkel de footer kan mogelijk nog een probleempje opleveren, omdat juist dat misschien wat moeilijker wordt, en de specifieke boxmodel-problemen oplevert als je bv margin-bottom gaat gebruiken om de hoogte van het menu en bodyText niet helemaal tot onderop de pagina te laten lopen ...

Bedankt voor alle feedback!

Als ik deze code in IE6/FF1 bekijk komen het menu en document niet naast elkaar te staan? Moet die UL niet binnen bodyText geplaatst worden? En de width van UL heeft ook hier een vaste waarde?

wat tips:
Strip je code van alle overbodige tags:
bij <DIV><UL>[LI's]</UL></DIV> kun je ook gewoon direkt het UL-element positioneren ...
gebruik zoveel mogelijk semantisch correcte HTML en hierin is een DIV of SPAN eigenlijk een none-item.

Gebruik in CSS ook liever relatieve positionering dan absolute positionering : laat de elementen _zelf_ het werk doen en probeer niet juist teveel voor hen te specificeren ... hoe 'absoluter' je werkt, hoe sneller je in de problemen komt

Klinkt allebei logisch, ik zal erop gaan letten!

vrijdag 4 maart 2005 13:46

Acties:

Jerry

Who?

RM-rf schreef op vrijdag 04 maart 2005 @ 12:29:
Op basis van Res-q's opzet:
* html *

* css *

dit zou redelijk moet werken, en voor zover ik kan zien de wensen van de TS oplossen... enkel de footer kan mogelijk nog een probleempje opleveren, omdat juist dat misschien wat moeilijker wordt, en de specifieke boxmodel-problemen oplevert als je bv margin-bottom gaat gebruiken om de hoogte van het menu en bodyText niet helemaal tot onderop de pagina te laten lopen ...

wat tips:
* tips *

Moet:

Cascading Stylesheet:

UL#menu {
    float: left;
    width: 170px;
    height: 100%;
    background-color: lightgreen;
}

Dit niet zijn:

Cascading Stylesheet:

UL#menuList {
    float: left;
    width: 170px;
    height: 100%;
    background-color: lightgreen;
}

[ Voor 51% gewijzigd door Jerry op 04-03-2005 13:48 ]

vrijdag 4 maart 2005 13:57

Acties:

Res-q

Redder in nood?

^^ scherp

Volledig uitgewerkt, incl. margins en paddings:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>test</title>
        
        <style type="text/css">
            HTML, BODY {
                height: 100%; width: 100%;
                padding: 0px; margin: 0px;
                overflow: hidden;
                }
            H1 {
                padding: 0;
                margin: 0;
                height: 120px;
                width: 100%;
                background-color: lightblue;
                }
            UL#menuList {
                padding: 0;
                margin: 0;
                float: left;
                width: 170px;
                height: 100%;
                background-color: lightgreen;
                } 
            DIV#bodyText {
                padding: 0;
                margin: 0;
                background-color: yellow;
                height: 100%;
                overflow: auto;
                }
            DIV#footer {
                position: absolute;
                width: 100%
                height: 30px;
                left: 0; bottom: 0;
                background-color: orange;
                }
        </style>
    </head>

    <body>
        <h1>header</h1>
        
        <ul id="menuList">
            <li><ahref="#">link1</a></li>
            <li><ahref="#">link2</a></li>
            <li><ahref="#">link3</a></li>
        </ul>
        
        <div id="bodyText">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec facilisis,
            orci vitae imperdiet accumsan, justo lectus iaculis sapien, in imperdiet
            eros ligula id tortor. Nullam vel magna eu eros adipiscing varius. Curabitur
            eros mi, auctor mattis, tempor a, varius eu, nibh. Aliquam sit amet lectus.
            Duis in lectus. In mattis dolor. Donec feugiat eros vel urna. Vestibulum vitae
            purus. Nullam sapien purus, volutpat ut, suscipit et, sodales vitae, dolor.
            Fusce tellus nunc, convallis et, rutrum et, facilisis ut, est. Ut arcu. Nulla
            sed eros.
        </div>
    
        <div id="footer">footer</div>
    </body>
</html>

Problemen:
• UL heeft vaste breedte
• footer is niet 100% breed

verder werkt ie prima

edit:
nog een probleem, wat iets groter is:
Bij een footer breder dan het menu en een content die langer is dan wat er op het scherm past (dus wanneer er een scrollbalk komt) valt de content weg achter de footer

. Dat heb je met het script dat ik als eerst postte niet, omdat daarbij het menu en de content en het menu in 1 container zijn gevangen

[ Voor 19% gewijzigd door Res-q op 04-03-2005 14:00 ]

en zo is het voorspeld!

vrijdag 4 maart 2005 17:46

Acties:

Verwijderd

Res-q schreef op vrijdag 04 maart 2005 @ 13:57:

edit:
nog een probleem, wat iets groter is:
Bij een footer breder dan het menu en een content die langer is dan wat er op het scherm past (dus wanneer er een scrollbalk komt) valt de content weg achter de footer . Dat heb je met het script dat ik als eerst postte niet, omdat daarbij het menu en de content en het menu in 1 container zijn gevangen

Ik heb dat inderdaad ook hier. Verder krijg ik de onderkant van de scrollbalk niet te zien, de scrollbalk is als het ware evenlang als de tekst, en die is langer dan het scherm dus zie ik de onderkant van de scrollbalk niet. (zowel IE 6 als FF 1.01)
Daarnaast heb ik een hele kleine verticale witte lijn tussen het menu en de body (dit is alleen in IE 6).

Ben zelf niet zo geskilled in css om met oplossingen te komen, maar d8 zeg het maar ff, misschien heb je er wat aan.