Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Div's naast elkaar?

Anoniem
gerben
12 antwoorden
  • De situatie is als volgt:

    Ik bouw mijn pagina waar mogelijk met <div>…</div> in plaats van met tabellen omdat dat ook mogelijk moet zijn en het de voorkeur heeft in XHTML. Maar als ik nu meerdere div's plaats dan komen ze niet naast elkaar. Meestal is dat wenselijk, maar soms niet. Iemand enig idee hoe dit voor elkaar te krijgen? Ik heb het al geprobeerd met "display: inline;" maar helaas zonder resultaat.

    [b:7ad23076f7]HTML[/b:7ad23076f7][code:1:7ad23076f7]<div id="nr1"><img src="1.png" /></div>
    <div id="nr2"><img src="2.gif" /></div>
    <div id="nr3"><img src="3.gif" /></div>[/code:1:7ad23076f7][b:7ad23076f7]CSS[/b:7ad23076f7][code:1:7ad23076f7]#nr1{
    width: 17px;
    display: inline;
    }

    #nr2{
    width: 10em;
    display: inline;
    }

    #nr3{
    width: 5em;
    display: inline;
    }[/code:1:7ad23076f7]Alle tips en aanwijzingen zijn welkom. Bij voorbaat dank,

    - Bas
  • Probeer dit eens:

    #nr1{
    position: absolute;
    top: 0;
    left: 0;
    width: 17px;
    display: inline;
    }
    #nr2{
    position: absolute;
    top: 0;
    left: 17px;
    width: 100px;
    display: inline;
    }

    #nr3{
    position: absolute;
    top: 0;
    left: 117px;
    width: 5em;
    display: inline;
    }

    de herhaalde zaken kun je ook zo vatten:

    div{
    position: absolute;
    top: 0;
    }
  • als je de locatie nou is [b:6e1ba72156]left [/b:6e1ba72156]en [b:6e1ba72156]top [/b:6e1ba72156]opneemt, daar is redelijk goed ondersteuning voor.

    bv:

    [code:1:6e1ba72156]
    div.links{
    left:0px;
    top:0px;
    width:10px;
    }
    div.rechts{
    left:10px;
    top:0px;
    }
    [/code:1:6e1ba72156]
  • Het probleem is dus dat ik de positie niet vooraf weet. Maar waarom zou ik van tevoren moeten aangeven waar hij komt te staan, dat hoeft met tabellen ook niet. Begrijp me goed, jullie oplossing is prima. Maar is het ook mogelijk ze naast elkaar te krijgen alsof het inline tekst is? Dáár gaat het dus om.

    - Bas
  • ik heb zelf de divs nog in tabellen staan (weet ook niet meer waarom) maar als ik dan left en top weghaal blijft alles nog gewoon staan[code:1:f6b23b9d19]div{
    position : absolute;
    vertical-align : top;
    text-align : justify;
    }
    div.nav{
    width : 790px;
    padding-top:0px;
    overflow : hidden;
    }
    div.subnav{
    width:180px;
    height :auto;
    overflow :hidden;
    }
    div.main{
    width:610px;
    height:100%;
    overflow:auto;
    padding : 20px;
    }[/code:1:f6b23b9d19]
  • CSS werkt anders dan tabellen. Dingen die goed mogelijk zijn in tabellen zijn vaak niet zo makkelijk in CSS en andersom. Misschien kan het wel hoor. Op mijn site staan wel diverse interessante links over CSS layout. Maar die is offline. Probeer het later maar eens.
  • ik bedoelde dat ik de divs tussen de tabellen geplaaste heb

    [code:1:91a83445dd]<td><div></div></td>[/code:1:91a83445dd]

    ik weet niet of nu langs elkaar heen praten, of dat u mijn reactie niet goed heeft gelezen (of ik heb hem onduidelijk geschreven :wink: ).
  • Ik had het meer tegen bashamar. maar de divs in tabellen plaatsen is een mogelijke oplossing. Betwijfel echter of dat de goede is. Ik zou zelf maar een van beiden toepassen. Dus allee tabellen voor de algemene layout, of alleen CSS.
  • Ik heb in verschillende artikels gelezen dat het mogelijk moet zijn om met CSS de volledige opmaak te doen en alleen maar tabellen te gebruiken wanneer de data zich ervoor leent. Maar goed, als het te hoog gegrepen is dan neem ik Termin8or z'n oplossing als tussenoplossing totdat ik weet hoe het moet.

    Gerben en Termin8or: bedankt voor jullie bijdrage.

    - Bas.
  • Met SPAN moet je ze toch naast elkaar kunnen krijgen ?


    Olaf
  • [quote:221fcf64d3="Olaf Liflaf"]Met SPAN moet je ze toch naast elkaar kunnen krijgen ?[/quote:221fcf64d3]Vast… Maar hoe?

    - Bas
  • kan gewoon hoor… zoek de verschillen maar eens…
    [code:1:807ce4c421]
    <html>
    <!– Created with the CoffeeCup HTML Editor –>
    <!– http://www.coffeecup.com/ –>
    <!– Brewed on 16.01.03 0:25:02 –>
    <head>
    <title></title>
    </head>
    <body>
    <span>hoi</span><span>blaat</span><span>whoopah</span>
    <div>hoi</div><div>blaat</div><div>whoopah</div>
    <div style="display:inline;">hoi</div><div style="display:inline;">blaat</div><div style="display:inline;">whoopah</div>
    </body>
    </html>

    [/code:1:807ce4c421]

    t.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.