Versio

CSS tut - Deel 3

Een liquid lay-out met CSS

Gesponsorde koppelingen

BHosted Hosting al vanaf € 1,- per maand

Controleer nu gratis jouw domeinnaam:

  

Inhoudsopgave

  1. Liquid lay-out
  2. De header
  3. Sidebar en Content
  4. Floating the sidebar
  5. Content
  6. Crossbrowser CSS

 

49 reacties op 'CSS tut - Deel 3'

PHP hulp
PHP hulp
0 seconden vanaf nu
 
Gesponsorde koppelingen
Kasper Isgek
Kasper Isgek
8 jaar geleden
 
0 +1 -0 -1
Het is weer een goede tutorial! Het was mij overigens in eerste instantie niet duidelijk dat:
<!--[if IE]>
<style>
#header h1 { width: 700px; }
</style>
<![endif]-->
In de head-tag geplaatst moest worden. Overigens gebruik je in je uiteindelijke voorbeeld (op pagina 'Content') een header breedte van 740px, terwijl je hier (op pagina 'De header') een breedte van 700 px gebruikt. Waarom is dat?
Robert Deiman
Robert Deiman
8 jaar geleden
 
0 +1 -0 -1
Leuke tut Jan! Weer duidelijk uitgelegd, en een goed voorbeeld van wat de mogelijkheden zijn van Divs en CSS.
Toch heb ik nog wel een kleine op- /aanmerking. Als in jou voorbeeld de header een andere achtergronskleur geef, dan maakt dat in FF niets uit, maar in IE loopt die header maar 700 px ver door, waardoor er een wit stuk overblijft rechts van die header.
dat is wel aan te passen door de hele pagina een bgcolor te geven, maar zoals jij zei, wanneer je geen breedte opgaf, (kopje content: "Met de breedte doen we helemaal niets, want we willen dat de lay-out liquid is. En standaard heeft een div een breedte van 100%") zou die dus wel 100% breed moeten zijn.
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
@ Kasper: die 740 was uit een eerste versie van de tut. Later heb ik hem aangepast voor PHPhulp maar daar blijkbaar niet. Is inmiddels hersteld.

@ Robert: als je die <h1> in #header een andere background geeft dan krijg je dat, maar als je #header z?lf een andere background geeft, loopt hij ook in IE over de volle breedte bij mij.
Kalle P
Kalle P
8 jaar geleden
 
0 +1 -0 -1
Weer een interessante tut. Hoeveel delen komer er?
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
@ Kalle: thanks! Ik denk hierna nog ??ntje met een wat ingewikkelder lay-out waar ook wat grafische elementen in zitten.
Robert Deiman
Robert Deiman
8 jaar geleden
 
0 +1 -0 -1
@ Jan, ok?.. dus toch echt een liquid layout :) Superdeluxe, ga ik zeker gebruiken dan ;)
- SanThe -
- SanThe -
8 jaar geleden
 
0 +1 -0 -1
Ja, weer een hele nette tut. Ik denk dat ik ze ga inbinden.:-)

Maar ik heb (ook) een paar vraagjes:

<!--[if IE]>
<style>
#header h1 { width: 700px; }
</style>
<![endif]-->
Waarom deze aparte check? Ik bedoel waarom zet je niet gewoon altijd alleen #header h1 { width: 700px; } voor elke browser?

En waarom sluit je soms wel en soms niet de <p> tag af? Dat is toch verplicht?

Quote:
We zorgen dat de #content div een margin van 220 pixels aan de rechterkant heeft, zodat de inhoud aan de rechterkant van de #sidebar verschijnt.

Moet dat niet '220 pixels aan de linkerkant' zijn?
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
@ SanThe:

Die conditional comments gebruik ik hier meer om op de mogelijkheid van het gebruik te wijzen. Je zou inderdaad ook gewoon #header h1 altijd 700px kunnen geven. Zodra een lay-out ingewikkeld wordt komt het wel eens voor dat je echt een apart CSS bestand nodig hebt voor IE dus dan is het handig om van de hier gebruikte methode op de hoogte te zijn.

Die andere dingen zijn foutjes. Ga ik vanavond herstellen. Moet nu muziekles geven :-)
Marien xD
Marien xD
8 jaar geleden
 
0 +1 -0 -1
Nette tuts jan (Y) keep on going, kijk al uit naar de volgende geavanceerdere tutorial ;)
Kasper Isgek
Kasper Isgek
8 jaar geleden
 
0 +1 -0 -1
Jan: de * in jouw stylesheet, is dat een wildcard? Betekent dat dat elk element geen margin en padding heeft, of alleen het html-element (en/of de body)?
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
@ Marien: thanks! Ik moet even uitpuffen van de vorige ;-)

@ Kasper: idd * is een wildcard. Geldt voor elk element.
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen


8 jaar geleden
 
0 +1 -0 -1
Uitstekende tut

[oftopic]hoe kom in godsnaam aan zo'n lange latijnse tekst?[/oftopic]
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
@ Gijs: via www.lipsum.com
Il Fabbro
Il Fabbro
8 jaar geleden
 
0 +1 -0 -1
Even een kleine opmerking, ook een layout in tabellen is aan CSS te linken, al moet je daar bepaalde stijldefinities nog steeds in je html of php opgeven, wat wel weer een nadeel is natuurlijk.

Ga je het centreren ook behandelen? ik wil bijv. een header, content en footer onder elkaar maar dan wel met een vaste breedte en gecentreerd. Hoe pak ik dat het beste aan?
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
@ Il Fabbro: je kunt tabellen ook stylen met CSS, maar ik raad aan een tabel niet voor lay-out te gebruiken, alleen voor tabellarische gegevens.

Header, content en footer, vaste breedte en gecentreerd:

CSS:
#container {
margin: 0px auto;
width: 800px;
}

#header {
/* wat je wilt */
}

#content {
/* wat je wilt */

}

#footer {
/* wat je wilt */
}

HTML:

<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Il Fabbro
Il Fabbro
8 jaar geleden
 
0 +1 -0 -1
Tres Bien, hier kan ik wel weer mee uit de voeten, alleen ik mis het 'centreren'.....??? Of ben ik nou blind? :$ Senks in ieder geval!
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
Het centreren gebeurt door deze regel CSS:

#container {
margin: 0px auto;
Il Fabbro
Il Fabbro
8 jaar geleden
 
0 +1 -0 -1
Klopt helemaal :D Zag het ook toen ik het probeerde. Ben bezig overstap te maken naar Divs, ik zie steeds meer voordelen. Heb mezelf alweer een nieuwe uitdaging gesteld, zal de URL naar het resultaat straks ff plaatsen.
Raymond ---
Raymond ---
8 jaar geleden
 
0 +1 -0 -1
heey,
Ik vroeg me af ofje bij css ook een extern document kan importeren, ik heb namelijk een phpBB forum en die wil ik graag zo hebben:
-----------------------------------------------------
| Header |
| |
-----------------------------------------------------
| | |
| | |
| | |
| | |
| DIV 1 | PHPBB forum |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
-----------------------------------------------------

Dus mijn vraag is: Kan je dat forum ook includen als het ware op die plek zodat mijn eigen test die ik er bij wil blijft staan.
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
@ Raymond: In de pagina's van PHPBB zitten ook hyperlinks. Als je daar op zou klikken ben je je DIV 1 en je Header weer kwijt. In jouw geval kun je beter met frames werken denk ik.
Raymond ---
Raymond ---
8 jaar geleden
 
0 +1 -0 -1
Dus tog frames? Want toen ikmijn site bij site rivieuw zette zijden ze dat ik bter met DIV's kon gaan werken. Mijn site is namelijk nu alin frames, gelukkig ik had hem nog niet helemaalomgebouwt naat CSS
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
Ja, in jouw speciale geval is frames denk ik de beste oplossing.
Il Fabbro
Il Fabbro
8 jaar geleden
 
0 +1 -0 -1
http://test.studioforgia.net mijn eerste site in divs. Alleen de uitlijning van de navigatiebalktekst en de footer krijg ik niet verticaal gecentreerd....
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
In een blocklevel element kun je tekst centreren met

element {
text-align: center;
}

Je site ziet er goed uit, maar maakt nog steeds gebruik van tabellen. De uitdaging van CSS lay-outs, is dat je tabellen niet meer gebruikt voor lay-out. Maar je hebt in ieder geval de eerste stap gezet.
Il Fabbro
Il Fabbro
8 jaar geleden
 
0 +1 -0 -1
Best Jan, ik weet niet hoe je erbij komt maar de link die ik heb gegeven is helemaal uit DIVs opgebouwd... perhaps heb je op de www gekeken, dat is de oude site.... nogmaals, http://test.studioforgia.net
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
Ik heb even gekeken op die site, maar daar zie ik dit in de broncode:

<div id="content"><table>
<tr>
<td><p class="titel">24-01-2006</p></td>
<td><p class="titel">Medewerking Rotterdamse fotografe</p></td>
</tr>
St.Chessere
St.Chessere
8 jaar geleden
 
0 +1 -0 -1
leuke tut maar erg basic en veel te veel onlogische methodes mischien voordat je een tut schrijft moet je je wat meer verdiepen erin.

voorbeeld:

<!--[if IE]>
<style>
#header h1 { width: 700px; }
</style>
<![endif]-->

moet worden:

#header {
height: 100px;
background: #fff;
min-width: 700px;
_width:700px;
}


eigenschappen die beginnen met "_" worden alleen gelezen door ie
J@n Leendert N@p
J@n Leendert N@p
8 jaar geleden
 
0 +1 -0 -1
Leuke tut, zit toch weer nieuwe dingen in wat ik nog niet wist. Toch nog een vraagje: wanneer ik div-element de hoogte instel op 100% is dit nooit zo zichtbaar in de browser. Dat wil zeggen; de hoogte van het div element pas de hoogte gewoon aan de inhoud. Het zelfde geld dat voor tabbellen en span. Hebben jullie een idee hoe je dat wel kunt realiseren met css?
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
@ St. Chessere: een tut met overwegend goede reacties beschouw ik als een goede tut. Dat wil natuurlijk niet zeggen dat ik zelf ook niet iets kan leren. De underscore-hack kende ik nog niet, maar nu wel. "Veel te veel onlogische methodes" lijkt me wat overdreven en is niet specifiek.

Overigens valideert de underscore hack niet en werkt hij niet op IE5/Mac.

@ Jan Leendert Nap: de hoogte instellen is altijd lastig met CSS. In mijn tut staan wat CSS hacks om de min-height voor IE en Opera te bewerkstelligen.
Geert Smit
Geert Smit
8 jaar geleden
 
0 +1 -0 -1
Respect voor de keurige tuts, heb er heel veel van geleerd. Heb alleen nog wat probleem met het VERTICAAL centreren van tekst.. vertical-align: middle; zou toch moeten werken?
Jan Koehoorn
Jan Koehoorn
8 jaar geleden
 
0 +1 -0 -1
@ Geert: met div's geeft het vaak problemen. Hangt van de instellingen van position af. In een <td> gaat het bijvoorbeeld prima.
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Geert Smit
Geert Smit
8 jaar geleden
 
0 +1 -0 -1
Minimum-height wordt door IE niet geaccepteerd. Is hier een alternatief voor of heb ik dit in de tut over het hoofd gezien?
Martijn
Martijn
8 jaar geleden
 
0 +1 -0 -1
@Geert Smit: Ja dat heb je. De manier die Jan Koehoorn gebruik om ook in IE de hoogte in te stellen is:

<style type="text/css" media="screen">

/* Hier al jouw css dingen */

</style>

<!--[if IE]>
<style>
#header h1 { width: 700px; }
</style>
<![endif]-->
Something Else
Something Else
7 jaar geleden
 
0 +1 -0 -1
hmmm na al die geweldig css tut's te lezen van Jan Koehoorn. Kan ik beter overstappen van tabellen naar css ;)
K i p
K i p
7 jaar geleden
 
0 +1 -0 -1
1. )___wat is het nut van dit stukje code in de style.css jan?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
* {}


als ik die code w?l in de style.css zet, wordt de achtergrond netjes die geelachtige kleur, en als ik dat niet doe, dan wordt de achtergrond wit! Hoe komt dat?

voorbeeld met die code: http://www.xxx.nl/test/index.php
voorbeeld zonder die code: http://www.xxx.nl/test/index2.php


2. )___Wat doe je als je er een footer bij wilt?
Ik heb wat (
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
#footer {
font: 0.6em verdana;
float: bottom;
padding: 9px;
height: 30px;
border-top: 2px solid #fff;
}


en html: <div id='footer'>&copy; ....</div>
) geprobeert maar toen kreeg ik dit: http://www.xxx.nl/test/index3.php
Jan Koehoorn
Jan Koehoorn
7 jaar geleden
 
0 +1 -0 -1
@Boris: die achtergrondkleur heeft daar niet rechtstreeks mee te maken. Het * teken is een universele selector, wat betekent dat je daar alle elementen mee pakt.

Over die footer: dat is een stukje ingewikkelder. Om dat te leren kun je het beste de CSS bestuderen van www.jankoehoorn.nl
K i p
K i p
7 jaar geleden
 
0 +1 -0 -1
[1]Maar het zou toch niet uit moeten maken of er in een style wel of niet * {} staat? Dat doet het nu wel! Hoe komt dat?[/1]


[2]Ik heb ook een vraag over dat maakdoorzichtigeGIF'scursusje op je site. Ik kan niet selecteren "sla op voor web". Hoe komt dat?
http://img507.imageshack.us/img507/8380/gifmaken8kr.jpg[/2]
Kalle P
Kalle P
7 jaar geleden
 
0 +1 -0 -1
1. WTF boeit het? waarom werkt width wel en breedte niet, omdat dat nou eenmaal zo is ;P

2. Ik weet niet welke versie jij hebt of er is iets met je instellingen, wat je instelt bij Nieuw. Misschien dat het zonder verdere aanpassingen werkt als je naar Imageready gaat [in je geopende document, onderste button klikken of SHIFT + CTRL + M] en dat je daar voor je plaatje Save Optimized (As) kiest dat als je dan voor .gif afbeelding kiest je dan ook doorzichtig krijgt. Maar ik weet dit niet 100% cker.
K i p
K i p
7 jaar geleden
 
0 +1 -0 -1
1. Het is toch raar dat je zegt:
* {}
Dat betekent eigenlijk gewoon:
"Alles moet zijn: "
Ja niks dus. En als je dat wel in de code zet wordt de achtegrond geel.... Ik vind dat raar!


2. Ja, dat zei een vriend van mij ook al, dat ImageReady, heb ik alleen niet. :-(
Something Else
Something Else
7 jaar geleden
 
0 +1 -0 -1
@Jan Koehoorn
Jouw css gedeelte ligt eruit?
Ik bedoel op jou site?
De hoofdpagina kan ik wel zien, rest van de linkt niet geprobeerd! ;p
Jan Koehoorn
Jan Koehoorn
7 jaar geleden
 
0 +1 -0 -1
@Jermaine: mijn site doet het gewoon hoor. Sommige pagina's zijn nog leeg ;-)
Something Else
Something Else
7 jaar geleden
 
0 +1 -0 -1
aaah ok ;D.
Nou ben begonnen met jou tut wel lekker duidelijk :-).
Ik werkte altijd met tabellen :-O.
Maar als je css in een aparte .css bestand zet, hoef je toch niet dit <style></style> te doen? of mag dat wel?

In een aparte .css bestand werkt dit toch ook?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
margin: 0px;
padding: 0px;
}
body {
background: #fe8;
}
h1 {
font: bold 14px arial;
}
h2 {
font: bold 12px arial;
margin-top: 5px;
}
#header {
height: 100px;
min-width: 700px;
}
#sidebar {
float: left;
padding: 9px;
width: 200px;
border-right: 2px solid #fff;
}
#content {
margin: 0px 10px 0px 220px;
padding: 9px;
}
p {
font: 0.6em verdana;
}

<!--[if IE]>

#header h1 { width: 700px; }

<![endif]-->


Hoop dat het een beetje duidelijk is :x.
Ik heb een excuse, was met m'n vrouw lekker gaan stappen ;-)

p.s. wanneer komt je 4e deel uit, kan niet wachten :-D:-D
Erik Rijk
Erik Rijk
7 jaar geleden
 
0 +1 -0 -1
volgens mij krijg je iets op je scherm wat je niet wilt als je de style tags gebruikt.
maar dat ligt er ook weer aan hoe je het bestand include.

<link rel="" type="" href=""> gebruik ik zelf altijd.

<? include('style.css'); ?> zal ook prima werken
Jan Koehoorn
Jan Koehoorn
7 jaar geleden
 
0 +1 -0 -1
De beste methode is deze. In de <head> sectie plaats je deze code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<style type="text/css">
    @import 'stylesheet.css';
</style>
K i p
K i p
7 jaar geleden
 
0 +1 -0 -1
Quote:
Daarover misschien meer in een volgende tut die een ingewikkelder lay-out behandelt.


Ik wacht in spanning!! :-D
Jan Koehoorn
Jan Koehoorn
7 jaar geleden
 
0 +1 -0 -1
Dan zul je nog even langer moeten wachten Boris. Het schooljaar is begonnen en ik heb het erg druk met leerlingen roosteren (in de goede zin van het woord, ik gooi ze niet op de barbecue).
K i p
K i p
7 jaar geleden
 
0 +1 -0 -1
Jammer :-p
Jonathan -
Jonathan -
7 jaar geleden
 
0 +1 -0 -1
Ja, vind het ook jammer, want jouw tuts zijn echt zooooo goed! Als ik je een rapportcijfer zou moeten geven was het boven de 10!
Andreas Warnaar
Andreas Warnaar
7 jaar geleden
 
0 +1 -0 -1
Voor de mensen die nu verkocht zijn aan css...

Ik roep het al op verschillende topics, de volgenden site zijn het lezen waard want ik heb er bijna alles van geleerd.

www.handleidinghtml.nl
www.cssplay.co.uk

Op de laatste site vind je heel veel ingewikkelde lay-out, menu's en workarounds voor IE ..

Maar ik wacht met spanning af wat Jan z'n volgende tut wordt, want ze zijn helder en duidelijk...

Om te reageren heb je een account nodig en je moet ingelogd zijn.

  • Labels
  • Geen tags toegevoegd.
Get Adobe Flash player