[CSS] Content valt er buiten

[quakerix]

Hello,

ik zit mezelf af te leren om tables te gebruiken bij het bouwen van een website. M'n eerste div site is wel gelukt (hier). Ongetwijfeld nog 2890323 dingen die beter kunnen.

Maar nu zit ik een ander 'type' site in elkaar te zetten en ik wil niet alles met 'absolute' doen. Nu ben ik bezit met de volgende site (link).

Als je omlaag scrolled (links onderin) zie je 1 image staan en wat tekstjes 'boe'. Die staan in 2 verschillende divjes. En op de 1 of andere manier komen ze helemaal onderaan, onder alle andere shizzle terecht.

Terwijl de DIV goed ingesteld is en ook voor de rest werkt. Want de tekst 'boe' staat bijv. in de div MENU en die heeft background-color black. Die black background color doet hij perfect, perfecte hoogte en plek (in mozilla) maar de content die er dan uiteindelijk in moet lukt niet.

Ik teste het ook even met de header image en kreeg hetzelfde probleem. Alles werd onderin gegooit.

Daarnaast heb ik in IE het probleem dat alles onderaan de pagina staat en dat de gehele pagina niet gecentreerd staat. Nu kan ik wel op dat centreren gaan zoeken/vinden en oplossen. Maar ik snap niet waarom IE7 dat niet oppakt.

Ik heb best wat tutorials en shizzle gelezen over DIVjes/CSS enzo. Maar je moet het uiteindelijk leren door in de praktijk te kloten. Alleen is het zo moeilijk als je ergens fout loopt om een site te vinden waarbij het wel goed is.

Dus als nog mensen goede voorbeelden weten van dit soort type sites met GOED div/CSS werk. Please post also.

Alvast bedankt!

De CSS code:

code:

body {
    background-color: #102C42;
    background-image: url("images/background.jpg");
    background-repeat: repeat-x;
    vertical-align: top;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
DIV.main {
    padding: 0px 0px 0px 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #FFFFFF;
    position: relative;
    width: 950px;
    height: 100%;
    float: none;
    z-index: 10;
}
DIV.header-image {
    padding: 0px 0px 0px 0px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-image: url("images/header-image.jpg");
    background-color: transparent;
    position: relative;
    height: 152px;
    width: 942px;
    left: 0px;
    top: 0px;
    z-index: 10;
}
DIV.balk {
    padding: 0px 0px 0px 0px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #CFD2D7;
    width: 946px;
    height: 100%;
    position: relative;
    left: 0px;
    float: left;
    z-index: 9;
}
DIV.menu {
    padding: 0px 0px 0px 0px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #000000;
    height: 19px;
    width: 942px;
    position: relative;
    z-index: 10;
    left: 0px;
    top: 0px;
    vertical-align: top;
    float: none;
}

de HTML code:

code:

<div class="main">
    <div class="balk"></div>
    <div class="header-image"><span>boe</span></div>
    <div class="menu">
        <img src="<?php echo $site_path; ?>images/menu-left.jpg" alt="button" border="0">
        boe
        boe
    </div>
</div>

[Boelie-Boelie]

In je voorbeeldsite zie ik geen 'boe' oid?

Je hoeft niet opnieuw het wiel uit te vinden, er zijn reeds 1001 sites die uitleggen hoe je een CSS-layout voor elkaar krijgt, bijv.:
http://css.maxdesign.com.au/
www.456bereastreet.com/la...tandards/csslayout/2-col/
http://joshuaink2006.john...guide-to-3-column-layouts

Overigens, werken met CSS betekent zeker niet dat je alles nu in divjes moet zetten... Is het een kop? Gebruik headings (h1, h2, etc.). Is het een alinea? Gebruik het p-element. Is het een opsomming (bijv. van menu-items)? Gebruik een list (zie ook het Listutorial op Maxdesign).