/u/26561/mahi001.png?f=community)
We hebben weer eens een layout probleem omdat sommige browsers alles anders interpreteren. Het probleem? Ik wil een site met vaste breedte van 800px die horizontaal gecentreerd staat. Geen probleem... De site heeft bovenaan en onderaan respectievelijk een header en footer over de volle 800 pixels. Geen probleem. Daartussen is links een menu van 200px breed en de eigenlijke content van de overige 600px. Geen probleem...
De code die ik gebruik:
CSS:
HTML:
Maar... In de content container waar de eigenlijke site-inhoud komt, wordt vaak ook code geplaatst. Dit staat natuurlijk tussen de <pre> tags. Wat is nu het probleem? Een lijn tussen die <pre> tags wordt niet afgebroken als ze te breed is voor de content container. Hetzelfde natuurlijk als er een lang woord zonder spaties of afbreekstreepjes in de gewone tekst voorkomt (zoals een URL bv). In dit geval zullen Opera en Mozilla/Firefox die te lange regel gewoon buiten de container verder laten lopen zonder de layout echt te verneuken:
Dus nu de vraag, hoe los ik dit probleem op? Ik heb reeds enkele zaken bedacht, maar niets werkt zoals het hoort.
Zo dacht ik bijvoorbeeld om de main div als attribuut "position: relative;" mee te geven en dan de menu en content div via "position: absolute;", "top" en "left" correct te positioneren. Dat werkt wel gedeeltelijk... De content div verbreedt natuurlijk nog wel in IE, maar blijft nu wel op de juiste plaats. Maar door de "position: absolute;" schijnen de menu en content div schijnbaar geen hoogte meer voor de main div. Met andere woorden, de main div heeft hoogte 0 en de footer div plakt onder de header. Totaal verkeerd natuurlijk... De footer ook absoluut positioneren? Maar je kent de hoogte niet van het menu, noch van de content. Niet goed dus...
Een ander idee was het overflow attribuut gebruiken. Schitterend ding, ware het niet dat Internet Explorer dat op een zeer vreemde en onbruikbare manier interpreteert. Alleen "overflow: hidden;" werkte goed, maar dan is de content die te breed is gewoon onzichtbaar en dat is ook niet echt de bedoeling. Ook Mozilla doet dan trouwens raar door rechts in de content div plaats te voorzien voor een verticale scrollbalk (die niet zichtbaar is maar wel de layout verneukt).
Iemand andere ideeën die hopelijk wel werken?
Even ter verduidelijking; tables zijn uitgesloten en de code dient W3C CSS 2.0 en XHTML 1.1 Strict compliant te zijn.
De code die ik gebruik:
CSS:
code:
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
38
| div {
margin : 0px;
padding : 0px;
}
div.header {
margin-left : auto;
margin-right : auto;
width : 800px;
height : 100px;
}
div.spacer {
clear : both;
}
div.main {
margin-left : auto;
margin-right : auto;
width : 800px;
}
div.menu {
float : left;
width : 200px;
}
div.content {
float : left;
width : 600px;
}
div.footer {
margin-left : auto;
margin-right : auto;
width : 800px;
height : 20px;
} |
HTML:
PHP:
Dat is natuurlijk zeer simplistisch voorgestelde code, maar dat geeft iets in de aard van:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!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" xml:lang="en" > <head> <title>test</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header">Header</div> <div class="main"> <div class="spacer"></div> <div class="menu">Menu</div> <div class="content">Inhoud pagina (content)</div> <div class="spacer"></div> </div> <div class="footer">Footer</div> </body> </html> |
code:
Dat werkt allemaal heel mooi. Zowel in Opera als in Mozilla/Firefox als in Internet Explorer.1
2
3
4
5
6
7
8
9
10
11
12
13
| +--------------------------------------+
| div.header |
+--------+-----------------------------+
| | |
| | |
| div. | |
<------> | menu | div.content | <------>
| | |
| | |
| | |
+--------+-----------------------------+
| div.footer |
+--------------------------------------+ |
Maar... In de content container waar de eigenlijke site-inhoud komt, wordt vaak ook code geplaatst. Dit staat natuurlijk tussen de <pre> tags. Wat is nu het probleem? Een lijn tussen die <pre> tags wordt niet afgebroken als ze te breed is voor de content container. Hetzelfde natuurlijk als er een lang woord zonder spaties of afbreekstreepjes in de gewone tekst voorkomt (zoals een URL bv). In dit geval zullen Opera en Mozilla/Firefox die te lange regel gewoon buiten de container verder laten lopen zonder de layout echt te verneuken:
code:
Daar kan ik mee leven... Maar Internet Explorer moet natuurlijk weer mottig kunnen doen. In plaats van ook gewoon voorbij de rand van de container te renderen, verbreedt IE de container zodat de inhoud past. Maar dat verneukt natuurlijk wel heel de layout. De main div is namelijk 800 pixels breed, daarin een menu van 200 pixels en een content die breder is dan 600 pixels. 200 + meer dan 600 is natuurlijk niet kleiner of gelijk aan 800. Dus een probleem wat zich uit als:1
2
3
4
5
6
7
8
9
10
11
12
13
| +--------------------------------------+
| div.header |
+--------+-----------------------------+
| | Dit is een veel te lange regel
| | |
| div. | |
<------> | menu | div.content | <------>
| | |
| | |
| | |
+--------+-----------------------------+
| div.footer |
+--------------------------------------+ |
code:
Waardeloos dus. Als het aan mij lag dan zou ik natuurlijk eens gemeen lachen en zeggen dat al die IE-gebruikers pech hebben, maar er is nog steeds iets van een 80-90% die IE gebruikt zodat de site er voor hen maar best ook goed uit ziet 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| +--------------------------------------+
| div.header |
+--------+-----------------------------+
| | |
| | |
| div. | |
<------> | menu | (div.main) | <------>
| | |
| | |
| | |
+--------+-----------------------+ |
| Dit is een veel te lange regel | |
| | |
| | |
| div.content | |
| (breder dan 600px) | |
| | |
+--------------------------------+-----+
| div.footer |
+--------------------------------------+ |
Dus nu de vraag, hoe los ik dit probleem op? Ik heb reeds enkele zaken bedacht, maar niets werkt zoals het hoort.
Zo dacht ik bijvoorbeeld om de main div als attribuut "position: relative;" mee te geven en dan de menu en content div via "position: absolute;", "top" en "left" correct te positioneren. Dat werkt wel gedeeltelijk... De content div verbreedt natuurlijk nog wel in IE, maar blijft nu wel op de juiste plaats. Maar door de "position: absolute;" schijnen de menu en content div schijnbaar geen hoogte meer voor de main div. Met andere woorden, de main div heeft hoogte 0 en de footer div plakt onder de header. Totaal verkeerd natuurlijk... De footer ook absoluut positioneren? Maar je kent de hoogte niet van het menu, noch van de content. Niet goed dus...
Een ander idee was het overflow attribuut gebruiken. Schitterend ding, ware het niet dat Internet Explorer dat op een zeer vreemde en onbruikbare manier interpreteert. Alleen "overflow: hidden;" werkte goed, maar dan is de content die te breed is gewoon onzichtbaar en dat is ook niet echt de bedoeling. Ook Mozilla doet dan trouwens raar door rechts in de content div plaats te voorzien voor een verticale scrollbalk (die niet zichtbaar is maar wel de layout verneukt).
Iemand andere ideeën die hopelijk wel werken?
Even ter verduidelijking; tables zijn uitgesloten en de code dient W3C CSS 2.0 en XHTML 1.1 Strict compliant te zijn.
A bus station is where a bus stops. A train station is where a train stops... On my desk I have a workstation.
:strip_icc():strip_exif()/u/94734/johnnybravo.jpg?f=community)
maar goed.:strip_exif()/u/925/cookieani.gif?f=community)
:strip_icc():strip_exif()/u/6754/image.jpg?f=community)
:strip_icc():strip_exif()/u/38191/avatar-got.jpg?f=community){kind=avatar}
:strip_icc():strip_exif()/u/89682/henk.jpg?f=community)