[CSS] Gecentreerde DIV een DIV vriendje naast hem geven

[Verwijderd]

Yo

Wat ik probeer te realiseren is dit:


Content div gecentreerd, en 5 pixels ernaast de audio div.

De code die ik zover heb, al 1000 dingen geprobeerd en nu weer even vereenvoudigd naar de basis:

Cascading Stylesheet:

#audio { position:absolute; top:7px; z-index: 99; }
#content { position:relative; top:0px; width:525px; z-index: 0; }

HTML:

<div align="center"><div id="audio"></div></div>
<div align="center"><div id="content"></div></div>

De bovenstaande code heeft als resultaat dat de audio div op de content div staat, weet iemand hoe ik deze audio div uitgelijnt krijg zoals op het voorbeeld?

[deviltje]

Je content div centreren op de pagina..
de audio in de content div zetten en dan zover naar rechts dan ie buiten content vlak valt

[Woudloper]

Ik moet hierbij een beetje denken aan Faux Columns, maar dit moet overigens eenvoudig zijn op te lossen door er een #container <div> omheen te plaatsten...

[Verwijderd]

deviltje schreef op dinsdag 20 september 2005 @ 14:47:
Je content div centreren op de pagina..
de audio in de content div zetten en dan zover naar rechts dan ie buiten content vlak valt

Opgelost, audio met een padding-left: 530px; in de content div gezet

[Phenomenon]

Kan je denk ik beter met een margin-left doen lijkt me?

[Walance]

je moet hiervoor tabellen gebruiken

code:

<table>
  <tr>
    <td align="center"><div id="audio"></div></td>
    <td align="center"><div id="content"></div></td>
  </tr>
</table>

//edit: oeps, oplossing was al gevonden terwijl ik aan het posten/registreren was

[ Voor 45% gewijzigd door Walance op 20-09-2005 14:54 ]

[Verwijderd]

Phenomenon schreef op dinsdag 20 september 2005 @ 14:52:
Kan je denk ik beter met een margin-left doen lijkt me?

klopt, gewijzigd

Gilian645 schreef op dinsdag 20 september 2005 @ 14:53:
je moet hiervoor tabellen gebruiken

in 1995 misschien, maar nu zijn tables niet meer nodig om content te positioneren. Alsnog bedankt voor je input

[Verwijderd]

De oplossing:*

Cascading Stylesheet:

#audio { position:absolute; top:7px; margin-left:530px; z-index: 99; }
#content { position:relative; top:0px; width:525px; z-index: 0; }

HTML:

<div align="center"><div id="content"><div id="audio"></div></div></div>

* het kan vast nog veel netter, maar dit werkt.

[Walance]

hm.. ik had toch altijd gedacht dat dit alleen met tabellen ging
ach jah, weer wat geleerd

[Vinnienerd]

Gilian645 schreef op dinsdag 20 september 2005 @ 14:53:
je moet hiervoor tabellen gebruiken

code:

<table>
  <tr>
    <td align="center"><div id="audio"></div></td>
    <td align="center"><div id="content"></div></td>
  </tr>
</table>

//edit: oeps, oplossing was al gevonden terwijl ik aan het posten/registreren was

NEE!!!!!!!!!!!!!!!!! GEEN TABELLEN!!!!

[Walance]

nee.. dat hoeft ook niet, er is al een andere oplossing gevonden

[frickY]

Gilian645 schreef op dinsdag 20 september 2005 @ 14:53:
je moet hiervoor tabellen gebruiken

code:

<table>
  <tr>
    <td align="center"><div id="audio"></div></td>
    <td align="center"><div id="content"></div></td>
  </tr>
</table>

//edit: oeps, oplossing was al gevonden terwijl ik aan het posten/registreren was

Mwhaha. Laat die DIVjes dan gewoon helemaal achterwege

Ikzelf zou het niet met margins of paddings doen, maar met een position; absolute; right: -530px;
Waarbij de 530px de breedte van de auidio-div is, incl de ruimte welke je tussen de DIVjes wilt.

[crisp]

HTML:

<style type="text/css">

body {
    margin: 0;
    padding: 0;
    text-align: center;
}

#container {
    position: relative;
    width: 525px;
    height: 100%;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#content {
    padding: 10px;
    color: yellow;
}

#audio {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 5px;
    padding: 10px;
    height: 180px;
    width: 180px;
    background-color: black;
    color: yellow;
}

</style>
<div id="container">
    <div id="content">&lt;div id=&quot;content&quot;&gt;</div>
    <div id="audio">&lt;div id=&quot;audio&quot;&gt;</div>
</div>