UItlijnen van 2 DIV's

[Verwijderd]

Tja, beetje old skool html-er hier, en div's zijn zo modern

Het probleem:

code:

<div align="left">
[img]"images/toplogo.jpg"[/img]<br>
<font face="Arial" size="1">versie 2.1.5</font>
</div>
            
<div align="right">
<a target="_blank" href="http://www.link.nl">
[img]"images/link.gif"[/img]
</a>
</div>

Ik wil ze dus op 1 regel, de ene div LINKS en de andere RECHTS; maar nu komt de 2e div ONDER de eerste (wel rechts uitgelijnd, maarja.. niet eernaast!)

hoe doe ik dit?

[ Voor 48% gewijzigd door Verwijderd op 03-07-2003 09:38 . Reden: layout minder verkl*t ]

[KnoppenSpook]

position:absolute

[CH4OS]

Kan dat niet gewoon met een absolute positie op te geven?

Of misschien een betere oplossing (die mij overigens veel makkelijker lijkt): tabellen?

[crisp]

je hebt een container nodig waar je ze in kan positioneren, dat kan natuurlijk de body zijn, maar ook een realtief gepositioneerde div. Daarbinnen kan je links en rechts absoluut uitlijnen:

HTML:

<div style="position: relative">
<div style="position: absolute; left: 0px">
<img border="0" src="images/toplogo.jpg" width="249" height="49"><br>
<font face="Arial" size="1">versie 2.1.5</font>
</div>
            
<div style="position: absolute; right: 0px">
<a target="_blank" href="http://www.link.nl">
<img border="0" src="images/link.gif" width="468" height="60" align="right">
</a>
</div>
</div>

[Willem]

crisp moet nog aan z'n HTML rechten wennen

doe ff [ nohtml ]

ok

+1 overbodig

[ Voor 36% gewijzigd door Willem op 03-07-2003 09:43 ]

[Verwijderd]

Werkt niet helemaal

edit:


Ja dus

[ Voor 42% gewijzigd door Verwijderd op 03-07-2003 09:44 ]

[Verwijderd]

3 x overbodig

[ Voor 87% gewijzigd door Verwijderd op 03-07-2003 09:44 . Reden: overbodig ]

[Theguide]

Kun je niet gewoon float: left en float: right gebruiken?

HTML:

<div style="float:left">Stuff on the left</div>
<div style="float:right">Stuff on the right</div>

[Verwijderd]

Theguide schreef op 03 juli 2003 @ 09:46:
Kun je niet gewoon float: left en float: right gebruiken?

HTML:

<div style="float:left">Stuff on the left</div>
<div style="float:right">Stuff on the right</div>

Ja, maar dan andersom. Omdat de 2e rechts gealignt wordt na ie op de volgende regel is gezet, staat ie nog steeds onder de eerste. De DIV die rechts moet staan zet je dus als EERSTE in de code/flow.

HTML:

<div style="float:right">Stuff on the right</div>
<div style="float:left">Stuff on the left</div>

[/quote]

[Clay]

d'r is nog een manier

HTML:

<div style="position:relative;">    
    <div style="position:absolute; left:0; width:50%;"> </div>
    <div style="position:absolute; left:50%; width:50%;"> </div>
</div>

en dat is dan ook weer uit te breiden naar 3, 4, n div's naast elkaar.

[ Voor 23% gewijzigd door Clay op 03-07-2003 11:46 ]

[Verwijderd]

Bedankt iedereen! Toch lastiger dan ik had gedacht dus

Verwijderd schreef op 03 July 2003 @ 10:57:
[...]

Ja, maar dan andersom. Omdat de 2e rechts gealignt wordt na ie op de volgende regel is gezet, staat ie nog steeds onder de eerste. De DIV die rechts moet staan zet je dus als EERSTE in de code/flow.

HTML:

<div style="float:right">Stuff on the right</div>
<div style="float:left">Stuff on the left</div>

[/quote]

Dit werkt dus niet? Ze staan nu beide wel op 1 lijn maar de rechtsuitgelijnde DIV "valt uit beeld" dus ik zie net een klein stukje van de banner en de rechts komt niet op t scherm? (Opera)

In IE staat de rechter nu boven de linker.. dus dit is geen oplossing *volgende probeer*

[marty]

Verwijderd schreef op 03 July 2003 @ 12:11:
In IE staat de rechter nu boven de linker.. dus dit is geen oplossing *volgende probeer*

Volgens mij worden er nog twee andere oplossingen gegeven, en die werken allebei bij mij

[Verwijderd]

Jep, zei ik ook, ga de andere proberen

@Clay: werkte niet helemaal goed, kan zijn doordat ie in een tabel staat!

Dit is hem geworden:

HTML:

<div style="position:relative;">    
    <div style="position:absolute; left:0; width:250;">     
            [img]"images/toplogo_p.jpg"[/img]<br>
            <font face="Arial" size="1">versie 2.1.6</font></div>
    <div style="position:absolute; left:260; width:470; top:0">
            <p align="center">
            <font size="1" face="Arial">            
            [img]"images/2pbgrijs.gif"[/img]
             Advertentie 
            [img]"images/2pbgrijs.gif"[/img]</font><br>
            <a target="_blank" href="http://www.blablabla.nl">
[img]"images/banner.gif"[/img]</a>
    </div>
</div>

[ Voor 28% gewijzigd door Verwijderd op 03-07-2003 12:56 ]

[Insano]

ik zou dr 2 spans van maken, en er dan een div omheen gooien.
aangezien een div een block object is en span een inline object is (dus achter elkaar komt)

[Blaise]

[remove][/remove]

Wat je ook weg kan halen zijn die font tags, tegenwoordig doe je dat met CSS

[ Voor 82% gewijzigd door Blaise op 03-07-2003 14:12 ]

[JJvG]

Ik zou zeggen, kijk eens op:

http://www.positioniseverything.net/
http://www.thenoodleincid...als/box_lesson/boxes.html

Mijn persoonlijke favorits als het neerkomt op positioneren m.b.v. DIVs

[Verwijderd]

Blaise schreef op 03 July 2003 @ 14:06:
[remove][/remove]

Wat je ook weg kan halen zijn die font tags, tegenwoordig doe je dat met CSS

mja ik maak altijd eerst een ontwerpje en daarna ga ik dus de css erin doen

(ben ik dus half uur geleden mee begonnen )

[Blaise]

[...]
Dit werkt dus niet? Ze staan nu beide wel op 1 lijn maar de rechtsuitgelijnde DIV "valt uit beeld" dus ik zie net een klein stukje van de banner en de rechts komt niet op t scherm? (Opera)

In IE staat de rechter nu boven de linker.. dus dit is geen oplossing *volgende probeer*

Dit werkt niet omdat er geen breedte is opgegeven. Default is een div 100% van de beschikbare ruimte breed, en als je daar 2 van naast elkaar probeert te plaatsen komt de 2e div dus eronder.

Als je width:50% in beide divs zet, of een breedte in pixels, werkt het wel.
Float is namelijk wel een goede oplossing hiervoor.

Je krijgt dan ongeveer zoiets:

PHP:

<!-- doe de style in je head of extern -->
<style>
.left{
float:left;
width:249px;
font:normal xx-small Arial, Sans-serif
}

.right{
float:right; /* kan ook left, als je het er direct tegenaan geplakt wil hebben */
width:468px;
}
</style>



<div class="left">
[img]"images/toplogo.jpg"[/img]<br>
versie 2.1.5
</div>
            
<div class="right">
<a target="_blank" href="http://www.link.nl">
[img]"images/link.gif"[/img]
</a>
</div>

offtopic:
edit: fcuk, arial is niet serif

[ Voor 13% gewijzigd door Blaise op 03-07-2003 19:25 ]

[Verwijderd]

thank you

het werkt nu, dus ik blijf er maar vanaf maar dit is wel even handig om te weten

misschien toch maar een modern boek erbij halen..

[Blaise]

Google is gratis, en er staat veel documentatie/uitleg online...
* Blaise zou het wel weten

[Verwijderd]

Theguide schreef op 03 juli 2003 @ 09:46:
Kun je niet gewoon float: left en float: right gebruiken?

HTML:

<div style="float:left">Stuff on the left</div>
<div style="float:right">Stuff on the right</div>

offtopic:
Kun je me ff contacten over m'n icon? Beetje lame dat je hem zo zonder iets te zeggen jat van me.