Geneste weergave | Lineaire weergave

Jasper · 17-03-2007 23:42:58

Wederom een behoorlijk lange titel, maar dat is ten eerste goed voor de zoekmachineresultaten en ten tweede heb ik ÃƒÂ©cht geen idee hoe ik dit korter uit zou moeten leggen...!

DE HTML Template, Deel 2!
Introductie
Zoals ik besprak in mijn vorige tutorial, is het dus met een website die opgebouwd is met semantische HTML zonder het gebruik van tabellen voor layout dus heel goed mogelijk om je website altijd op 100% schermhoogte te krijgen! Alleen er ontbrak nog Ã©Ã©n dingetje, wat die layout perfect zou maken: Een zelf in te stellen hoogte van je footer! Dit moest in procenten en daardoor werd het ineens een stuk lastiger een fixed (vaste) hoogte in te stellen van deze div. Maar, niet getreurd, ik heb er nog eens op zitten brainstormen en eigenlijk denk ik dat ik iets revolutionairs heb bedacht!

Wat is het dan?
Met mijn techniek is het mogelijk een weblayout te maken die altijd tot tenminste 100% van je schermhoogte uitrekt, hetzelfde werkt in alle gangbare browsers, valide XHTML en CSS bevat en nu ook nog eens met een footer die je zelf een hoogte kunt geven! Woei, het wordt alleen maar beter! De zojuist besproken vorige methode heb ik al behoorlijk vaak succesvol toegepast in websites, maar nu gaan we het nog makkelijker maken! Deze template werkt. Punt.

Wat gaan we doen?
Het is eigenlijk heel makkelijk. Je maakt een heel simpel HTML document:

simpel HTML document, klik hier.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>stretchy footer</title>

<link rel="stylesheet" type="text/css" href="tut1.css" />

</head>

<body>

<div id="container">

    <div id="header">

        <h1>Je header titel</h1>

    </div>

    <div id="navbar">

        <a href="#">Wat links ter illustratie</a> | <a href="#">Wat links ter illustratie</a> | <a href="#">Wat links ter illustratie</a>    </div>

    <div id="left">

        <h2>Hier linker contents</h2>

        <p>Linker paragraaf</p>

    </div>

    <div id="right">

        <h1>Hier rechter contents</h1>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nec erat. Vivamus ultrices accumsan enim. 

        Suspendisse porta nonummy odio. Cras vitae leo. Duis sodales porttitor massa. Sed vehicula venenatis ligula. 

        Pellentesque dui dui, sodales eu, malesuada et, euismod eu, lacus. Nam pulvinar massa quis purus hendrerit molli. 

        Sed nisl nisl, bibendum at, laoreet sit amet, varius quis, sem. Mauris feugiat. Phasellus lorem ipsum, facilisis, 

        tristique ac, pretium eu, ante. Donec vitae massa eget ipsum tincidunt hendrerit. Mauris sit amet mi nec liberoy. 

        Proin eget est. Etiam nonummy justo. Mauris posuere pede ac velit. Praesent in elit. Morbi adipiscing, ante auct, 

        lectus nisl scelerisque augue, nec congue diam enim a augue.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nec erat. Vivamus ultrices accumsan enim. 

        Suspendisse porta nonummy odio. Cras vitae leo. Duis sodales porttitor massa. Sed vehicula venenatis ligula. 

        Pellentesque dui dui, sodales eu, malesuada et, euismod eu, lacus. Nam pulvinar massa quis purus hendrerit molli. 

        Sed nisl nisl, bibendum at, laoreet sit amet, varius quis, sem. Mauris feugiat. Phasellus lorem ipsum, facilisis, 

        tristique ac, pretium eu, ante. Donec vitae massa eget ipsum tincidunt hendrerit. Mauris sit amet mi nec liberoy. 

        Proin eget est. Etiam nonummy justo. Mauris posuere pede ac velit. Praesent in elit. Morbi adipiscing, ante auct, 

        lectus nisl scelerisque augue, nec congue diam enim a augue.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nec erat. Vivamus ultrices accumsan enim. 

        Suspendisse porta nonummy odio. Cras vitae leo. Duis sodales porttitor massa. Sed vehicula venenatis ligula. 

        Pellentesque dui dui, sodales eu, malesuada et, euismod eu, lacus. Nam pulvinar massa quis purus hendrerit molli. 

        Sed nisl nisl, bibendum at, laoreet sit amet, varius quis, sem. Mauris feugiat. Phasellus lorem ipsum, facilisis, 

        tristique ac, pretium eu, ante. Donec vitae massa eget ipsum tincidunt hendrerit. Mauris sit amet mi nec liberoy. 

        Proin eget est. Etiam nonummy justo. Mauris posuere pede ac velit. Praesent in elit. Morbi adipiscing, ante auct, 

        lectus nisl scelerisque augue, nec congue diam enim a augue.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nec erat. Vivamus ultrices accumsan enim. 

        Suspendisse porta nonummy odio. Cras vitae leo. Duis sodales porttitor massa. Sed vehicula venenatis ligula. 

        Pellentesque dui dui, sodales eu, malesuada et, euismod eu, lacus. Nam pulvinar massa quis purus hendrerit molli. 

        Sed nisl nisl, bibendum at, laoreet sit amet, varius quis, sem. Mauris feugiat. Phasellus lorem ipsum, facilisis, 

        tristique ac, pretium eu, ante. Donec vitae massa eget ipsum tincidunt hendrerit. Mauris sit amet mi nec liberoy. 

        Proin eget est. Etiam nonummy justo. Mauris posuere pede ac velit. Praesent in elit. Morbi adipiscing, ante auct, 

        lectus nisl scelerisque augue, nec congue diam enim a augue.</p>

    </div>

    <br class="clear" />

    <div id="footer">        

        <p>Â© 2007 Jezelf</p>

    </div>

</div>

</body>

</html>

Een behoorlijk standaard setup. Een container, header, horizontale navigatie (die in dit voorbeeld NIET semantisch is, I know), 2 kolommen en een footer.

Nu linken we er eventjes een css bestand in. Voeg in je header toe:

Code:

<link rel="stylesheet" type="text/css" href="style.css" />

en maak een nieuw bestand aan en sla dat op als style.css in dezelfde map als je HTML document.
Dat CSS document ziet er als volgt uit:

CSS document, klik hier

Dit geeft als resultaat:
http://ep2.nl/tutorials/html2/tut1.html

Maar wat als er nou minder tekst, of helemaal geen tekst in de div staat?
Dan ziet het er zo uit: http://ep2.nl/tutorials/html2/tut2.html
Niet helemaal perfect dus. Maar daar komt een faux column goed van pas! Ik maak een plaatje in photoshop dat dezelfde kleur heeft als de linker div (oranje) en maak dat plaatje ook net zo breed als de linkerdiv:

en dat voeg ik toe als achtergrond afbeelding van #container en ik lijn deze links uit en herhaal hem verticaal:

Code:

#container {

    min-height: 100%;

    width: 800px;

    margin: 0 auto; /* deze div centreren */

    background: #FFF url(tut2.gif) top left repeat-y; /* Faux column */

    position: relative; /* De footer wordt absoluut gepositioneerd, relatief aan #container. Dus position: relative moet dan hier toegevoegd worden */

}

En dit heeft als resultaat een template met 2 kolommen met een meerekkende footer, opgebouwd uit nagenoeg semantische HTML die ook nog eens in alle browsers werkt!

http://ep2.nl/tutorials/html2/tut3.html

eigenlijk heel simpel

Succes ermee!

//EDIT 04-10-2008: foutje eruit gehaald. padding-bottom ipv margin-bottom

Jasper · 20-03-2007 13:24:21

51 keer bekeken en niemand heeft hier wat aan? Jammer man! Tijd voor een nog indrukwekkendere tutorial dus... Hmm, meerekkende kolommen ongeacht de inhoud, volledig elastische layout die tot het oneindige is te vergroten? Een liquid 3 kolommen layout? You name it

Kevin · 20-03-2007 15:21:03

Woow, deze heb ik helemaal gemist

Maar het is meer een tutorial die je niet nodig hebt op het moment dat je hem leest, maar een tutorial die je tegenkomt als je naar dit probleem zoekt denk ik

In iedere geval bedankt voor de moeite!
++

Jasper · 20-03-2007 16:42:23

Kevin schreef:Woow, deze heb ik helemaal gemist

Lol, daarom ook de subtiele kick

Kevin schreef:In iedere geval bedankt voor de moeite!
++

Dank je wel, graag gedaan!

Dennis C · 26-03-2007 14:17:12

Jasper schreef:Hmm, meerekkende kolommen ongeacht de inhoud

Graag

En dan 1 waarvan de #container niet 100% is

#container is dus ook meerekkend.

Jasper · 26-03-2007 15:12:02

in #container min-height: 100% _height: 100% vervangen door height: auto;

DNA · 16-04-2007 14:26:55

Wist je dat dit niet werkt in IE6.

heel erg jammer, heb je hier een fix voor?

[edit]
lama, je had dit verwijderd bij #container:
height:100%;
[/edit]

Jasper · 16-04-2007 18:10:00

_height: 100% bedoel je

Theo · 11-05-2007 12:21:20

He, die werkt erg mooi man! Heb m gebruikt, moest alleen de > weghalen bij * html #container, anders werkte hij niet in IE6.

++

[EDIT]
Als de content uitrekt valt het laatste stukje onder de footer... heb dat opgelost door een lege paragraaf met de hoogte van de footer. Niet netjes, wel efficient.

MichielV · 11-05-2007 15:27:19

Gewoon de bottom-margin van je content gedeelte aanpassen en zorgen dat deze evengroot is als je footer.

//edit: ik zie zelfs dat dat in de tutorial staat, tssss

Theo · 11-05-2007 21:37:21

Dan krijg je dat er in FF een verticale schuifbalk ontstaat.

Jasper · 12-05-2007 15:32:55

je moet ook geen margin-bottom meegeven aan de omliggende container, maar een padding-bottom met dezelfde hoogte van je footer aan de gefloate divs.

SystemF · 31-05-2007 10:15:53

Dit is inderdaad waar ik naar zocht!! Beter zeg, geen ander forum wat een perfecte oplossing had...overal was er wel wat...haha! Fijn dat ik Ep2 heb ondekt.

incredi-man · 26-10-2007 20:55:47

Jasper, was je een vrouw dan had ik je gezoend! Ben hier al de hele dag naar op zoek, thanks!

Jasper · 26-10-2007 23:06:41

hahahaha

Alsnog graag gedaan en als je nog tegen problemen aanloopt hoor ik het wel van je. Succes verder!

SystemF · 12-11-2007 08:31:52

Ik heb hem ook gebruikt, bedankt dus bij deze!!

Scheelt me toch weer een hoop typewerk!

Neophyte · 25-11-2007 20:25:35

Beetje een late reactie erop maar ik denk dat ik het snap!
Alleen ik zou er graag een validatie op terug willen zien waarom deze post

Als ik nu 3 kolommen wil hebben die samen 800px breed zijn. Dan moet ik een nieuwe achtergrond afbeelding maken van 800px breed met daarin de breedte en de kleuren van de kolommen.
En deze moet ik dan als achtergrond afbeelding gebruiken in me de #container div

Trouwens ook nog ff een puntje voor de maker

MichielV · 25-11-2007 20:41:10

Neophyte schreef:Dan moet ik een nieuwe achtergrond afbeelding maken van 800px breed met daarin de breedte en de kleuren van de kolommen.

Zo zou je het kunnen doen, maar er is een andere manier.

Je zou gewoonweg 2 keer de faux-column techniek kunnen toepassen, dus twee containers.
De eerste container heeft de achtergrond afbeelding van de eerste kolom en de achtergrond kleur van de tweede. In deze container zit een tweede container met achtergrond afbeelding van de derder kolom en een transparante achtergrond kleur. In deze tweede container komen je kolommen.

Wat zijn de voordelen: Je hebt geen 800 px lang plaatje nogdig. Niet echt een enorm voordeel, maar wel als je een site maakt die 100% breedte heeft, waarbij 2 kolommen een pixel breedte en een andere kolom de rest van de breedte opvult. (Dus veranderlijk is)
Nadeel: een extra div en een paar extra css regeltjes.

In jou geval zou ik gewoon kijken wat het minste plaats in beslag neemt (dus minder bandbreedte). Een prent met 3 verschillende kleuren en 800 px lang, of 2 prentjes van elks 1 kleur. Als er een significant verschil in grootte is, neem dan mijn techniek. Is het verschil niet erg groot, neem de jouwe.

Mano · 03-10-2008 22:26:18

Het lukt hier niet

Er zit nog heel wat regels blabla achter de footer door. De footer komt gewoon tot op de bodem van het scherm. Dat is goed als er weinig content is, maar met veel content gaat hij dus niet mee.

HTML

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>Untitled Document</title>

        <link rel="stylesheet" type="text/css" href="/iWebmin/test.css" />

    </head>

    <body>

    <div id="container">

    <div id="header">

        head

    </div>

    <div id="content">

    blabla<br />

        blabla<br />

            blabla<br />

                blabla<br />

                    blabla<br />

                        blabla<br />

                            blabla<br />

                                blabla<br />

                                    blabla<br />

                                        blabla<br />

                                            blabla<br />

                                                blabla<br />

                                                    blabla<br />

                                                        blabla<br />

                                                            blabla<br />

                                                                blabla<br />

    </div>

    <div id="footer">

        foot

    </div>

    </div>

    </body>

</html>

CSS

Code:

* {

    margin: 0;

    padding: 0;

}

html, body {

    height: 100%;

}

#container {

    min-height: 100%;

    _height: 100%;

    position: relative;

}

#header {

    background: #FF0000;

    height: 200px;

    width: 100%;

}

#content {

    margin-bottom: 200px;

    height: auto;

    width: 100%;

}

#footer {

    position: absolute;

    bottom: 0;

    width: 100%;

    height: 200px;

    background: #C5C5C5;

}

Screenshot

Jasper · 04-10-2008 08:17:38

XHTML doctype gebruiken.

Mano · 04-10-2008 12:31:17

Deze doctype heb ik nu gebruikt (van jou tut) :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

...

maar het verandert niets aan de zaak

Jasper · 04-10-2008 12:41:44

geef eens een online voorbeeld?

Mano · 04-10-2008 13:26:11

Ik heb geen webruimte, maar dat zijn de enige files.
Hier zijn ze :

.html

test.html (Grootte: 806 bytes / Aantal keer gedownload: 226)
.css

test.css (Grootte: 363 bytes / Aantal keer gedownload: 212)

Jasper · 04-10-2008 13:36:17

http://awardspace.com/
http://www.xtreemhost.com

Mano · 04-10-2008 13:46:38

http://mano.xtreemhost.com/

Jasper · 04-10-2008 14:26:03

ah.. omdat je footer absoluut gepositioneerd staat, dien je een padding-bottom mee te geven ter hoogte van je footer aan je #content div.

Mano · 04-10-2008 15:06:20

Ok bedankt Jasper! Dat doet em et! En het doctype dat ik had werkt dan ook gewoon.
Wil je dan even nog een je tut bij #left en #right margin-bottom veranderen in padding-bottom? want dat is de fout

Bedankt!

Tim · 02-11-2008 22:10:40

Ik geil op deze tutorial<3 Hij is werkelijk overal voor te gebruiken!

Geneste weergave \| Lineaire weergave XHTML, CSS layout 100% height met zelf in te stellen hoogte van je footer!
Auteur	Bericht