[CSS] kolommen van dezelfde hoogte, minimaal schermvullend - Softwareontwikkeling

zondag 22 juli 2007 22:06

Acties:

Topicstarter

Ik zit met een CSS probleem. Ik heb verschillende opties uitgeprobeerd, maar loop nu echt vast.

Wat ik wil is een website, horizontaal gecentreerd, bestaande uit drie kolommen (waarvan alleen de middelste voor content gebruikt wordt) die altijd even lang én minimaal schermvullend zijn.

Ik krijg nu twee mogelijkheden:

1 - De kolommen lopen door tot onderaan het scherm, maar als de content langer is dan kan ik daar niet heen scrollen...
2 - De kolommen zijn even lang, maar de kolommen houden op meteen nadat de content ophoudt.

1 - code:

Cascading Stylesheet:

html, body{
height: 100%
}

body {
background-color: #000000;
font-size: 12px;
font-family: verdana, tahoma, arial;
font-weight: bold;
color: #DD5900;
margin:0px;
}

#container {
height:100%;
width: 950px;
margin: 0px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
} 

#block_1 {                                      /* content */
float: left;
width: 650px;
margin-left: 150px;
background-color: #666666;
margin-bottom: -5000px;
padding-bottom: 5000px;
}

#block_2 {                                      /* linkerkolom */
float: left;
width: 150px;
margin-left: -800px;
background-color: #dd5900;
margin-bottom: -5000px;
padding-bottom: 5000px;
}

#block_3 {                                      /* rechterkolom */
float: left;
width: 150px;
background-color: #dd5900;
height:auto;
margin-bottom: -5000px;
padding-bottom: 5000px;
}

2 - code:
Zelfde, maar dan zonder:

code:

1
2
3

html, body {
height:100%;
}

Hoe krijg ik het voor elkaar dat de kolommen altijd schermvullend zijn, maar dat als de content langer dan één schermhoogte is, dat ik er wel naartoe kan scrollen? Als iemand dit weet dan zou ik diegene zeer erkentelijk zijn...

zondag 22 juli 2007 22:19

Acties:

rogierslag

code:

html, body
   { 
   height: 100%;
   overflow: scroll;
   }

zal wel helpen

maandag 23 juli 2007 00:07

Acties:

Fuzzillogic

Cool

height: 100% gaat niet werken in moderne browsers. Dat moet min-height zijn. Maar dat werkt weer niet zonder meer in IE6. Problemen en gezeik dus

Wellicht is het dan handiger om 'faux columns' te gebruiken op de <body />. Dan heb je die enorme margins e.d. helemaal niet nodig.

maandag 23 juli 2007 00:12

Acties:

Verwijderd

http://www.positioniseverything.net/articles/onetruelayout/ is een goed begin om te gaan lezen en leren.

Let echter wel goed op, er zijn een hoop dingen mis met de technieken daar gebruikt waardoor je bugs kunt krijgen die onder bepaalde browsers (IE6

) niet op te lossen zijn. Als je doelgroep dus IE6 gebruikt (ook al is het maar een deel, wat dus voor 99% van alle websites het geval is) moet je hier rekening mee houden.

Het is vaak gemakkelijk voor zoiets gewoon tabellen te gebruiken (ook al is dat niet zo netjes in de zaak representatie vs data, understatement). Afhankelijk van je doelgroep is het prima acceptabel om tabellen te gebruiken, maar deze afweging kun je zelf maken.

maandag 23 juli 2007 00:21

Acties:

Fuzzillogic

Cool

Verwijderd schreef op maandag 23 juli 2007 @ 00:12:
Het is vaak gemakkelijk voor zoiets gewoon tabellen te gebruiken (ook al is dat niet zo netjes in de zaak representatie vs data, understatement). Afhankelijk van je doelgroep is het prima acceptabel om tabellen te gebruiken, maar deze afweging kun je zelf maken.

Nee, is het zeker niet. Ook met tabellen ga je je een hoop ellende op je hals halen. Daarnaast vind ik tabellen voor een hedendaagse website werkelijk niet acceptabel meer. Geen porem.

Wat TS wil is zeker mogelijk met CSS. Eventueel kun je Dean Edwards' IE7-script gebruiken, zodat je transparant min-height kunt gebruiken. Scheelt weer wat gezeik met IE6.

Damn, ik lijk wel een wandelend reclamebord voor Edwards

Maar het is dan ook een geniaal script.

maandag 23 juli 2007 00:24

Acties:

Verwijderd

Fuzzillogic schreef op maandag 23 juli 2007 @ 00:21:
[...]

Nee, is het zeker niet. Ook met tabellen ga je je een hoop ellende op je hals halen. Daarnaast vind ik tabellen voor een hedendaagse website werkelijk niet acceptabel meer. Geen porem.

Wat TS wil is zeker mogelijk met CSS. Eventueel kun je Dean Edwards' IE7-script gebruiken, zodat je transparant min-height kunt gebruiken. Scheelt weer wat gezeik met IE6.

Damn, ik lijk wel een wandelend reclamebord voor Edwards Maar het is dan ook een geniaal script.

Ja handig... een 81kb script toevoegen daar wordt je site erg vlot en goed van..

Wel geniaal script, daar heb je gelijk in.

En natuurlijk is het mogelijk met CSS, maar het moet mogelijk zijn in de browsers gebruikt door de doelgroep, CSS staat daar helemaal los van verder...

Over de discussie van tabellen voor opmaak ga ik niet in, die discussie is eindeloos en absoluut niet nuttig. De TS kan die afweging prima maken en er is op internet genoeg te vinden, zowel de pro's als de con's. (Zie bijvoorbeeld alleen al de footnote 3 op http://www.positionisever...es/onetruelayout/anyorder en de vele andere discussies over dit onderwerp)

Geen porum is een beetje een non-argument... alsof iemand aan je site ziet wat er gebruikt is, maar dit is helemaal afhankelijk van de doelgroep waardoor alleen de TS die afweging in dit geval kan maken.

[ Voor 12% gewijzigd door Verwijderd op 23-07-2007 00:30 ]

maandag 23 juli 2007 09:12

Acties:

Jorizzz

Topicstarter

Bedankt alvast voor alle replies.
Ik wil het eigenlijk het liefst gewoon in een nette CSS oplossing hebben, dus geen javascript, tables, faux columns en dat soort 'hacks'. Dat zou toch moeten kunnen, of is dat wishful thinking?
Dat er kleine layout verschillen zijn tussen verschillende browsers, daar kan ik mee leven, maar iets eenvoudigs zoals ik wil zou toch makkelijk moeten kunnen?

maandag 23 juli 2007 10:22

Acties:

Fuzzillogic

Cool

Verwijderd schreef op maandag 23 juli 2007 @ 00:24:
[...]

Ja handig... een 81kb script toevoegen daar wordt je site erg vlot en goed van..
Wel geniaal script, daar heb je gelijk in.

29KiB. Bovendien wordt dat enkel voor IE6 ingeladen. Een antieke browser die al ruim een half jaar officiele opvolging heeft. IE7 is nu al de dominant browser, en de verhouding IE6/IE7 zal alleen maar kleiner worden.

Die 29KiB wordt slechts eenmalig gedownload, daarna staat het in de cache. De besparing aan HTML die goede, strakke code met CSS2 met zich meebrengt verdien je elke page-load weer terug.

Nog afgezien van de tijdsbesparing die je hebt door gebruik te kunnen maken van CSS2 ipv bergen extra classes en weet ik het te gebruiken... Tijd is geld, dus winst. Voor ons is de keuze iig erg simpel.

Geen porum is een beetje een non-argument... alsof iemand aan je site ziet wat er gebruikt is

Ik wel, en ik ben ook klant

Jorizzz schreef op maandag 23 juli 2007 @ 09:12:
Bedankt alvast voor alle replies.
Ik wil het eigenlijk het liefst gewoon in een nette CSS oplossing hebben, dus geen javascript, tables, faux columns en dat soort 'hacks'. Dat zou toch moeten kunnen, of is dat wishful thinking?
Dat er kleine layout verschillen zijn tussen verschillende browsers, daar kan ik mee leven, maar iets eenvoudigs zoals ik wil zou toch makkelijk moeten kunnen?

Faux columns is een hele nette oplossing. Niks mis mee. Je HTML blijft helemaal clean, en voor CSS kun je methodes gebruiken die volledig 'legaal' zijn en in elke browser werken. Om hetzelfde effect te krijgen puur met CSS wordt bijzonder lastig!

[ Voor 27% gewijzigd door Fuzzillogic op 23-07-2007 10:25 ]

maandag 23 juli 2007 20:16

Acties:

Jorizzz

Topicstarter

Ik ben eruit!!

In plaats van:

Cascading Stylesheet:

1
2
3

#container{
height:100%;
}

Heb ik nu:

Cascading Stylesheet:

1
2
3

#container{
min-height: 100%;
}

Terwijl

Cascading Stylesheet:

1
2
3

body,html{
height: 100%
}

gewoon blijft staan.