Is deze layout mogelijk met divs? - Softwareontwikkeling

zondag 2 maart 2008 02:19

Acties:

Verwijderd

Topicstarter

Ik heb veel geprobeerd, maar ik krijg deze layout niet voor elkaar met divs...

het probleem is dat de layout in width en height het browser venster moet vullen, dus de footer staat altijd onderaan. het gedeelte waar de tekst/content in komt, vult het gedeelte tussen de header en de footer op, dus kan variabel zijn (zeg maar 100% height), maar moet een eigen scrollbar krijgen als de content te groot wordt. De header en footer enzo hebben een fixed height.

Is deze layout uberhaupt mogelijk?

http://img205.imageshack.us/my.php?image=templatelh1.jpg

zondag 2 maart 2008 03:08

Acties:

Startups

Deze layout is volgens mij gewoon te doen met css.

Wat zou het struikelblok moeten zijn?

_{Zou je je post kunnen aanvullen met meer informatie en een eventuele link naar je probeersel, zodat we kunnen zien hoe ver je bent gekomen. Als je nog niets hebt, kun je bijv. met zoiets beginnen http://www.intensivstation.ch/files/en_templates/temp05.html}

[ Voor 19% gewijzigd door Startups op 02-03-2008 03:13 ]

zondag 2 maart 2008 03:26

Acties:

disjfa

be

Is mogenlijk. Maar is het niet belangrijker inhoud te hebben zodat je footer onderaan staat ipv eerst ervanuitgaan dat je footer onderaan moet staan

disjfa - disj·fa (meneer)
disjfa.nl

zondag 2 maart 2008 03:26

Acties:

Verwijderd

Ja dat kan:

<div style="border: 1px solid #ff0000; height: 100%; width: 100%;">
<div style="border: 1px solid #ff0000; position: absolute; top: 0px; height: 100px;"> Header </div>
<div style="border: 1px solid #00ff00; position: absolute; top: 100px; bottom: 100px;">
Content
</div>
<div style="border: 1px solid #ff0000; position: absolute; height: 100px; width: 100%; bottom: 0px;"> Footer </div>
</div>

Gewoon je divs absolute positioneren en dan met bottom en right gaan werken om ze vaste maten te geven. Eventueel nog iets met overflow ofzo maar dat had je zelf vast al wel gevonden

[ Voor 20% gewijzigd door Verwijderd op 02-03-2008 03:29 ]

zondag 2 maart 2008 03:31

Acties:

Nijn

Ik hoop niet dat je dit serieus meent... Allereerst gaat die eerste div geen enkel effect hebben omdat de viewport geen height van 100% heeft. Je moet dus beginnen bij html en body.

Daarnaast maak je heel wat gebruik van position: absoluut, wat eigenlijk vrijwel altijd vermeden moet worden vanwegen de enorme nadelen die eraan vast kleven. Je haalt de objecten daarmee uit de normale flow van de pagina met alle gevolgen van dien.

Aan de TS: Kijk is naar negatieve margins en floats.

zondag 2 maart 2008 03:31

Acties:

disjfa

be

Verwijderd schreef op zondag 02 maart 2008 @ 03:26:
Ja dat kan:

En als je dan content gaat krijgen gaat je inhoud over de footer div. Lekker handig

disjfa - disj·fa (meneer)
disjfa.nl

zondag 2 maart 2008 03:40

Acties:

Verwijderd

disjfa schreef op zondag 02 maart 2008 @ 03:31:
[...]

En als je dan content gaat krijgen gaat je inhoud over de footer div. Lekker handig

Iets met overflow: scroll ofzo, maar dat kan hij vast zelf wel uitvinden. En ja, dat hij met <html> en <body> moet beginnen dat mag hij ook zelf uitzoeken, daar is het nu even te laat voor.

zondag 2 maart 2008 03:42

Acties:

Startups

Verwijderd schreef op zondag 02 maart 2008 @ 03:26:
Ja dat kan:

<div style="border: 1px solid #ff0000; height: 100%; width: 100%;">
<div style="border: 1px solid #ff0000; position: absolute; top: 0px; height: 100px;"> Header </div>
<div style="border: 1px solid #00ff00; position: absolute; top: 100px; bottom: 100px;">
Content
</div>
<div style="border: 1px solid #ff0000; position: absolute; height: 100px; width: 100%; bottom: 0px;"> Footer </div>
</div>

Gewoon je divs absolute positioneren en dan met bottom en right gaan werken om ze vaste maten te geven. Eventueel nog iets met overflow ofzo maar dat had je zelf vast al wel gevonden

Ik vrees dat dit niet gaat werken,

Maar als TS zijn probeersel plaatst, kunnen we hem wat beter helpen.

zondag 2 maart 2008 03:53

Acties:

Verwijderd

Misschien heb je ook hier wat aan. Als je hetzelfde wil bereiken als de TS van dat topic, dan is het wel mogelijk, maar niet in Internet Explorer. Tenminste... met HTML en CSS alleen. Misschien kun je om IE's bugs heen werken met wat slimme javascript.

zondag 2 maart 2008 04:35

Acties:

Verwijderd

Verwijderd schreef op zondag 02 maart 2008 @ 03:53:
Misschien heb je ook hier wat aan. Als je hetzelfde wil bereiken als de TS van dat topic, dan is het wel mogelijk, maar niet in Internet Explorer. Tenminste... met HTML en CSS alleen. Misschien kun je om IE's bugs heen werken met wat slimme javascript.

Zoiets?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body onload="resize()" onresize="resize()" style="margin: 0px;">

<div style="border: 1px solid #ff0000; width: 99%; height: 170px;"> Header </div>
<div style="border: 1px solid #ff0000; width: 99%; height: 30px;"> Menu </div>
<div id="left" style="border: 1px solid #00ff00; width: 200px; float: left; overflow: scroll;"> Blaat </div>
<div id="content" style="border: 1px solid #00ff00; float: left; overflow: scroll;">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
</div>
<div id="right" style="border: 1px solid #00ff00; width: 150px; float: left;"> Blaat </div>
<div style="border: 1px solid #ff0000; height: 22px; width: 99%; float: left;"> Footer </div>

<script type="text/javascript"> 
function resize(){ 
    document.getElementById('content').style.height = (document.documentElement.clientHeight - 232) + "px";
    document.getElementById('left').style.height = (document.documentElement.clientHeight - 232) + "px";
    document.getElementById('right').style.height = (document.documentElement.clientHeight - 232) + "px";
    document.getElementById('content').style.width = (document.documentElement.clientWidth - 380) + "px";
}
</script>
</body>
</html>

Breedtes en hoogtes iets te klein genomen omdat er borders zijn en je anders scrollbalken krijgt.
Internet Explorer gaat niet goed met het bottom element om, anders had mijn vorige voorbeeld wel gewoon gewerkt. (in firefox gaat het wel goed!)

zondag 2 maart 2008 05:23

Acties:

Verwijderd

In het topic dat ik net aanhaalde staat een versie zonder javascript die ook in alle moderne browsers (non-IE) werkt: Zillion01 in "\[HTML\CSS] Scrollbar komt niet in het ju..."

Als je daaraan in de <head> wat IE-specific css en js toevoegt ben je even klaar (tot IE8 de boel misschien weer onveilig komt maken):

HTML:

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="iehacks.css">
<script type="text/javascript" src="iehacks.js"</script>
<[endif]-->

zondag 2 maart 2008 11:25

Acties:

Verwijderd

Topicstarter

dit was trouwens wat ik had::
het probleem was dat de content de hoogte van het browser scherm aanneemt, en de footer ook niet op de bottom blijft.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>title</title>
    <style>

body {
    margin: 0px;
}

#page-container {
    margin: 0px; 
    width: 100%;
}

#header {
    background-color: blue; 
    width: 100%; 
    height: 80px;
}
#nav {
    background-color: gray; 
    width: 100%; 
    height: 80px;
    
}
#sidebar {
    left: 0px; 
    width: 80px; 
    height: 400px;
    position: absolute; 
    background-color: purple;
}
#content {
    background-color: green;
    height: 400px;
    margin-left: 80px;
    margin-right: 250px;
    overflow: auto;
}

#sidebar-b {
    position: absolute;
    top: 160px;
    right: 0px; 
    width: 250px;
    height: 400px;
    background-color: orange;
    overflow: auto;
}

#footer {
    clear: both; 
    background-color: yellow; 
    height: 16px;
}
</style>

</head>

<body>

<div id="page-container">
    <div id="header">header</div>
    <div id="nav">navigatie</div>
    <div id="sidebar">A</div>
    <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin leo felis, tincidunt at, gravida vel, feugiat eu, urna. Quisque sodales, ipsum eu tristique volutpat, arcu lorem posuere urna, ut ullamcorper nisi quam in dui. Morbi volutpat leo consectetuer diam viverra varius. Curabitur luctus hendrerit turpis. Mauris aliquet tellus vitae ipsum. Curabitur nec purus non ipsum lobortis pretium. Morbi eget purus. Vivamus vulputate diam eget ipsum. Nullam leo. Donec lectus. Phasellus mattis ultricies metus.

Ut posuere metus eget sem. Suspendisse diam diam, imperdiet sed, varius eu, tempus ac, lorem. In porta pretium nibh. Maecenas hendrerit risus sed magna. Duis aliquam nunc. Vivamus molestie aliquam magna. Suspendisse lacinia dapibus urna. Sed consequat lorem sed eros. Donec rhoncus lorem non libero. Aenean erat dolor, vulputate vitae, condimentum tristique, tempor vitae, leo. Quisque ipsum leo, sagittis in, imperdiet in, cursus sed, augue. Maecenas cursus nibh porta orci.

Aliquam commodo tincidunt lacus. Nullam sodales. Fusce nec enim. Suspendisse ac tellus. Nam nulla. Praesent a lacus. Suspendisse aliquam mi at nisi. Aenean ac felis. Etiam vestibulum. Proin vitae tortor. Proin quis ligula. Vivamus est. Maecenas nec nibh. In quis urna.

Aenean sagittis metus at mauris. Duis vel mauris. Aenean elit nisi, nonummy at, sodales eget, varius non, massa. Nunc sit amet mauris. In risus velit, blandit sit amet, mollis eu, gravida vitae, dui. Vestibulum dolor. Mauris ac tellus non dui feugiat posuere. Nam ut sapien vitae lectus malesuada elementum. Mauris sodales. Suspendisse libero lacus, facilisis non, ultricies ac, imperdiet at, magna. Duis ac dui. </div>
    <div id="sidebar-b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin leo felis, tincidunt at, gravida vel, feugiat eu, urna. Quisque sodales, ipsum eu tristique volutpat, arcu lorem posuere urna, ut ullamcorper nisi quam in dui. Morbi volutpat leo consectetuer diam viverra varius. Curabitur luctus hendrerit turpis. Mauris aliquet tellus vitae ipsum. Curabitur nec purus non ipsum lobortis pretium. Morbi eget purus. Vivamus vulputate diam eget ipsum. Nullam leo. Donec lectus. Phasellus mattis ultricies metus.Aenean sagittis metus at mauris. Duis vel mauris. Aenean elit nisi, nonummy at, sodales eget, varius non, massa. Nunc sit amet mauris. In risus velit, blandit sit amet, mollis eu, gravida vitae, dui. Vestibulum dolor. Mauris ac tellus non dui feugiat posuere. Nam ut sapien vitae lectus malesuada elementum. Mauris sodales. Suspendisse libero lacus, facilisis non, ultricies ac, imperdiet at, magna. Duis ac dui.
    </div>
    <div id="footer">Footer</div>
</div>

</body>
</html>

zondag 2 maart 2008 11:33

Acties:

Tomfish

code:

#footer {
    clear: both; 
    background-color: yellow; 
    height: 16px;
}

Waar staat dan dat de footer beneden moet blijven?

zondag 2 maart 2008 11:48

Acties:

Verwijderd

Topicstarter

zodra ik hoogtes ga wijzigen naar procenten dan gaat alles mis

Ik weet dat je wel een footer absolute met bottom: 0 kan gebruiken en dan de andere divs een margin-bottom van de footer hoogte moet geven, maar het is de 100% hoogte van de content die vervolgens scrollbaar wordt die erg lastig is

[ Voor 64% gewijzigd door Verwijderd op 02-03-2008 12:13 ]

zondag 2 maart 2008 12:31

Acties:

Verwijderd

Het kan, maar je moet gekke dingen uit gaan halen met absolute positioning, borders en quirksmode layout:

HTML:

<!-- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>layout</title>
    <style type="text/css">
    
    body, html {
        margin:0;
        padding:0;
        height:100%;
        width:100%;
        overflow:hidden;
    }
    
    * {
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
    }
    
    .panel {
        position:absolute;
        width:100%;
        height:100%;
        overflow:auto;
    }
    
    #header1 {
        height:170px;
        background:#FF0;
        z-index:2;
    }
    
    #header2 {
        height:30px;
        background:#0F0;
        top:170px;
        z-index:2;
    }
    
    #footer {
        height:22px;
        background:#0F0;
        bottom:0;
        z-index:2;
    }
    
    #sidebar1 {
        width:200px;
        background:#0FF;
        border-top:200px solid #FFF;
        border-bottom:22px solid #FFF;
        z-index:1;
    }
    
    #sidebar2 {
        width:150px;
        background:#0FF;
        right:0;
        border-top:200px solid #FFF;
        border-bottom:22px solid #FFF;
        z-index:1;
    }
    
    #content {
        background:#CCC;
        border-top:200px solid #FFF;
        border-right:150px solid #FFF;
        border-bottom:22px solid #FFF;
        border-left:200px solid #FFF;
    }
    
    </style>
</head>
<body>
    
    <div id="header1" class="panel"></div>
    <div id="header2" class="panel"></div>
    
    <div id="sidebar1" class="panel"></div>
    <div id="content" class="panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div id="sidebar2" class="panel"></div>
    
    <div id="footer" class="panel"></div>
    
</body>
</html>

Een flinke lap code, ik hoop dat het duidelijk genoeg is.

Bij mij werkt het in IE7, Firefox, Opera en Safari.

zondag 2 maart 2008 12:41

Acties:

Verwijderd

Topicstarter

Wow, erg bedankt! Dat ga ik eens goed bestuderen!

zondag 2 maart 2008 13:35

Acties:

Nijn

Kijk anders hier is:
http://www.sceneone.nl/tips_tricks/3_kolommen_layout.php

Dat komt vrij dicht in de buurt van hoe het zou moeten.

Blijf ajb. uit de buurt van layouts die samengesteld worden met absolute positioning of nog erger in quirks mode of met javascript. Wat je wilt is heel goed te doen in css, mits je weet wat je doet. Absolute positioning is een ramp omdat het vaak mis gaat als je te veel content hebt of als de client het scherm kleiner maakt dan jij zou willen. (Elementen die over elkaar gaan hangen). Dat komt omdat de je elementen uit de normale flow haalt. Quirks mode is nog veel erger, daarmee vertel je de browser dat jouw site gebaseerd is op de eigenaardigheden en bugs van oudere browsers...

Je ziet ook dat als je je site gewoon maakt zoals het hoort, je vrij weinig hacks nodig hebt om alle browsers mee te laten doen. IE6 blijft altijd een ramp, en daar zul je altijd wel hacks voor nodig hebben, maar verder... Ik vraag me dan ook af hoe bovenstaand voorbeeld het in IE6 doet.

[ Voor 16% gewijzigd door Nijn op 02-03-2008 13:38 ]

zondag 2 maart 2008 15:23

Acties:

Verwijderd

Nijn schreef op zondag 02 maart 2008 @ 13:35:
Kijk anders hier is:
Blijf ajb. uit de buurt van layouts die samengesteld worden met absolute positioning of nog erger in quirks mode of met javascript. Wat je wilt is heel goed te doen in css, mits je weet wat je doet.

Ik moet het hier met je oneens zijn. Dit is niet cross-browser te doen in puur CSS zonder gebruik te maken van absolute positioning en quirks mode. Gegarandeerd. Als je geen rekening zou hoeven houden met IE zou het natuurlijk welheel makkelijk kunnen.

Absolute positioning is een ramp omdat het vaak mis gaat als je te veel content hebt of als de client het scherm kleiner maakt dan jij zou willen. (Elementen die over elkaar gaan hangen). Dat komt omdat de je elementen uit de normale flow haalt.

Onzin. Als je de positie en afmetingen van elementen goed definieert gaat niks over elkaar heen hangen. Teveel content kan netjes worden opgevangen met scrollbalken, zoals de TS ook hier wil.

Quirks mode is nog veel erger, daarmee vertel je de browser dat jouw site gebaseerd is op de eigenaardigheden en bugs van oudere browsers...

Nee, je vertelt de browser dat je gebruik wilt maken van de veruit superieure border-box sizing ipv. de idioot onpractische content-box sizing die standaard is gemaakt voor standards-mode. Dat heeft niks met bugs te maken.

Ik vraag me dan ook af hoe bovenstaand voorbeeld het in IE6 doet.

Prima

zondag 2 maart 2008 16:08

Acties:

Verwijderd

Topicstarter

Overigens, om 1 of andere reden werkt de scrollbar in internet explorer niet als je de CSS als los bestand gebruikt (in firefox blijft hij het wel gewoon doen)

zondag 2 maart 2008 16:37

Acties:

Nijn

Verwijderd schreef op zondag 02 maart 2008 @ 15:23:
Nee, je vertelt de browser dat je gebruik wilt maken van de veruit superieure border-box sizing ipv. de idioot onpractische content-box sizing die standaard is gemaakt voor standards-mode. Dat heeft niks met bugs te maken.

Er zit wat meer vast aan Quirks mode dan jij denkt hoor. De naam zelf zegt het al: Eigenaardigheden. Je verteld de browser om oude manieren te gebruiken die al lang deprecated zijn. (Sterker nog, het is nooit een standaard geweest). Mensen nu vertellen om quirks mode te gebruiken is hetzelfde als kinderen leren te werken met Windows 3.1. Lees anders is op Wikipedia wat Quirks mode nou eigenlijk doet: Wikipedia: Quirks mode

Ik moet het hier met je oneens zijn. Dit is niet cross-browser te doen in puur CSS zonder gebruik te maken van absolute positioning en quirks mode. Gegarandeerd. Als je geen rekening zou hoeven houden met IE zou het natuurlijk welheel makkelijk kunnen.

Nogmaals, kijk is in de boeken of de link die ik al eerder gegeven heb. Web Technologies van Jeffrey C. Jackson heeft bijvoorbeeld een mooi hoofdstuk hierover. Jouw bericht slaat werkelijk nergens op. Het is heel goed te doen in puur CSS en zonder quirks mode.

Onzin. Als je de positie en afmetingen van elementen goed definieert gaat niks over elkaar heen hangen. Teveel content kan netjes worden opgevangen met scrollbalken, zoals de TS ook hier wil.

Zoals in jouw voorbeeld bedoel je? Dan moet je toch even beter kijken. Verander de kleur van Sidebar2 is zodat je onderscheid kan maken tussen Sidebar1 en 2.
Verklein het browserscherm vervolgens horizontaal. Het eerste wat er gebeurt is dat je content scherm helemaal verdwijnt. Vervolgens gaat Sidebar2 over Sidebar1 hangen.
Verklein je het browserscherm vertikaal, dan wordt het nog leuker. Op een gegeven moment is alleen de header nog maar zichtbaar. Wederom, zonder scroll balken.
Dit is ook niet op te lossen met overflow, omdat de elementen geen ruimte in de pagina innemen. Het is tenslotte precies wat je de browser verteld te doen. Je verteld hem de elementen volledig uit de flow van de pagina te halen, waardoor zij in weze geen ruimte meer innemen in de pagina zelf. Bovendien kunnen ze over elkaar heen schuiven omdat ze uit de flow van de pagina zijn.

Zou je het gewoon zonder Position: Absolute doen maar met floats, dan reserveren de elementen gewoon de benodigde ruimte en verschijnt er een scroll balkje als je de pagina verkleint. Position absolute is absoluut niet bedoelt om de gehele layout mee te maken. Het is wel simpel, waardoor 75% van de tutorials het zo doen en 90% van de mensen die denken te weten hoe ze websites moeten bouwen het zo doorvertellen. Maar dat betekend nog niet dat het juist is. Position Absolute is bedoelt om kleine elementjes te positioneren. Een reclame dingetje ofzo. Iets wat je echt letterlijk als een stikker bovenop de pagina plakt.

[ Voor 23% gewijzigd door Nijn op 02-03-2008 16:52 ]

zondag 2 maart 2008 17:47

Acties:

Verwijderd

Topicstarter

100% height en dan scrollbars lijkt toch niet echt lekker ondersteund te worden, want scrollbars verschijnen in de meeste gevallen pas als de height een fixed size is. Blues z'n manier lijkt de enige werkende manier te zijn, maar het gekke is dat toen ik de css en html als aparte bestanden ging gebruiken, hij niet meer lekker werkt in internet explorer (in firefox wel)

zondag 2 maart 2008 19:14

Acties:

Nijn

Van de manieren die hier gepost zijn is Blues z'n manier zeker de enigste die werkt. Maar niet iedereen heeft intresse om kant en klare codes te posten. Ik ben zelf van mening dat je er veel meer van leeft als je gewoon zelf dingen uitzoekt, met wat tips in de goede richting.

zondag 2 maart 2008 22:49

Acties:

Verwijderd

Nijn schreef op zondag 02 maart 2008 @ 16:37:
Er zit wat meer vast aan Quirks mode dan jij denkt hoor. De naam zelf zegt het al: Eigenaardigheden. Je verteld de browser om oude manieren te gebruiken die al lang deprecated zijn. (Sterker nog, het is nooit een standaard geweest). Mensen nu vertellen om quirks mode te gebruiken is hetzelfde als kinderen leren te werken met Windows 3.1. Lees anders is op Wikipedia wat Quirks mode nou eigenlijk doet: Wikipedia: Quirks mode

Quirksmode is inderdaad meer dan wat ik zei, maar voor de wensen van de TS is quirksmode essentieel om border-box sizing te enablen in IE. Vind ik ook niet leuk en zou ik liever niet doen maar het is niet anders.

Nogmaals, kijk is in de boeken of de link die ik al eerder gegeven heb. Web Technologies van Jeffrey C. Jackson heeft bijvoorbeeld een mooi hoofdstuk hierover. Jouw bericht slaat werkelijk nergens op. Het is heel goed te doen in puur CSS en zonder quirks mode.

Ik daag je uit om dat te doen. En dan niet de layout die jouw link beschreef want dat is iets heel anders dan wat de TS wil. Dus een browservullende layout: nooit groter, nooit kleiner, met variabele hoogtes en breedtes gemengt met vaste maten.

Zoals in jouw voorbeeld bedoel je? Dan moet je toch even beter kijken. Verander de kleur van Sidebar2 is zodat je onderscheid kan maken tussen Sidebar1 en 2.
Verklein het browserscherm vervolgens horizontaal. Het eerste wat er gebeurt is dat je content scherm helemaal verdwijnt. Vervolgens gaat Sidebar2 over Sidebar1 hangen.
Verklein je het browserscherm vertikaal, dan wordt het nog leuker. Op een gegeven moment is alleen de header nog maar zichtbaar. Wederom, zonder scroll balken.

Gossie. Dus als je je browser kleiner maakt dan 250 bij 350px zijn delen niet meer leesbaar? Vind je dat echt een redelijke eis?

Zou je het gewoon zonder Position: Absolute doen maar met floats, dan reserveren de elementen gewoon de benodigde ruimte en verschijnt er een scroll balkje als je de pagina verkleint.

Leuk, maar dan heb je dus niet goed naar de requirements van de TS gekeken.

Position absolute is absoluut niet bedoelt om de gehele layout mee te maken. Het is wel simpel, waardoor 75% van de tutorials het zo doen en 90% van de mensen die denken te weten hoe ze websites moeten bouwen het zo doorvertellen. Maar dat betekend nog niet dat het juist is. Position Absolute is bedoelt om kleine elementjes te positioneren. Een reclame dingetje ofzo. Iets wat je echt letterlijk als een stikker bovenop de pagina plakt.

Daar ben ik het pertinent mee oneens. Laat maar eens zien in de CSS spec waar dat te lezen is. Position:absolute is uitstekend geschikt om bepaalde layouts volledig in te realiseren. Toevallig is dit er eentje van. The right tool for the right job.

Nijn, je bent duidelijk geen beginner op het gebied van HTML en CSS. Ik ook niet. Maar in je enthousiasme om alles juist te doen ga je voorbij aan de wensen van de TS. Hij weet wat ie wil en ik geef hem daar een duidelijke oplossing voor. Ik vind het goed van je dat je daar de kanttekening bij plaatst dat er nadelen kleven aan quirksmode en absolute positioning maar als jij je daaraan stoort hoor ik graag van je hoe het beter kan.

Nijn schreef op zondag 02 maart 2008 @ 19:14:
Van de manieren die hier gepost zijn is Blues z'n manier zeker de enigste die werkt. Maar niet iedereen heeft intresse om kant en klare codes te posten. Ik ben zelf van mening dat je er veel meer van leeft als je gewoon zelf dingen uitzoekt, met wat tips in de goede richting.

Enlighten us. Mijn methode is compact, duidelijk, onafhankelijk van de volgorde van de containers in de HTML (speel met de z-index), gebruikt geen hacks (of je moet -moz-* en quirksmode als hacks zien) of JavaScript en werkt zo'n beetje overal. Van zoiets leert de TS meer dan van "kijk eens naar negatieve margins en floats".

zondag 2 maart 2008 22:56

Acties:

Verwijderd

Eigenlijk wel grappig dat een vormgeving zoals dit met een ouderwetse table echt een eitje is.

zondag 2 maart 2008 23:03

Acties:

Nijn

Tja, er kan zoveel meer met CSS dan de oude layouts. Echter mensen blijken nog altijd vast te willen houden aan de oude (naar mijn idee afschuwelijke) layouts die met frames en tables te doen waren.

De overgang was zeker makkelijker geweest als CSS wat meer richting de oude layouts was geweest, maar of dat nou echt de voorkeur moet hebben...

Feit is dat heel veel mooie dingen met CSS gemaakt kunnen worden, die niet zo vreselijk moeilijk hoeven te zijn. Maar specifieke gevallen kunnen lastig zijn.

maandag 3 maart 2008 13:07

Acties:

Verwijderd

Nijn schreef op zondag 02 maart 2008 @ 23:03:
Tja, er kan zoveel meer met CSS dan de oude layouts. Echter mensen blijken nog altijd vast te willen houden aan de oude (naar mijn idee afschuwelijke) layouts die met frames en tables te doen waren.

De overgang was zeker makkelijker geweest als CSS wat meer richting de oude layouts was geweest, maar of dat nou echt de voorkeur moet hebben...

Feit is dat heel veel mooie dingen met CSS gemaakt kunnen worden, die niet zo vreselijk moeilijk hoeven te zijn. Maar specifieke gevallen kunnen lastig zijn.

De meest simpele layouts kun je met CSS niet maken. Dat vind ik een serieuze tekortkoming van CSS.

Van de week was ik een college aan het uitleggen hoe je met CSS een twee kolommen-layout kunt maken. Met floats, maar dan moet je iets met faux collums doen, en meestal werkt het dan

. Terwijl je dat met een tabel zo gedaan hebt, het ook in IE direct werkt, en in welke andere browser dan ook.

CSS komt een aantal dingen tekort. Daar is een (historische) reden voor, maar feit blijft dat veelgebruikte layouts als die van TS niet gebouwd kunnen worden zonder in quirks mode te vervallen of Javascript te gebruiken.

Een oplossing voor faux collums zijn table-row en table-cell, als waarden van de CSS display-property. Hiermee kun je layouts maken die zich gedragen als tabellen in CSS. Je hebt daarmee je data van je opmaak gescheiden, en kunt toch vormgeven met tabellen. Het enige nadeel is dat IE table-row en table-cell niet ondersteunt.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<title>Layout with CSS tables</title>
<style type="text/css">
    
    ul,
    div {
        display: table-cell;
        padding: 1em
    }
    
    ul {
        background-color: #448
    }
    
    div {
        background-color: #844
    }
    
</style>

<p>My Website

<ul>
    <li>Home
    <li>My pet
    <li>Hobbies
    <li>Guestbook
</ul>

<div>
    
    <h1>My Website</h1>
    
    <p>Yeah!
    
</div>

<p>Last update: 01-01-1970

edit:
Tekst verduidelijkt en voorbeeld toegevoegd.

[ Voor 16% gewijzigd door Verwijderd op 03-03-2008 13:45 ]

maandag 3 maart 2008 13:47

Acties:

Verwijderd

Verwijderd schreef op maandag 03 maart 2008 @ 13:07:
Het enige nadeel is dat IE table-row en table-cell niet ondersteunt.

Plus dat CSS geen equivalent heeft voor rowspan en colspan.

CSS3 biedt wel een hoop extra modules voor het beschrijven van dit soort layouts, trouwens.

maandag 3 maart 2008 13:51

Acties:

Verwijderd

Overigens kan je elementen met CSS display:table, display:table-row, etc meegeven. Het is een serieuze tekortkoming van Internet Explorer dat dat niet in die browser werkt.