[css] div positioning probs

[4of9]

help!

Ik ben al een tijdje bezig om van tabellen over te stappen naar div's.

Nu ben ik dus nog steeds aan het mieren met de positioning in verschillende browsers

css:

code:

html, body{
    margin:0 0 0 0;
}
div#container{
    border: 1px #000000 solid;
    width: 800px;
    margin: 0;
    padding: 0;
    top:0;
    left:0;
}
div#logo {
    border: 1px #000000 solid;
    position: relative;
    margin:0;
    width: 750px;
   height: 279px;
    background-image: url(../img/logo750.gif);
    background-repeat: no-repeat;
}

div#menu {
    border: 1px #000000 solid;
    width: 150px;
    float: left;
    margin-right: 10px;
    margin-top: 100px;
    display: table-cell;
}

div#spacer {
    clear: both;
}

div#content {
    border: 1px #000000 solid;
    position: relative;
    width: 400px;
    display: table-cell;
    margin-top: 100px;
}

#navlist{
    list-style: none;
    margin:5px;
    padding:5px;
}

#navlist a {
    color: #000000;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 14px;
    font-weight: bold;
   text-decoration: none;
}

#navlist a:hover {
    color: #dcdcdc;
}

HTML:

<div id="logo"></div>
    <div id="spacer"></div>
    <div id="menu">
        <ul id="navlist">
            <li><a href="link1.html">Wie zijn wij?</a></li>
            <li><a href="link2.html">LINK 2</a></li>
            <li><a href="link3.html">LINK 3</a></li>
            <li><a href="link4.html">LINK 4</a></li>
        </ul>
    </div>
    <div id="content">
        <span>
            Lorem ipsum dolor sit amet, consectetuer adipiscing 
        </span>
    </div>

in IE doet dit het goed maar in firefox staat de content div hoger (tegen top div aan) dan het menu divje.

Ik krijg het niet voor elkaar om ze even hoog te krijgen, wat doe ik fout?

alvast bedankt !

links naar goede beschrijvingen van positionering in css zijn welkom want heb al veel gelezen maar het wil me maar niet lukken om het in beide browsers werkend te krijgen.

[ Voor 42% gewijzigd door 4of9 op 13-08-2004 16:58 . Reden: layout werd verprutst ]

[Verwijderd]

waarom die spacer?
waarom die div om dat menu?
waarom die logo div en niet gewoon een img?

vergeet niet dat je alle elementen kan positioneren en niet alleen divs. Div's zijn eigenlijk net zo erg als tabellen, want ze zeggen niks ober je content.

in welk boxmodel houd ie aan? (oftewel: laat even heel je html of ene linkje zien)

verder zou ik ook niet te actief met floats gooien, ik denk niet dat ze in jouw geval nodig zijn iig

stukje over het css visual formatting model:
http://www.rikkertkoppes....showbook.asp?bookId=9#C28
en uitgebreid:
http://www.w3.org/TR/CSS21/visuren.html

daar vind je alles over positionering

[ Voor 35% gewijzigd door Verwijderd op 13-08-2004 18:12 ]

[crisp]

Divs zijn zeker niet zonder semantische waarde; je kan ze gebruiken om je content in logische blokken op te delen (div komt ook van divider)

[Verwijderd]

helemaal gelijk, maar je moet ze niet gaan rondstrooien als ze niet nodig zijn. Tabellen zijn ook niet zonder semantische waarde, maar je gebruikt ze ook niet om te layouten

[4of9]

dit is heel mijn html (minus html en body tag)
das copy en paste en je ziet wat er fout gaat.

Maar ik vraag me af waarom in IE wel goed en in firefox niet

Ik heb al veel gelezen over het boxmodel maar iedere keer als ik denk dat ik het snap doet precies die ene browser het net weer anders zodat ik niet meer weet of het nu goed of fout is, alvast bedankt weer

[Blaise]

Verschil in boxmodel is heel simpel:

IE doet de breedte zoals opgegeven.
De rest van de browsers (zijn geloof ik geen andere browsers die standaard zelfde doen als IE) doet de breedte zoals opgegeven PLUS de padding van dat element.


Voorbeeld:

Cascading Stylesheet:

div {
      width:300px;
      padding:3px;
}

In IE is bovenstaande div 300 px breed, in andere browsers 306 px.

Als je dan twee divs naast elkaar float, en het past precies in IE, is het soms breder in andere browsers waardoor het niet meer naast elkaar past, en de elementen boven elkaar gaan staan. Om dit te voorkomen kan je absolute en relatieve positionering proberen.

[4of9]

ah dank je.

Maar wat er nog fout gaat is niet de breedte maar de hoogte van de divs.

De bovenste div staat goed, met twee divjes naast elkaar er onder.
beide horizontaal goed gepositioneerd in zowel IE als firefox,
Alleen in firefox zit mijn content div tegen de bovenste div aan, en mijn menu niet.
hij lijkt mijn margin niet goed te pakken.

In IE staan ze beide goed (op de zelfde hoogte). En dat snap ik niet want het lukt me gewoon niet om ze beide in firefox even hoog te krijgen

[ Voor 5% gewijzigd door 4of9 op 14-08-2004 11:09 ]

[4of9]

hmm ik heb nu de margin-bottom van mijn logo-div aangepast en de margin-tops uit mijn andere div gehaald en nu doet ie het wel!

Is dit de juiste manier?

[MBV]

Ja. Het probleem met padding heb je ook in de hoogte, en margins werkte ook net ietsje anders. kijk maar op http://www.positioniseverything.net en nog wat van die sites.