/u/294566/tennis.png?f=community)
Ik wil onderstaande (plaatje) bereiken met losse divs. Dat is volgens mij semantisch beter. Ik krijg het alleen niet voor elkaar met css. Het doel is dat zowel #content als #features de #footer naar beneden pushen.
Vanalles geprobeerd met css:position maar dat werkt niet afdoende.
vb: #content {position:absolute;} laat #features tegen #header aanvallen. #footer gaat mee omhoog. Maar #footer moet onder #content bijven hangen.
Bij het gebruikt van css:floating gaat mijn absolute #menu er vandoor in IE7 helaas. Dat is waarschijnlijk dus niet de oplossing.
Q: Iemand van jullie die een nette oplossing weet?
Update 1 / Notes:
• Ik heb een hartgrondige hekel aan wrappers (fake table layouts). Zolang mogelijk zonder wrappers bouwen.
•
AJB GEEN BROWSER-DISCUSSIETOPIC VAN MAKEN. REAGEER DAN GEWOON NIET AJB. 
Update 2:
Ik heb nu dit in HTML5 en CSS. IE7 wil het menu niet op zijn plaats renderen. Moet ik IE7 hacken, of is dit nu tóch nog netjes op te lossen? Dan moet ik er vroeg=nu bij zijn. Na veel pogingen met wisselende posities van het #menu in de html layout en verschillende css:position mogelijkheden kom ik er toch niet uit.
Rendering getest in: FF3.6, IE8IE8rendermode, IE8IE7rendermode.
Update 3:
Crap: update 3 laat op zich wachten. Als er te weinig menu-items zijn valt #content helemaal naar links.
Opgelost met een css:min-height op #menu. (Is moeilijk netter te maken denk ik. Bovendien is het niet zichtbaar in de echte kleurstelling van de site).
De update is:
• #menu, #content en #features {float: left;} gemaakt. Het renderd nu goed in IE8, IE7, FF3.6
• #menu {position: absolute;} verwijderd
Vanalles geprobeerd met css:position maar dat werkt niet afdoende.
vb: #content {position:absolute;} laat #features tegen #header aanvallen. #footer gaat mee omhoog. Maar #footer moet onder #content bijven hangen.
Bij het gebruikt van css:floating gaat mijn absolute #menu er vandoor in IE7 helaas. Dat is waarschijnlijk dus niet de oplossing.
Q: Iemand van jullie die een nette oplossing weet?
Update 1 / Notes:
• Ik heb een hartgrondige hekel aan wrappers (fake table layouts). Zolang mogelijk zonder wrappers bouwen.
•
AJB GEEN BROWSER-DISCUSSIETOPIC VAN MAKEN. REAGEER DAN GEWOON NIET AJB. Update 2:
Ik heb nu dit in HTML5 en CSS. IE7 wil het menu niet op zijn plaats renderen. Moet ik IE7 hacken, of is dit nu tóch nog netjes op te lossen? Dan moet ik er vroeg=nu bij zijn. Na veel pogingen met wisselende posities van het #menu in de html layout en verschillende css:position mogelijkheden kom ik er toch niet uit.
Rendering getest in: FF3.6, IE8IE8rendermode, IE8IE7rendermode.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html> <html lang="nl"> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Index</title> </head> <body> <div id="header">HEADER</div> <div id="menu">MENU<br />insert blabla for test</div> <div id="content">CONTENT<br />insert blabla for test</div> <div id="features">FEATURES</div> <div id="footer">FOOTER</div> </body> </html> |
Update 3:
Crap: update 3 laat op zich wachten. Als er te weinig menu-items zijn valt #content helemaal naar links.
Opgelost met een css:min-height op #menu. (Is moeilijk netter te maken denk ik. Bovendien is het niet zichtbaar in de echte kleurstelling van de site).
De update is:
• #menu, #content en #features {float: left;} gemaakt. Het renderd nu goed in IE8, IE7, FF3.6
• #menu {position: absolute;} verwijderd
Cascading Stylesheet:
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
| body { margin: 25px auto 0; width: 980px; } #header { height: 250px; } #menu { float: left; margin-left: 50px; margin-top: -205px; min-height: 200px; /*FIX zodat #content niet helemaal naar links vliegt bij te weinig menu items.*/ width: 215px; } #content { float: left; width: 500px; } #features { float: left; width: 215px; } #footer { clear: both; } /*Even voor de test wat kleurtjes. Geen left/right borders, die kicken de layout*/ div { background: grey; border-top: 2px solid lime; border-bottom: 2px dotted blue; margin-bottom: 5px; } |
[ Voor 69% gewijzigd door Barleone op 24-04-2010 01:45 . Reden: Updates toegevoegd. ]
Tweakers.net 6 nostalgie! - Wayback Machine
Have you tried turning it off and on again?
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
Zoals je het nu hebt met de extra container heb je die hele clearing niet meer nodig dus, overflow: hidden daarop is genoeg (en eventueel hasLayout triggeren voor IE6 om dat daar ook te laten werken).
.
)
:strip_exif()/u/259931/stuiterbal2.gif?f=community)
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
Gelukkig zijn de meesten hier aardig kundig met die zaken 
Lees /u/126415/Webberry_logo2008.png?f=community){kind=logo}
