-
05-11-2008, 17:23 #1
Juiste CSS instellingen voor footer div te laten meevolgen
Hallo, ik heb hier een layout gemaakt in photoshop, gesliced en geexporteerd met divs. Mijn probleem is niet dat mijn onderste footer div niet mee naar onder volgt als ik in mijn content veel tekst heb. De Tekst verdwijnt er gewoon onder.
Waarschijnlijk is dit op te lossen met CSS, met de juiste instellingen. Heb zit hier al een tijdje te prutsen maar hij volgt dus niet mee naar onder.
Iemand een idee wat ik fout doe? Iets instellen bij de footer?

Dit is de code gegenereerd door photoshop: indexno votes
-
-
06-11-2008, 04:54 #2Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Dat is echt een moeilijke opgave omdat ge dan uw fixed heights gaat moeten wegnemen, en dan gaat daar weer andere code door beïnvloed worden.
Wat ge kunt proberen is alle heights veranderen door min-height en hopen dat het daarmee werkt.
Photoshop exporting pretty much sucks.. Dus die problemen ga je altijd hebben als je dat gebruikt.no votes
-
06-11-2008, 11:20 #3Member
- Registered
- 03/06/08
- Location
- Kinrooi
- Posts
- 489
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
Denk dat ik het werkende heb:
test.html
test.cssCode:<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>...MPOLO || THE BEST..</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="content"> <div id="img1">groen: Img1 --> header</div> <div id="middle"> <div id="img2">blauw: Img2 --> menu</div> <div id="img3">rood: Img3 --> main</div> </div> <div id="img8">geel: Img8 --> footer</div> </div> </div> </body> </html>
Code:@charset "utf-8"; /* CSS Document */ #container{ width:100%; height:100%; } #container #content{ margin:0 auto; width:960px; } #container #content #img1{ background-color:#00FF00; width:960px; height:100px; } #container #content #img2{ background-color:#0000FF; width:200px; height:200px; float:left; } #container #content #img3{ background-color:#FF0000; width:660px; min-height:800px; float:left; } #container #content #img8{ background-color:#FFFF00; width:960px; height:150px; } #container #content #middle{ background-color:#666666; width:960px; /*maak voor hier een background image van 1px hoog en repeat deze de ander afbeeldingen komen over deze heen dus zullen onzichtbaar zijn*/ }
Het speciale wat ik hier dus gebruik is dat ik wat jij wil dat de border word eigenlijk als achtergrond zet in een achtergelegen div.
Waarover ik dan je menubalk en maincontent achtergrond heen plaats.
Zolang je een vaste breedte hebt zou het zeker moeten werken.
Let wel op: dat je width's van de inhoud niet over de width van de container gaat!
Hoop dat dit is wat je zocht, laat iets weten als het werkt
no votes
-
06-11-2008, 11:22 #4Member
- Registered
- 03/06/08
- Location
- Kinrooi
- Posts
- 489
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
no votes
-
06-11-2008, 13:11 #5Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Nu weet ik niet of ge ermee aan't lachen zijt of het serieus bedoeld is.
no votes
-
06-11-2008, 13:16 #6Member
- Registered
- 03/06/08
- Location
- Kinrooi
- Posts
- 489
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
no votes
-
06-11-2008, 13:28 #7Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Dat is niet echt een attitude waarmee ik normaal tegen mijn css aankijk.
Alleen is dat wel iets dat ge altijd in het achterhoofd moet houden als ge met wysiwyg-editors aan het werk zijt en dan de code gaat aanpassen.no votes
-
06-11-2008, 14:31 #8Member
- Registered
- 26/03/03
- Location
- Dendermonde
- Posts
- 5,472
- iTrader
- 28 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/8
Denk dat dit een oplossin voor u probleem kan zijn:
Floatutorial: Tutorial 8 - all steps combinedno votes

