[opgelost]css-layout 100% height lukt niet helemaal

[tuxy]

Beste webdesigners,

Ben bezig met de ontwikkeling van een site in kompozer 0.8b1.

Dit lukt redelijk goed, maar heb een probleem om de juiste 'hoogte' vd site in te stellen.

Het is de bedoeling, dat de site de volledige viewport vd browser inneemt zelfs als de tekst maar enkele regels lang is. Dit lukt wel!

http://www.merlinsmagiccakes.be/beta/partic.htm
(de div voor de content noemt hier '#right')

Maar als de content langer is dan de viewport vd browser, dan gebeurt er een overlapping vd div '#container' incl. '#footer'.

http://www.merlinsmagiccakes.be/beta/contact.htm
(de div voor de content noemt hier '#rightwhite')

Ik heb al verschillende tutorials doorgenomen, maar helaas blijft het probleem.

http://www.gigadesign.be/2006/07/layout-met-100-hoogte/
http://www.xs4all.nl/~peterned/examples/csslayout1.html

Wat doe ik verkeerd? Wie kan me verder helpen?

Christophe

[nirwana]

Christophe,

Allereerst welkom hier op het forum.

Volgens mij moet je eerst eens kijken naar hoe je de overflow-instellingen in je CSS-bestand hebt staan.
Zet bijvoorbeeld in je CSS-bestand bij het blok #rightwhite eens iets van een overflow: auto;

Met overflow wordt feitelijk bedoeld "het gedeelte dat niet binnen het vak past".
Standaard wordt dat volgens mij wel gewoon getoond en kun je met overflow (en overflow-x en overflow-y) aangeven hoe daarmee omgegaan moet worden. Zie http://www.brunildo.org/test/Overflowxy2.html voor een uitleg + voorbeelden van de verschillende overflow-properties.

[tuxy]

Hallo,

Alvast bedankt voor de snelle reactie.

Heb geprobeerd met overflow: auto , maar helaas werkt dit niet.

Zal eens andere instellingen proberen via de website die je me hebt doorgegeven.

Ik laat iets weten indien het is gelukt.

Christophe

[tuxy]

Martijn,

Het is gelukt, dankzij uw info loopt de container-div nu door, zodanig er geen overlapping meer ontstaat.

In de container-div heb ik volgende css toegevoegd:

overflow: hidden;

Alvast bedankt!

Grtz,
Christophe

[nirwana]

Ik was wel benieuwd wat er gebeurt als je de pagina's langer maakt, maar dan gaat de footer-tekst gewoon naar onderen. Dat werkt dus op zich wel goed.

Op http://www.mozbrowser.nl/web/voet/ heb ik overigens een kopie van de website geplaatst.
Daarbij heb ik de achtergrond-afbeelding wat lichter gemaakt. Daardoor is die wat minder opvallend aanwezig en dat vind ik wel prettig. Kijk maar of je dat een goede verbetering vindt en de afbeelding overneemt: http://www.mozbrowser.nl/web/voet/images/bgb.png

Als je wilt weten hoe ik de achtergrond-afbeelding lichter maak:
- ik open GIMP
- in het geval van deze afbeelding heb ik nog een "Flatten image" uitgevoerd om de doorzichtige achtergrond te verwijderen
- vervolgens maak ik een nieuwe witte laag in de afbeelding aan
- ik maak deze laag 50 doorzichtig
- ik voeg alle lagen samen en sla het geheel op
Doordat deze nieuwe laag wat doorzichtig (transparant) is zie je de onderliggende afbeelding er wel doorheen, maar dan wat minder intensief.

[tuxy]

Martijn,

Fantastisch, heb uiteindelijk je raad opgevolgd.
Het is inderdaad beter, daar de tekst nu nog meer tot uiting komt.

Ter info plaats ik hier de link naar het origineel: http://www.merlinsmagiccakes.be/beta/images/pelogo.png
Het origineel had ik ook wat wazig gemaakt om de randen iets minder scherp/gekarteld te maken.

Alvast bedankt voor de nodige en snelle ondersteuning!!!

Grtz,
Christophe

[nirwana]

Ter info plaats ik hier de link naar het origineel: http://www.merlinsmagiccakes.be/beta/images/pelogo.png
Het origineel had ik ook wat wazig gemaakt om de randen iets minder scherp/gekarteld te maken.

Christophe,

Nu zie ik inderdaad dat je al iets met dat logo had gedaan Daar is het al een stuk beter van geworden.

En dan vond ik het logo nog te aanwezig. Nou ja, goed om te lezen dat je mijn suggestie de moeite waard vond en hebt overgenomen.

[nirwana]

Alleen ben ik nog op zoek naar het verband tussen MerlinsMagicCakes en voeten.
Bij Magic Cakes moet ik eerder denken aan www.feestcakejes.nl

Maar gelukkig is er dan altijd nog de cache van Google die meer info biedt. Wel vraag ik me dan af wat er met de cakejes is gebeurd. Of wordt dat de volgende website die gemaakt moet worden?

[tuxy]

Martijn,

Het enige verband, tussen de 'cakes' en de 'voeten' is eigenlijk dezelfde eigenaar.

Ben de voeten-site aan het ontwikkelen voor een vriendin, die vroger cakes verkocht, maar zich nu meer wil toeleggen op haar hoofdberoep 'pedicure'.

De domeinnaam dient nog veranderd te worden, maar ik wacht daar liever mee tot de site uit beta-fase is.

Daarom wordt deze ook nog niet officieel gemaakt als je begrijpt wat ik bedoel.

Frtz,
Christophe

[nirwana]

OK, bedankt voor de uitleg
Nu begrijp ik er wat meer van.