Div container werkt niet

[Loev]

Heren (en dames)

Na een hoop gezeur en gezeik heb mijn huidige website aan de praat gekregen. Nu gaan helaas de sponsoren zeuren dat ze te weinig in beeld zijn. Dus ik dacht, waarom gooi ik geen mooi sponsor divje onder het menu.
Zo gezegt zo gedaan. (dacht ik) Maar nu wil het sponsor divje niet onder het menu divje
Volgens mij berekenen de sponsor en content divje hun positie op het menu divje en dit natuurlijk niet de bedoeling.
Dit gebeurt er nu: http://www.dkvtoernooi.nl/index1.htm
De HTML code (enigzins opgeschoond)

code:

    <div id="maincolumn">
        De container div
    
    
    <!-- start of menu -->
    <dl id="navigatie">
    Menu div
    </dl>
    <!-- end of menu -->
    
    <!-- start of countdown -->
    <div id="countdown">
    Sponsor div (heet nu nog even countdown)
    </div>
    <!-- end of countdown -->
    
    <!-- start of 'centercolumn' -->
    <div id="centercolumn">
         Content div
    </div>
    <!-- end of 'centercolumn' -->
</div>
</body>
</html>

En de css code:

code:

#maincolumn {
    position:absolute;
    top: 25px;
    left: 150px;
    width: 660px;
    background: url(Images/main.gif) repeat-y;
    z-index:1;
}

#centercolumn {
    float: right;
    width:468px;
    margin-right:15px;
    margin-top:10px;
    background-image:url(Images/middle1.gif);
    z-index:2;
}

#leftcolumn {
    float: left;
    width:155px;
    margin-left:10px;
    margin-top:10px;
    background-image:url(Images/middle.gif);
    z-index:3;
}

#countdown {
    float: left;
    width: 155px;
    margin-left:10px;
    margin-top:210px;
    background-image:url(Images/middle.gif);
    z-index:4;
}

Wat doe ik fout?

[BtM909]

Waarom float je die countdown div eigenlijk?

[Loev]

Omdat de rest van divs ook floaten :x
En als ik dat doe (net geprobeerd ) dan gaat de omlijning van de div erg raar doen.
Kan het een beetje moeilijk omschrijven...

[ Voor 66% gewijzigd door Loev op 30-03-2006 13:47 ]

[TeeDee]

1: Kijk nog eens goed naar de HTML.
Bijv:
- '[[lang:html]]' en [[charset]]
- forms in H1 elementen
- Verder lijkt me een UL in een DT overkill

2: Haal de margin-top:210px; eens weg en zet voor de zekerheid een clear:left bij #countdown?

[Valor]

DarkJedi schreef op donderdag 30 maart 2006 @ 13:36:

Waarom zet je je menu trouwens ook niet in een div?

code:

    <div id="maincolumn">
        De container div
    
    
    <!-- start of menu -->
    <dl id="navigatie">
    Menu div
    </dl>
    <!-- end of menu -->
       <br clear="all">   <----------------------------- TRY THIS
    
    <!-- start of countdown -->
    <div id="countdown">
    Sponsor div (heet nu nog even countdown)
    </div>
    <!-- end of countdown -->
    
    <!-- start of 'centercolumn' -->
    <div id="centercolumn">
         Content div
    </div>
    <!-- end of 'centercolumn' -->
</div>
</body>
</html>

[ Voor 45% gewijzigd door Valor op 30-03-2006 13:55 ]

[Loev]

TeeDee schreef op donderdag 30 maart 2006 @ 13:45:
1: Kijk nog eens goed naar de HTML.
Bijv:
- '[[lang:html]]' en [[charset]]
- forms in H1 elementen
- Verder lijkt me een UL in een DT overkill

2: Haal de margin-top:210px; eens weg en zet voor de zekerheid een clear:left bij #countdown?

1:
- Mijn fout erg slordig.
- Een vriend van mij (proffesineel webdesigner) zei dat het beste is ipv allemaal classes te maken
- Mhja... Nogmaals van een vriend de code gekregen, misschien kan er wel wat weg.

2: HELD! Het werkt Alleen nu moet de centercolumn nog op zijn plaats.

Valor schreef op donderdag 30 maart 2006 @ 13:55:
[...]

Werkt tot op zekere hoogte, ik upload wel wat ik nu heb.
De centercolumn wil niet naar zijn plek.

[ Voor 26% gewijzigd door Loev op 30-03-2006 14:01 ]

[crisp]

Die vriend van je mag dan wel eens HTML gaan leren want er klopt syntactisch al geen hout van

[ Voor 5% gewijzigd door crisp op 30-03-2006 14:15 ]

[Loev]

http://www.dkvtoernooi.nl/index1.htm <-- dat is wat ik nu heb.
De sponsor (countdown) div zit nu op de goeie plek alleen de centercolumn wil nog niet helemaal mee werken. Iemand een ideeetje?

[Valor]

Zal er ff naar kijken!!!

Snap niet wat er zo moeilijk aan was! Je had bijna alles al in je CSS file zitten om het zo te krijgen als je wil. Zal de boel ff goed neer zetten en dan hier posten

[ Voor 78% gewijzigd door Valor op 02-04-2006 15:18 ]

[Valor]

Je had in de CSS file een Leftcollumn staan alleen die gebruikte je niet terwijl je die zeker nodig had.

Zo moet je DIVjes gebruiken

code:

<div id="maincolumn">

    <!-- start of menu -->
    <div id="leftcolumn">
    <div id="navigatie">
        
    </div>
    <!-- end of menu -->
    <br clear="all">
    
    <!-- start of countdown -->
    <div id="countdown">
    
    </div>
    <!-- end of countdown -->
    </div>
    
    <!-- start of 'centercolumn' -->
    <div id="centercolumn">
    
    </div>
    <!-- end of 'centercolumn' -->
</div>

en

Dit is je CSS waar ik spul in heb lopen wijzigen. Maybe moet je is wat over CSS gaan lezen. Dit was echt te simpel om te fixen.

code:

#maincolumn {
    position:absolute;
    top: 25px;
    left: 150px;
    width: 660px;
    background-color: #EEEEEE;
}

#centercolumn {
    position: relative;
    float: left;
    width:468px;
    margin-left:15px;
    margin-top:10px;
}

#leftcolumn {
    position: relative;
    float: left;
    width:155px;
    margin-left:10px;
    margin-top:10px;
}

#countdown {
    position: relative;
    float: left;
    width: 155px;
    margin-top:10px;
}

#navigatie {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-image:url(Images/middle.gif);
    width: 155px; 
    float: left;
}

Overdadig !!!!!!! gebruiken is echt niet nodig achter elke zin!!!!

[ Voor 26% gewijzigd door BtM909 op 03-04-2006 18:06 ]

[Loev]

* Loev leest de post van Valor... telt tot 10 om de eerste boze gedachte weg te laten eppen en post hierna een normale reply
Dank je

[Valor]

DarkJedi schreef op maandag 03 april 2006 @ 01:59:
* Valor leest de post van Valor... telt tot 10 om de eerste boze gedachte weg te laten eppen en post hierna een normale reply
Dank je

You're welcome

[Boelie-Boelie]

Waarom krijgen die floats position:relative mee?