Background, hoe plaats ik hem goed?
Ik ben bezig met een basing voor een nieuwe website. Ik heb hier het probleem dat ik een grijze background heb die over de volledige breedte van het scherm moet komen en pas mag beginnen bij de hoogte van de header en loopt tot de onderkant van de content (pagina met tekst).
Ik heb al verschillende dingen geprobeerd met position absolute en z-index om hem naar achter te krijgen. Maar ik krijg het niet voor elkaar om hem tot aan de onderkant te laten lopen.
Link: http://rubenportier.dnsalias.net/basing/ulanto2/
Maak een wrapper om de content div die net zo breed is als de pagina en die in de hoogte rekt wanneer content langer/korter is en zet daar de achtergrond op.
Toevoeging op 07/05/2011 15:54:47:
Als je nu even kijkt is het me al gelukt om het bovenste deel te maken. Hoe kan ik nu maken waar je onderaan dat witte vlak ziet dat het tot onderaan de pagina wit is? Dus het moet vanaf daar altijd wit blijven.
Hij is namelijk wel valid, maar je doet zoveel dingen steeds dubbel dat er geen enkel overzicht in zit, zo geef je steeds het font opnieuw mee, terwijl je beter
Code (php)
1
2
3
2
3
body {
font-family:xx
}
font-family:xx
}
kan doen in plaats van dat steeds opnieuw doen enzovoort.
Misschien ook slim je body een margin en padding van 0 mee te geven
Maar hoe kan ik dit nu het beste oplossen? Want ik zou het eigenlijk niet meteen weten.
Bedankt alvast!
Ik snap trouwens niet wat nu het probleem nog is?
Het probleem is namelijk het volgende:
Ik wil dat de grijze achtergrond (die je in het voorbeeld ziet) allee achter de header en de content zit. Dit klopt al. Alleen nu wil ik onderaan een div plaatsen om het weer wit te maken. Hoe kan ik ervoor zorgen dat het wit tot onderaan de pagina loopt? Of zouden jullie dat grijze background op een andere manier doen?
Ik heb nu een grijze background op de body en dan een witte div die er over gaat tot aan de header.
Link: http://rubenportier.dnsalias.net/basing/ulanto2/
http://3t4gua.blu.livefilestore.com/y1p8_-XnZ01zjTIoCx3Ke49Qwe4BAC256-gKzP3pFXEwguad52nWADM64zPfBWDLniGriqm1DFcj-5-24w4qpWC3HPcOW48llYx/origineel.png?psid=1
http://imageshack.us/photo/my-images/535/seey.jpg/
Gewijzigd op 07/05/2011 17:12:01 door Sander A
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
</head>
<body>
<div id="HEADER>
</div>
<div id="CONTENT>
</div>
<div id="FOOTER>
</div>
</body>
</html>
<head>
</head>
<body>
<div id="HEADER>
</div>
<div id="CONTENT>
</div>
<div id="FOOTER>
</div>
</body>
</html>
en je css:
Code (php)
1
2
3
2
3
#CONTENT {
background-color:grey;
}
background-color:grey;
}
Gewijzigd op 07/05/2011 17:18:49 door Ozzie PHP
Daarnaast gebruik je hoofdletters, kleine letters zijn beter en je sluit html meteen al af
Toevoeging op 07/05/2011 17:16:43:
@Ruben, geef je body width 100%, daarna moet het wel kunnen
Sander A op 07/05/2011 17:16:15:
Het is ten sterkste afgeraden kleuren aan te geven in woorden, hexcodes zijn beter.
Daarnaast gebruik je hoofdletters, kleine letters zijn beter en je sluit html meteen al af
Daarnaast gebruik je hoofdletters, kleine letters zijn beter en je sluit html meteen al af
Hexcodes zijn niet beter en ik weet niet welke hij heeft gebruikt. Daarom gebruik ik het woordje grey. Hoofdletters gebruik je om ID's aan te geven wat een goede gewoonte is onder professionals. Die html afsluiting was inderdaad niet goed, dat moest mn head zijn en is aangepast.
Ik heb je een uur geleden al een PM gestuurd je vrijwillig te helpen, misschien werkt dat sneller
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<html>
<head>
</head>
<div id="header"></div>
<div id="container">
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
</html>
<head>
</head>
<div id="header"></div>
<div id="container">
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
</html>
container geef je dan width 100%, en grijze bg
content geef je de juiste breedte en centreer je
Gewijzigd op 07/05/2011 17:26:52 door Sander A