[css] paginavullend... - Softwareontwikkeling

maandag 12 januari 2004 22:38

Acties:

Verwijderd

Topicstarter

Kan ik op een of andere manier er voor zorgen dat mn div zo groot wordt dat het hele scherm gevuld wordt, maar dat toch het menu dat erboven staat (andere div) nog zichtbaar is. (vergelijk: met tables -> height=100%)

-------------------------------------------
80 px
-------------------------------------------

dit moet tot onder aan de pagina.

-------------------------------------------

tnx!

maandag 12 januari 2004 22:39

Acties:

disjfa

be

div van 80 px en een div absoluut gepositioneerd met een margin-top van 80 px

@bredend ja dit is een vraag die dagenlijks langs komt

[ Voor 28% gewijzigd door disjfa op 12-01-2004 22:42 ]

disjfa - disj·fa (meneer)
disjfa.nl

maandag 12 januari 2004 22:42

Acties:

bredend

[rml][ CSS] Hoe twee divs even hoog krijgen?[/rml]

maandag 12 januari 2004 22:54

Acties:

Verwijderd

Topicstarter

Het gaat mij om de height van de tweede div... wat moet ik daarmee? Als ik 100% doe, dan wordt ie te groot en als ik een aantal pixels doe staat ie natuurlijk niet altijd tot op de bodem van het scherm.

[edit] het is dus zo dat de div altijd tot op de bodem moet komen, ook als er niet genoeg tekst in staat

[ Voor 22% gewijzigd door Verwijderd op 12-01-2004 22:59 ]

maandag 12 januari 2004 23:00

Acties:

disjfa

be

disjfa schreef op 12 januari 2004 @ 22:39:
margin-top van 80 px

dat ^_^

disjfa - disj·fa (meneer)
disjfa.nl

maandag 12 januari 2004 23:13

Acties:

Clay

cookie erbij?

Net als in dat "hoe even hoog" topic kan er hier ook prima verwezen worden naar Faux columns bij A List Apart. Het hele idee is dat je je elementen niet hoeft te stapelen om tot een totaal hoogte van 100% te komen. Een effectief geplaatste background en verder gewoon nesten van elementen lost 90% van de problemen op

Doe b.v. gewoon een div met height op 100% en een background, en nest daar iets in wat 80px hoog is.

[ Voor 3% gewijzigd door Clay op 12-01-2004 23:13 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

dinsdag 13 januari 2004 14:47

Acties:

chris

Clay schreef op 12 januari 2004 @ 23:13:
Net als in dat "hoe even hoog" topic kan er hier ook prima verwezen worden naar Faux columns bij A List Apart. Het hele idee is dat je je elementen niet hoeft te stapelen om tot een totaal hoogte van 100% te komen. Een effectief geplaatste background en verder gewoon nesten van elementen lost 90% van de problemen op

Doe b.v. gewoon een div met height op 100% en een background, en nest daar iets in wat 80px hoog is.

Toch is dit (zoals het ook in de comments staat) eigenlijk wel een beetje een hack. Het zou toch ook anders moeten kunnen...

En ik snap niet precies wat je bedoelt, wil je de elementen absoluut gaan positioneren?

dinsdag 13 januari 2004 15:58

Acties:

Verwijderd

Een hack ja, maar wel forward compatible en veranderbaar (een van de voordelen van CSS).

dinsdag 13 januari 2004 16:20

Acties:

Clay

cookie erbij?

Ik zie het zeker niet als hack, het is imo zelfs alles behalve een hack; het is de essentie van goede CSS als je het mij vraagt

Ik vind het zelfs een beetje storend dat dit als "hack" gestigmatiseerd wordt. Het is een schitterende aanpak die hoogstens onbekend is, en onbekend maakt blijkbaar onbemind. De TS wil iets wat tot onderaan de pagina uitvult, met bovenin een soort header (neem ik maar aan).

De ene manier is om idd 2 dingen los onder elkaar te zetten en de onderste proberen te rekken. De andere manier is om het met een background te doen. Waar daar die hack zit snap ik dan niet. De lol van CSS is oa juist dat je backgrounds kan stapelen met nesting, en iets visueels dus niet aan dat element hoeft te koppelen waarop het getoond gaat worden. Je hoeft de bouwstenen van je site dus ook niet los van elkaar de boel te laten opvullen, daar maak je het jezelf alleen maar moeilijker mee.

neem b.v. dit:

code:

<body>  
    
    <h1> fiets! </h1>
    <p>
        lorem ipsum dolor sit amet.
    </p>

</body>

met dit:

code:

html,body {
    margin:0;
    padding:0;
    height:100%;
    background:white;
}
    body {
        width:600px;
        margin:auto;
        background:#f0f0f0;
    }   

h1, p {
    margin:0;
    padding:1em;
}
    h1 {
        height:80px;
        background:silver;
    }

ter illustratie. Dit werkt al in Moz, Opera en IE6 (meer niet getest) en zou het ook in IE 5.0+ doen als je nog een extra container om de h1 en p zou doen, omdat die je niet toestaan de body en html los te stylen.

Prachtige markup met CSS die de layout doet.

_{(om dit relaas toch maar met een vriendlijke smile af te sluiten)}

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin