[XHTML 1.0 strict] liquid layout (vertical)

[gvdh81]

Ik heb hier op dit forum geen search gebruikt, omdat ik bij god niet weet hoe ik een dergelijk soort probleem in een paar woorden kan omschrijven

Ik heb een site gemaakt die XHTML 1.0 strict valideert en ook CSS level 2 is. Ik heb een div die 750px breed is, en die is horizontaal gecentered zodat ik een balk van 750px breed in het midden van het scherm krijg.

Nu heb ik die div weer opgedeelt in 3 divjes te weten:
- header
- content (met background image)
- footer

Ik weet van de header en de footer hoe hoog ze zijn, alleen de content div is variabel. Nu wil ik graag "frames" immiteren, dwz, de header is zo veel pix hoog, de footer zo veel pix en dus moet de content maar de rest van de beschikbare hoogte pakken. Met andere woorden; Hoe krijg ik de content div liquid zodat hij minimaal de hoogte van het scherm pakt waardoor ik dus een footer ook echt als een footer heb en niet als iets wat maar "eronder geplakt zit".

p.s. zie dit niet als script request maar ik zou alle hulp kunnen gebruiken.

offtopic:
Vraag me aub niet waarom ik geen frames wil gebruiken, maar blijf aub on-topic en reargeer daar ook naar. Ik denk dat ik het uiteindelijke doel wat ik wil bereiken goed genoeg heb omschreven zo niet, dan hoor ik graag van mensen die met de hier beschreven technieken werken hoe ik het beter kan omschrijven.

p.p.s. Het eigenlijke probleem is niet om de footer onderaan te krijgen, maar meer hoe ik de "content" div liquid maak (de hoogte geef die er nog over is). Is dit uberhaupt mogelijk of moet ik naar javascript grijpen?

[ Voor 11% gewijzigd door gvdh81 op 13-05-2004 00:34 ]

[faabman]

de header / footer absoluut positioneren en de content een padding en of margin geven die zo groot is dat de tekst nooit onder de header / footer kan verdwijnen...

of anders zoek je even op http://gathering.tweakers...5BxDB%5D=default#hitstart

[Verwijderd]

Ik zat met hetzelfde probleem laatst zie dit topic:
[rml][ CSS] Uitlijnen aan de onderkant wil nog niet lekker[/rml]

en dan vooral de link onderaan:
http://www.alistapart.com/articles/footers/

succes!

edit:
ohja, het resultaat wordt dan ongeveer zoals deze site

[ Voor 18% gewijzigd door Verwijderd op 13-05-2004 08:32 ]

[gvdh81]

En toch is dit niet wat ik bedoel. Ik heb alle oplossigen geprobeerd, en de oplossingen die Anne aandraagt, maar dit is niet wat ik wil.

code:

[containter]
  [header]
    [content]
  [footer]
[/contatiner]

Zoals het bij hun gaat wordt de footer slechts 1 malig (bij page load) gepositioneerd, de footer verschuift niet automatisch mee als ik het venster verschuif. Tevens is de "content" div niet de hoogte die hij in mijn ogen (automatisch, elastisch) moet krijgen.

dwz, dat de container minimaal de hoogte moet krijgen van de viewport, en dat de content die hoogte minus de hoogte van de header en de footer moet krijgen. Om alles nog lastiger te maken moet alles gecentreerd op he scherm worden weergegeven, zoals dit forum.

De oplossing die Anne aandroeg ([rml]Anne in "[ xhtml + css] Positioneren van Divjes"[/rml]) werkte niet omdat daar de content div niet elastisch is. Ook heb ik op ALA gekeken maar deze oplossing was ook niet de juiste.

[ Voor 92% gewijzigd door gvdh81 op 13-05-2004 10:06 ]

[Verwijderd]

Wel is van de 'background' property gehoord?

(Daarmee "werk" je dus om dit soort "problemen" heen.)

[gvdh81]

hehe, en daar komt het volgende probleem om de hoek kijken Ik heb inderdaad de container voorzien van een background wat ervoor zorgt dat alles netjes werkt, het probleem is echter, dat ik rechtsonder in de content een 'watermerk" wil hebben. Dit is het 3D logo van hun. Ik krijg dit dus niet voor elkaar zonder de content automatisch mee te laten sizen.

[JJvG]

In het volgende topic staat dit heel goed uitgelegd:

[rml][ css] 3 rows, 2 vast, de ander zoekt het...[/rml]

Succes!

[Verwijderd]

Op zulke momenten vervloek je IE omdat ze geen achtergrondplaatje op het HTML element ondersteunen.

Ik had hetzelfde probleem bij m'n markover van leiden.nl en heb het opgelost door een DIV als child van het BODY element een ID 'ie-hack' te geven en deze absoluut te positioneren. Vervolgens heb ik even alles nagelopen of het met z-index, resizen e.d. allemaal nog wel klopte en ik moet zeggen dat het redelijk werkt.

Dat is dus het plaatje rechtsboven, linksmidden-onder is het plaatje dat repeat op het BODY element.

[gvdh81]

JJvG schreef op 13 mei 2004 @ 10:50:
In het volgende topic staat dit heel goed uitgelegd:

[rml][ css] 3 rows, 2 vast, de ander zoekt het...[/rml]

Succes!

nee hoor Ik kan niet scrollen met mijn scrollmuis, zie geen scrollbars en als ik hem XHTML 1.0 STRICT maak De footer overlapt de content etc etc Kortom, gaat voor mij niet werken.

[T-MOB]

voorbeeld
Hiermee zou je er wel mee uit moeten kunnen komen.

[gvdh81]

T-MOB schreef op 13 mei 2004 @ 11:04:
voorbeeld
Hiermee zou je er wel mee uit moeten kunnen komen.

En ook dit is niet wat ik bedoel, want je gebruikt namelijk een "truukje" zodat IE zijn eigen box model gaat gebruiken. Als je jouw 2 regels code:

code:

<!-- This makes sure IE uses it's own boxmodel -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Vervangt door deze regels:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Dan werkt je voorbeeld niet meer.

Tevens heb ik nu wel een werkende oplossing gevonden, aan de hand van het ALA artikel zelf wat geprogselt. Het idee van Anne zette me aan het denken, als je namelijk de footer positie kunt zetten dmv javascript (zoals ALA doet) dan kun je dus ook de "content" height zetten zodat het toch allemaal netjes blijft werken.

Ik ben tot onderstaande code gekomen:

code:

        function setFooter() {
            if (document.getElementById) {
                var windowHeight = getWindowHeight();
                if (windowHeight > 0) {
                    var headerElement = document.getElementById('fwheader');
                    var headerHeight = headerElement.offsetHeight;

                    var contentElement = document.getElementById('fwcontent');
                    var contentHeight = contentElement.offsetHeight;

                    var footerElement = document.getElementById('fwfooter');
                    var footerHeight  = footerElement.offsetHeight;

                    if (windowHeight - (headerHeight + contentHeight + footerHeight) >= 0) {
                        footerElement.style.position = 'absolute';
                        footerElement.style.top = (windowHeight - footerHeight) + 'px';
                    }
                    else {
                        footerElement.style.position = 'static';
                    }
                    contentElement.style.height = (windowHeight - (headerHeight + footerHeight)) + 'px';
                }
            }
        }

Deze code doet wat ik wil, maar liever heb ik een "non-javascript" oplossing voor dit "probleem" wat netjes XHTML 1.0 strict is.

[ Voor 26% gewijzigd door gvdh81 op 13-05-2004 11:37 . Reden: zat nog een voutje in de JS code ]

[JJvG]

gvdh81 schreef op 13 mei 2004 @ 11:26:
[...]
Deze code doet wat ik wil, maar liever heb ik een "non-javascript" oplossing voor dit "probleem" wat netjes XHTML 1.0 strict is.

Kun je laten zien wat je tot nu toe hebt?
Ik heb je aanpassing van Transitional naar Strict ook gedaan hiero, maar ik kreeg geen verschillen (IE5.5 op W2K). Misschien dat het mogelijk is om aan de hand van je huidige pagina een javascript-loze versie te maken.

[gvdh81]

Hehe, dat wil ik wel doen hoor, op verzoek: http://www.cafejansenenjansen.nl/

offtopic:
Alleen gaat Anne denk ik lachen Hij raadde me namelijk aan om lid te worden van een forum omdat ik hem op zijn email adres vragen ging stellen over hoe deze pagina eruit zag en hoe ik hem XHTML 1.0 strict kon maken... Blijkt nu alleen dat ik 60.000 users eerder was dan hem op dit forum

[T-MOB]

gvdh81 schreef op 13 mei 2004 @ 11:26:
[...]
En ook dit is niet wat ik bedoel, want je gebruikt namelijk een "truukje" zodat IE zijn eigen box model gaat gebruiken. Als je jouw 2 regels code:

code:

<!-- This makes sure IE uses it's own boxmodel -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Vervangt door deze regels:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Dan werkt je voorbeeld niet meer.

Zonder het IE-boxmodel is wat jij wil niet mogelijk in louter (X)HTML & CSS. Aangezien IE niets snapt van "box-sizing:" wordt het voor IE6 alleen mogelijk om een strict doctype te hebben met een html-comment ervoor. Ik zie niet in wat het probleem daarvan is aangezien elke IE < 6 toch niet met het w3c model kan werken.
Voorts is de werkwijze vrij safe aangezien elke standard-compliant browser het comment netjes negeert en vervolgens box-sizing (of -moz-box-sizing) ondersteunt. Het enige risico dat je loopt is dat IE7 (if ever ) de comment-bug niet meer heeft maar ook geen box-sizing ondersteunt. Tegen die tijd ben je waarschijnlijk toch wel uitgekeken op je huidige design ...

[ Voor 7% gewijzigd door T-MOB op 13-05-2004 11:55 ]

[Verwijderd]

Deze code doet wat ik wil, maar liever heb ik een "non-javascript" oplossing voor dit "probleem" wat netjes XHTML 1.0 strict is.

ce n'est pas possible

Je site ziet er mooi uit zo, hij is alleen nog niet helemaal bugvrij (de footer bedoel ik)

bij het kleiner maken van het window komt de footer niet meer op de juiste plek te staan en Opera heeft er helemaal moeite mee.

Heb je nu trouwens dit artikel gebruikt?

[T-MOB]

gvdh81 schreef op 13 mei 2004 @ 11:46:
Hehe, dat wil ik wel doen hoor, op verzoek: http://www.cafejansenenjansen.nl/

Nu ik dat zo zie wil je dus geen frames imiteren, maar meer zoiets als test57

[gvdh81]

Verwijderd schreef op 13 mei 2004 @ 11:56:
[...]
Heb je nu trouwens dit artikel gebruikt?

Juist Die heb ik gebruikt. Ik word een beetje scheel van al die browsers.. Ik test tegenwoordig op Win98 IE5.5, XP met IE6.0 SP2 en FireFox. Ik heb opera nog niet toegevoegd maar misschien ga ik dat wel doen. Dat de footer niet helemaal goed uitlijnt moet ik ook nog oplossen in JS. probleem is dat hij omdat hij op absolute staat niet in de normale flow zit EN ik text-align: center gebruik.

T-MOB schreef op 13 mei 2004 @ 12:01:
Nu ik dat zo zie wil je dus geen frames imiteren, maar meer zoiets als test57

En dat is ook juist. Alleen is wat ze daar gebruiken toch niet helemaal werkend te krijgen in mijn voorbeeld.

Dat probleem... met die headers heb ik hier ook. Kunnen we dat op een of andere manier oplossen?

[ Voor 32% gewijzigd door gvdh81 op 13-05-2004 15:22 ]

[T-MOB]

Owkee, getest in Opera 7.23, IE6 en Firefox:

lang
en
kort

[gvdh81]

Helaas werkt het niet in Safari 1.2, ik zal zo mijn test eens uploaden...

(Screenshots van safari 1.2 mbt jouw voorbeeld)
korte tekst
lange tekst

Mijn test werkt in:
- IE6.0 sp2
- Opera 7.5
- Firefox 0.8
- Safari 1.2

De screenshots waren gemaakt dmv iCapture (Dit proggie roelt!)

P.s. Dit is dus ZONDER JAVASCRIPT code. Graag wat meer mensen die het kunnen testen c.q. aanpassen voor me.

[ Voor 94% gewijzigd door gvdh81 op 13-05-2004 16:54 ]

[T-MOB]

Jep,
min-height is een probleem in safari, in 1.3 is dat opgelost zie bijv: dit topic

zal zo 's naar jouw test kijken...

[gvdh81]

Mjah, wat is dan de "beste" code om te gebruiken, mij maakt het niet zo veel uit, die paar browsers die het niet ondersteunen zullen toch wel naar de methode gaan zoals jouw screenshots. Dus die ene browser die het dan NIET print zoals het hoort maak ik mezelf dan ook niet echt druk om..

Edit: Ik heb je sample gepakt en aangepast met de safari min-height bug fix. Dus ik "denk" dat dit alles op zou moeten lossen...
test2_kort.html (Safari 1.2 PNG)
test2_lang.html (Safari 1.2 PNG)

Oh ja, en ik heb dit meteen ff geimplementeerd op de site van Jansen en Jansen. Kostte me 4 minuten De screenshot van safari moet ff op zich laten wachten want ik kreeg hem nog niet "fully loaded" op de screenshot

[ Voor 67% gewijzigd door gvdh81 op 13-05-2004 19:34 ]

[T-MOB]

Helaas, met die fix klopt er niets van "lang" in zowel moz als opera (in principe in elke browser die de standaard volgt...)

*Thinking of a solution......

_edit
mmzz.. Misschien is een oplossing eigenlijk wel vrij zinloos. Het voorbeeldje dat ik heb gemaakt werkt in alle browsers behalve safari, omdat die geen min-width of een toepasbare hack ondersteunt. Het resultaat is echter nog steeds acceptabel als je een beetje content hebt - noem het graceful degradation .

Kijken we op Janssen en Janssen dan heeft elke pagina voldoende inhoud om het er niet *lelijk* uit te laten zien in safari. Een fix voor je lay-out maakt IMO de code alleen maar lelijker doordat er een hoop extra markup ingevoegd moet worden aan spacing divs en meer van dat. Bovendien kost het een hoop tijd om de oplossing bij elkaar te puzzelen. Het is dan maar net wat je over hebt voor de ieniemienieminderheid van je bezoekers die safari browst. Waarschijnlijk zal het verschil niet eens opvallen...

[ Voor 74% gewijzigd door T-MOB op 13-05-2004 20:02 ]

[Verwijderd]

T-MOB in combinatie met 'display:table-cell' gaat het in een andere browser mis?

[T-MOB]

Verwijderd schreef op 13 mei 2004 @ 20:06:
T-MOB in combinatie met 'display:table-cell' gaat het in een andere browser mis?

Ja, het positioneren van de footer loopt dan spaak

Na een nieuwe ingave nog even getest, het lijkt erop dat Moz het alleen pakt als je een height in pixels geeft aan een "table-cell"... En zo hoort het dus ook:

W3C
CSS 2.1 does not define what percentage values of 'height' refer to when specified for table cells.

[ Voor 50% gewijzigd door T-MOB op 14-05-2004 10:29 ]

[gvdh81]

Hmz ik heb hier het e.e.a. nog getest, en mijn "test" werkt inderdaad niet met opera 7.5 das echt verrot moet ik zeggen.. Weet jij of die andere "test" van mij wel in Moz werkt? In opera 7.5 iig wel...

klik hier

[ Voor 21% gewijzigd door gvdh81 op 14-05-2004 09:22 ]

[T-MOB]

gvdh81 schreef op 14 mei 2004 @ 09:21:
klik hier

Deze doet het goed in firefox...

[gvdh81]

En nu heb ik er een gemaakt die werkt in IE, Firefox 0.8, Safari 1.2 en Opera 7.5.



Voor zover ik weet kan ik het niet veel beter maken, in iedere browser ziet het er goed uit en ik gebruik geen javascript. Let niet op de lettertypes, want die zitten er nog niet goed in waardoor de layout qua lettertypes nog verneukt is maar het idee is er