[css] div postionerings probleempje

[Verwijderd]

Goeiedag,

Misschien dat iemand me kan helpen? Ben bezig om een site op te bouwen met divs. Het is de bedoeling dat er "simpel" 2 rijen en 2 kolommen komen. Wel is het zo dat de div's verschillen in hoogte vandaar dat ik gebruik maak van "clear".

Het gaat om: http://www.daanooms.nl/

Css: http://www.daanooms.nl/stijl.css

Het vervelende is dat het me niet lukt om op de tweede rij de groene button (in de ene div) rechts naast dat geel zwarte ding (in de andere div) te krijgen. De button wordt constant op de volgende regel geplaats. Alsof die geen divs meer naast elkaar wil hebben.

Het lijkt alsof nadat ik "clear:both" heb gebruikt dit blijft doorzetten.

Doe ik iets verkeerd? Of anders is hier een oplossing voor (anders dan een tabel invoegen)?

[ Voor 25% gewijzigd door Verwijderd op 10-03-2006 04:46 ]

[Verwijderd]

En de button left floaten ?

code:

div#button {
    width: 108px;
    heigth: 25px;
    float:left;
}

En heigt is height, die moet je overal even vervangen.

[Verwijderd]

Heb het veranderd. Maar helpen doet het niet. Het rare is dat in de regel er boven het prima werkt.


CSS (m.b.t de 4 gebruikte plaatjes)

code:

div#site {
    width           : 762px;
    margin-left     : auto;
    margin-right    : auto;
    padding-left    : 40px;
    text-align      : left;
}

div#mmets {
    position        : relative;
    top             : 20px;
    z-index         : 0;
    width           : 360px;
    height          : 288px;
    float           : left;
}

div#dehaas {
    position        : relative;
    top             : 40px;     
    left            : 20px;
}

div#korhoen {
    position        : relative;
    width           : 305px;
    height          : 297px;
    z-index         : 1;
    left            : 40px;
    float           : left;
}

div#button {
    width           : 108px;
    height          : 25px;
    float           : left;
}

.clear {
    clear           : both;
}

En dan met xhtml:

code:

<div id="site">

    <div id="mmets">
        hier staat een stuks javascript
    </div>  

    <div id="dehaas">
        <a href="" onclick="winBRopen('http://www.daanooms.nl/dehaas/index.htm','dehaas','577','477','no');return false">
        [img]"http://www.daanooms.nl/images/dehaasklein.jpg"[/img]</a>
    </div>

Tot en met hier gaat het dus prima. De bovenstaande twee komen naast elkaar op het scherm. Maar dan de volgende regel.

code:

  <div class="clear"></div> 
  
    <div id="korhoen">
      <a href="http://www.daanooms.nl/korhoen/index.htm">
      [img]"http://www.daanooms.nl/images/korhoenkleiner.gif">
[/img]  
    
    <div id="button">
     <a href="http://www.daanooms.nl//cement/index.htm">
    [img]"http://www.daanooms.nl/images/buttons/cementgroenwit.gif"></a>
[/img]

</div>

</body>

</html>

Deze plaatjes worden opeens onder elkaar geplaatst.

[ Voor 53% gewijzigd door Verwijderd op 10-03-2006 11:22 ]

[Rowanov]

Zowieso geen relative positionering en floats door elkaar gebruiken op hetzelfde element. Haal die relative positioning weg, dat zal al een stuk schelen. Als je floats wilt laten overlappen kan dat met negatieve marges. Daar bedoel ik dus wel mee dat je alle blokken moet floaten!

Edit: gast, ff twee tellen geduld. Ik ram een voorbeeld in elkaar. Er klopt niet echt veel van je code; overkill aan javascript, overbodige elementen etc. Je maakt het jezelf 10 keer moeilijker dan het is

[ Voor 42% gewijzigd door Rowanov op 10-03-2006 11:32 ]

[Verwijderd]

Heb het veranderd in:

code:

div#site {
    width           : 762px;
    margin-left     : auto;
    margin-right    : auto;
    padding-left    : 40px;
    text-align      : left;
}

div#mmets {
    top             : 20px;
    z-index         : 0;
    width           : 360px;
    height          : 288px;
    float           : left;
}

div#dehaas {
    top             : 40px;     
    left            : 20px;
}

div#korhoen {
    width           : 305px;
    height          : 297px;
    z-index         : 1;
    left            : 40px;
    float           : left;
}

div#button {
    width           : 108px;
    height          : 25px;
    float           : left;
}/

Maar de button blijft eronder niet ernaast. Zie http://www.daanooms.nl

[ Voor 5% gewijzigd door Verwijderd op 10-03-2006 11:33 ]

[Rowanov]

Het voorbeeld dat ik gisteren heb getypt voldoet aan het globale idee (uitleggen van floats). In je code kom ik veel javascript tegen wat waarschijnlijk makkelijker kan; vervolgens sluit je niet alle <a> tags af (korhoen div) en gebruik je een div om te eerste regel te clearen, terwijl dat gewoon met een "clear: right" op het element er boven kan.
Hier wat leesvoer over floats en document flow; probeer gewoon op die manier je document eens opnieuw op te bouwen.

[Verwijderd]

Weet je wat het rare is. Als ik de bovenste regel herhaal. Dan doet die't prima. 2 keer twee plaatjes naast elkaar. Zie http://www.daanooms.nl/index2.htm

Maar met die andere twee niet.???

Volgens mij heb ik dezelfde code opbouw als jij.
Een container met een vaste waarde voor width <div id="site">
en dan de plaatjes met een "float:left" voor diegene die links moeten staan

Alleen bij mij zijn de div's met de plaatjes niet van gelijke hoogte vandaar clear:both er tussen.

<a>

[ Voor 46% gewijzigd door Verwijderd op 10-03-2006 12:23 ]

[Rowanov]

Er staat onder je head een extra "html" tag. Ik wil je aanraden hem eens door de validator te draaien want er zitten een hoop van zulke kleine foutjes in.

[Verwijderd]

heb 't opgeschoond, en ja het helpt. had een div niet gesloten.

Hoewel alles nu visueel staat zoals ik wil zie je in IE dat de vier div's mooi binnen de (blauwe) container vallen. Maar in FF en Opera wordt aangegeven alsof de onderste twee er buiten vallen. Heeft iemand een idee waarom? http://www.daanooms.nl

[ Voor 45% gewijzigd door Verwijderd op 10-03-2006 13:04 ]

[Rowanov]

Die onderste regel even clearen op de manier hoe je de bovenste ook heb gecleard

[Verwijderd]

Beter!

Het enig wat er nu nog niet goed gaat is de z-order in Firefox. In Opera en IE is het prima.

In Firefox wordt de Flash movie boven het geel zwarte geval getoond (is niet de bedoeling). Terwijl de Flash movie z-index: -1; heeft en dat geel zwarte ding z-index: 100; en de w mode van de flash film op transparant staat.

Weet iemand hoe dat opgelost kan worden? http://www.daanooms.nl

CSS flash filmpje

code:

div#mmets {
    top             : 20px;
    z-index         : -1;
    width           : 360px;
    height          : 288px;
    float           : left;
    border          : 2px solid red;
}

CSS geelzwarte geval

code:

div#korhoen {
    z-index         : 100;
    width           : 305px;
    height          : 297px;
    float           : left;
    border          : 2px solid red;
    margin-top      : -40px;
    margin-left     : 60px;
}

EDIT: aangezien heel ander onderwerp nieuw topic

[ Voor 54% gewijzigd door Verwijderd op 10-03-2006 14:34 ]