[CSS] | Lay-out wordt niet goed weergegeven.

[Verwijderd]

Onlangs heb ik mij verdiept in de wondere wereld van CSS en ik moet zeggen dat ik de mogelijkheden erg mooi vind.

Zo ben ik onlangs gestart met de ontwikkeling van een site waarvan de layout middels CSS wordt opgebouwd. Nu heb ik alleen het volgende probleem waar ik maar geen oplossing voor kan vinden.

Ik heb een layout met in totaal vier hoofdblokken (een banner, een linkermenu, een center en een rechtermenu). In het centermenu worden (logisch) de hoofdpagina's weergegeven. Mijn CSS bestand ziet er als volgt uit:

code:

body    {
    background-image: url("small.gif");
    Scrollbar-Arrow-Color: #FF6600;
    Scrollbar-Darkshadow-Color: #336699;
    Scrollbar-Highlight-Color: #336699;
    Scrollbar-Face-Color: #BDCCDC;
    Scrollbar-Track-Color: #DFE6ED;
    Scrollbare-Shadow-Color: #336699;
    font-family: verdana;
    font-size: 10px;
    }

#banner {
    background: url("banner1024.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    margin: 5px 0px 0px 10px;
    width: 890px;
    height: 110px;
    background-color: #f1f4f8;
    border: 1px solid #336699;
    padding: 0;
    }

#algemeen   {
    position: absolute;
    margin: 120px 0px 0px 10px;
    width: 185px;
    background-color: #f1f4f8;
    border: 1px solid #336699;
    padding: 0;
    }

#waterpolo  {
    position: absolute;
    margin: 175px 0px 0px 10px;
    width: 185px;
    background-color: #f1f4f8;
    border: 1px solid #336699;
    padding: 0;
    }

#zwemmen    {
    position: absolute;
    margin: 290px 0px 0px 10px;
    width: 185px;
    background-color: #f1f4f8;
    border: 1px solid #336699;
    padding: 0;
    }

#commissie  {
    position: absolute;
    margin: 390px 0px 0px 10px;
    width: 185px;
    background-color: #f1f4f8;
    border: 1px solid #336699;
    padding: 0;
    }

#gastenboek {
    position: absolute;
    margin: 475px 0px 0px 10px;
    width: 185px;
    background-color: #f1f4f8;
    border: 1px solid #336699;
    padding: 0;
    }

#extra  {
    position: absolute;
    margin: 530px 0px 20px 10px;
    width: 185px;
    background-color: #f1f4f8;
    border: 1px solid #336699;
    padding: 0;
    }

#bottom {
    position: absolute;
    margin: 630px 0px 20px 10px;
    width: 185px;
    background-image: url("small.gif");
    padding: 0;
    }


#main   {
    position: absolute;
    margin: 120px 0px 20px 200px;
    width: 520px;
    background-color: #f1f4f8;
    border: 1px solid #336699;
    border-bottom: 1px solid #336699;
    }

#news   {
    position: absolute;
    margin: 120px 0px 0px 725px;
    width: 175px;
    background-color: #f1f4f8;
    border: 1px solid #336699;
    padding: 0;
    }

a   {
    color: #000000;
    text-decoration: none;
    margin: 2px;
    line-height: 150%;
    }

a:hover {
    color: #000000;
    text-decoration: underline;
    margin: 2px;
    line-height: 150%;  
    }

p   {
    color: #000000;
    text-align: justify;
    margin: 5px;
    margin-bottom: 10px;
    line-height: 150%;
    }

p.header    {
    background-color: #336699;
    margin: 0px;
    height: 15px;
    font-size: 10px;
    color: #ffffff;
    font-weight: bold;
    text-align: justify;
    line-height: 150%;
    }

li  {
    color: #000000;
    line-height: 150%;
    }

Wanneer de centerpagina langer dan een scherm is, stopt de layout van de centerpagina nogal abrupt. De onderste border (zoals gedefinieerd in de stylesheet) wordt niet getoond. Graag zou ik nog een stuk achtergrond onder het einde van de centerpagina willen zien. Dit lukt echter helemaal niet...

Kan iemand aangeven waar ik een fout maak?

De website waar het om gaat is te vinden op:
http://www.zvsassenheim.nl/test

Het probleem doet zich bijvoorbeeld voor bij pagina zwemmen --> algemene informatie. (en dan geheel onderaan).

Beetje warrig verhaal, maar ik hoop dat mijn vraag duidelijk is...

[curry684]

* curry684 trapt maar weer eens over de schutting...

CSS/HTML/etc. hoort dus (logisch) bij Webdesign & Graphics

[supakeen]

Nog een stukje margin onderop gooien van die div of misschien wel een stukje margin in de body op de bottom

[Woudloper]

Ik denk eerst dat je je XHTML code eens moet doorlopen! Zo even een paar punten:

• !DOCTYPE binnen HTML, moet daarbuiten staan;
• Meerdere keren een BODY in je code;
• Meerdere keren een HEAD in je code;
• HTML wordt 2 keer afgesloten...

Als je daar eerst een naar kijkt en hem wellicht nog met de W3 Validator checkt kom je tot nog meer inzichten...

[Verwijderd]

hmz, ik heb de code aangepast, zoals jullie zeggen. Als ik op de aangegeven pagina in de source kijk ziet alles er goed uit. Geen dubbele body's html's ed....

[Elroy]

Probeer eens de het divje wat onder de tekst komt "relative" te maken ipv "absolute".

[crisp]

waarom margin gebruiken om te positioneren? Alleen voor de laatste div zou ik inderdaad een margin-bottom gebruiken, maar verder kan je ook gewoon met top en left properties werken mi.
Test trouwens ook eens in Mozilla; ik vermoed dat je weinig te zien krijgt daar alle content absoluut gepositioneerd is en er dus geen inhoud is om je body hoogte te geven (een min-height: 100% zou dat op kunnen lossen)

[Verwijderd]

Eindelijk opgelost...Een hoop geklooi met de positionering in de stylesheets. Absolute, relative margin hier margin daar...