Div tag in andere div tag werkt niet

[brendaatje]

Hoi,

Ben bezig met het aanpassen van een website. Het was eerst een site met een schuifbalk, maar die heb ik weggehaald zodat je gewoon naar beneden moet scrollen om alles te lezen.

Nou heb ik alleen een probleem met het meeschuiven van de divtag 'wrapper':

Ik heb een body met daarin een div tag 'wrapper'
in deze 'wrapper' zit de header, de navigatie, de content en de footer. De 'wrapper' heeft de achtergrond kleur wit.
Als de inhoud in mijn divtag 'content' groter wordt, zoals nu het geval is, zou bij mijn weten de div tag 'wrapper' automatisch ook groter moeten worden en zou de ruimte onder 'navigatie' wit moeten worden. Maar nu blijft ie groen. Hij blijft dus ergens hangen o.i.d.

Ik kom er zelf echt niet uit. De wrapper heeft geen height dus dat is het niet en ik weet echt even niet waar ik het moet zoeken.
wie kan me helpen?
De link van de site: www.frankderuijtertuintekenburo.nl/welkom.htm

oh en hoe krijg ik het voor elkaar dat mijn tekst in de footer gewoon op 1 regel verschijnt?
Ben maar beginnend bouwer, dus graag een simpele uitleg

Groeten Brenda

 

[csshunter]

Hoi brendaatje,
Je hebt de #navigatie een {float:left;} gegeven, waarmee deze buiten de "normal flow" (de normale stroom van de html) is komen te staan, en de achtergrondkleur van de #wrapper buitenspel gezet wordt.
Om de achtergrondkleur te laten doorlopen, moet het gefloate element "gecleared" worden op het punt waar de normal flow moet doorlopen (waar deze er niet naast mag komen te staan). Hier: vlak voor de #footer.

Dit doe je door in de css op te nemen:

.clearB {
   height: 1px; /* de clearing div heeft automatisch een breedte van 100% */
   clear: both; /* voor de veiligheid, als de rechts-gefloate #content klein is */
   margin-bottom: -1px; /* per saldo toch geen hoogte! */
}

(Je kunt ook een losse {clear: left;} of {clear:right;} geven, als iets onder een links- of recht-gefloat element moet starten)

En in de html:

<!-- InstanceEndEditable -->
   <div class="clearB"><!-- ! --></div>
   <div id="footer" ... enz.

-- Het probleem van de groter dan 1-regelige #footer zie ik niet: in welke browser(versie) gebeurt dat?

Met vriendelijke groet,
CSShuntertje

 

[brendaatje]

Geweldig..het werkt!! Bedankt. Zo frustrerend als iets niet wil lukken

Die footer verschijnt zo raar in internet explorer. Als ik de site bekijk vanuit dreamweaver met F12 staat het wel goed, maar online dus niet helaas.
Maar goed..dat is geen ramp..zou alleen wel leuk zijn als het ook in IE werkt.
Heb de footer een align 'right' gegeven, maar er is links nog ruimte zat, dus snap niet zo goed waarom het niet opschuift. Dit is de CSS van de footer:

#footer {
height: 20px;
width: 940px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding-right: 10px;
padding-top: 10px;
background-color: #ffffff;
float: right;
}

Nogmaals bedankt!

 

[csshunter]

Hoi Brenda,
Ik snap het nog steeds niet: in Internet Explorer 7 komt de onderste regel er bij mij altijd volledig op; bij alle beeldschermformaten, en ook bij alle lettergrootes.
Zelfs in IE6 kan ik de footer niet van de ene regel af krijgen.

Zou het misschien kunnen zijn dat je nog een oude versie aan het bekijken bent, omdat er nog Tijdelijke Internet Bestanden op je computer staan (de z.g. "cache")?

• Die kan je in IE wissen *) via menu: Extra > Internetopties > Tabblad Algemeen > Browsegeschiedenis > Knop "Verwijderen ..."
• IE geeft dan een overzicht van dingen die je allemaal kunt verwijderen. Kies de onderste knop "Alles verwijderen...".
• IE vraagt: "Weet u het zeker?"
• Ja hoor, dat ruimt lekker op!

Als je daarna weer naar de site gaat, zou het goed moeten zijn. Of toch niet?

En verder: op mijn resolutie van 1024x768px zie ik op de allereerste beginpagina van de site net niet de knop "Enter Site", die zit onder de waterlinie.

• Als je de afbeelding wat verkleint, past het er wel mooi op zonder dat je meteen moet gaan scrollen.
• Ook zou ik er wat tekst op zetten (trefwoorden voor Google!), anders denken zoekmachines dat het een onbelangrijke pagina is, en zakt ie in de ranglijst.
• Bijvoorbeeld zoiets: www.developerscorner.nl/csshunter/tests/test-ttb.htm.
  (Zie broncode)

Met vriendelijke groet,
CSShunter
__________
*) Eerst even van de site afgaan, dan kan die niet per ongeluk toch blijven hangen.