[CSS] Div achtergrond kleur vult niet.

[Tjirp]

Na zoeken op google, hier op tweakers, het bekijken van het groepsproject en het nog meer zoeken op google ben ik er nog niet uit.

zoals bijna iedereen gebruik ik ook divs voor het potitioneren op mijn website.

nu heb ik aan de linkerkant een leftnav voor de knoppen.
als ik hieraan een achtergrond kleur zet, dan houd deze op waar de buttons ophouden.



zoals je ziet word de div niet gevuld tot onderaan, maar tot aan het einde van de content.

mijn leftnav:

Cascading Stylesheet:

#leftnav
{
background-color: #bfbfbf;
float: left;
width: 200px;
margin: 0;
padding: 1em;
}

Verder is er geen andere code die hiermee te maken kan hebben, alleen de body heeft een bg image

Cascading Stylesheet:

body { 
background-image: URL(bg.gif);
background-repeat: repeat;
}

ik kom er niet uit hoe ik ervoor zorg dat de gehele div gewoon een mooi achtergrond kleurtje krijgt.

(ps. ik heb al geprobeerd: height: auto; height: 100px; height: 100% (om uit te testen)).
(ps2. ik heb het momenteel alleen gecontroleerd in IE6 (ik zit op het werk)).

[Swaptor]

Zoek eens op faux columns.

[wboevink]

De height van de div instellen?

Het zal lukken als je de height van de div op 100% zet en waarschijnlijk moet je dan ook de height van de body tag op 100% zetten.

[Tjirp]

Swaptor schreef op woensdag 09 januari 2008 @ 10:44:
Zoek eens op faux columns.

Ook met een bg image voor mijn container en overflow: hidden is er geen verschil.

Cascading Stylesheet:

/* HTML net toegevoegd op advies, werkt ook niet */
html { 
min-height: 100%;
height: auto;
}


body {
  text-align: center;
  background-image: url(images\pattern_bg.gif);
  background-repeat: repeat;
  height: 100%;
}

#container
{
width: 800px;
text-align: left;
background: URL(images\pattern_bg.gif);
margin: 0 auto;
border: 1px solid gray;
padding: 0px;
overflow: hidden;
}


#leftnav
{
background-color: #bfbfbf;
border: 1px solid red;
float: left;
width: 200px;
margin: 0;
padding: 1em;
height: 100%;
}

#content
{
margin-left: 200px;
padding: 1em;;
max-width: 36em;
background-color: #cfcfcf;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

ps. ik had faux columns al geprobeerd, ik zie verder ook geen verschil in mijn code dan de code van faux.


editje:
ook het instellen van height: 100%; bij body en leftnav werkt niet.

[ Voor 23% gewijzigd door Tjirp op 09-01-2008 11:29 ]

[PeterSelie]

voeg dit eens toe aan je stylesheet:

Cascading Stylesheet:

html {
    min-height: 100%;
    height: auto;
}

body {
    height: 100%;
}

Een Div resized niet automatisch de hele 'html body' naar 100%

[Tjirp]

SoaDmaggot schreef op woensdag 09 januari 2008 @ 11:19:
voeg dit eens toe aan je stylesheet:

Cascading Stylesheet:

html {
    min-height: 100%;
    height: auto;
}

body {
    height: 100%;
}

Een Div resized niet automatisch de hele 'html body' naar 100%

Ook dat heeft niet geholpen.

PS. Voor leesbaarheid code hierboven aangepast, zonder alle extra's, alleen wat het probleem oplevert.

PS2:
Misschien handig om te zeggen, met de faux setup wat er nu gebeurd is dat ipv de column zicht verhoogt, om de content div gelijk te krijgen, de leftnav niks doet, maar op de achtergrond zie je wel de background image (waar de leftnav div dus ophoud).

[ Voor 22% gewijzigd door Tjirp op 09-01-2008 11:36 ]

[Saeverix]

http://www.neuroticweb.com/recursos/3-columns-layout/

Als je de Header en Footer niet wilt kun je die wel weg halen door ze niet zichtbaar te maken. Hoogte aanpassen bijvoorbeeld. Je moet ze niet verwijderen, want ze hebben een functie.

[ Voor 63% gewijzigd door Saeverix op 09-01-2008 12:00 ]

[Tjirp]

Saeverix schreef op woensdag 09 januari 2008 @ 11:53:
http://www.neuroticweb.com/recursos/3-columns-layout/

Als je de Header en Footer niet wilt kun je die wel weg halen door ze niet zichtbaar te maken. Hoogte aanpassen bijvoorbeeld. Je moet ze niet verwijderen, want ze hebben een functie.

als ik dit precies overneem, letter voor letter. werkt die ook niet juist.

ik hou dan namenlijk hetzelfde probleem. namenlijk: waar de text ophoud, houd de div background ook op. vanaf daar gaat de wrapper background verder (images\pattern_bg.gif) en niet, zoals het moet, de div background kleur

[ Voor 20% gewijzigd door Tjirp op 09-01-2008 12:09 ]

[Verwijderd]

Volgens mij kun je alleen 100% height gebruiken icm doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Lang geleden dat ik zo'n site heb gemaakt maar volgens mij ging dat niet anders, zie pedak.nl als (slecht)voorbeeld.

[edit]
Nm... denk niet dat je hier zo wat aan hebt... zie faux opmerking hieronder...

[ Voor 15% gewijzigd door Verwijderd op 09-01-2008 12:21 ]

[Tjirp]

Verwijderd schreef op woensdag 09 januari 2008 @ 12:09:
Volgens mij kun je alleen 100% height gebruiken icm doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Lang geleden dat ik zo'n site heb gemaakt maar volgens mij ging dat niet anders, zie pedak.nl als (slecht)voorbeeld.

doctype van mijn test.html is momenteel al
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

[disjfa]

Swaptor schreef op woensdag 09 januari 2008 @ 10:44:
Zoek eens op faux columns.

Ik quote je even want ik denk niet dat de ts jouw opmerking heeft gelezen....

Hier
http://www.alistapart.com/articles/fauxcolumns/

[Tjirp]

disjfa schreef op woensdag 09 januari 2008 @ 12:16:
[...]

Ik quote je even want ik denk niet dat de ts jouw opmerking heeft gelezen....

Hier
http://www.alistapart.com/articles/fauxcolumns/

zeker had ik hem gelezen,

maar ik heb hem verkeerd gelezen. ik heb alles nog 3 keer overgelezen en ben nu eindelijk achter het principe gekomen.

het is me gelukt,
bedankt allemaal.

[PeterSelie]

En, wat precies zat er fout? Misschien is dat ook handig om even te vermelden

[ Voor 66% gewijzigd door PeterSelie op 09-01-2008 12:45 ]

[Saeverix]

Tjirp schreef op woensdag 09 januari 2008 @ 12:04:
[...]


als ik dit precies overneem, letter voor letter. werkt die ook niet juist.

ik hou dan namenlijk hetzelfde probleem. namenlijk: waar de text ophoud, houd de div background ook op. vanaf daar gaat de wrapper background verder (images\pattern_bg.gif) en niet, zoals het moet, de div background kleur

Dat is nou juist de truuk... Met een Background moet het lijken alsof de DIV tot onderen doorgaat.
Dat is nou juist Faux Colums... Precies het zelfde als de oplossing die je nu hebt...

[Tjirp]

de fout was in mijn denkwijze:

Doordat ik een BG plaatje neerzet denkt de div dat die door loopt en dus zichzelf uitschuift.

de juist denkwijze moet zijn, zoals hierboven:
Door een bg plaatje neer te zetten lijkt het alsof de div doorloopt, terwijl dit gewoon de achtergrond van de container is.

[Saeverix]

Tjirp schreef op woensdag 09 januari 2008 @ 17:01:
de fout was in mijn denkwijze:

Doordat ik een BG plaatje neerzet denkt de div dat die door loopt en dus zichzelf uitschuift.

de juist denkwijze moet zijn, zoals hierboven:
Door een bg plaatje neer te zetten lijkt het alsof de div doorloopt, terwijl dit gewoon de achtergrond van de container is.

Dat verklaart jouw opmerkingen
Maar het mooie is dat het nu opgelost is...

[ Voor 4% gewijzigd door Saeverix op 09-01-2008 22:34 ]