Toon posts:

[CSS] Gecentreerde DIV een DIV vriendje naast hem geven

Pagina: 1
Acties:

Verwijderd

Topicstarter
Yo

Wat ik probeer te realiseren is dit:
Afbeeldingslocatie: http://www.blazin.nl/test/div_got.jpg

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:
1
2
#audio { position:absolute; top:7px; z-index: 99; }
#content { position:relative; top:0px; width:525px; z-index: 0; }

HTML:
1
2
<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
  • Registratie: Juli 2000
  • Niet online
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

Iedereen die in telekinese gelooft, steek a.u.b. mijn hand op


  • Woudloper
  • Registratie: November 2001
  • Niet online

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

Topicstarter
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 :P

  • Phenomenon
  • Registratie: December 2000
  • Laatst online: 01-04 13:18
Kan je denk ik beter met een margin-left doen lijkt me?

  • Walance
  • Registratie: September 2005
  • Laatst online: 30-04 15:03

Walance

Hm.. wat zal ik hier schrijven

je moet hiervoor tabellen gebruiken
code:
1
2
3
4
5
6
<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

Topicstarter
Phenomenon schreef op dinsdag 20 september 2005 @ 14:52:
Kan je denk ik beter met een margin-left doen lijkt me?
klopt, gewijzigd 8)
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

Topicstarter
De oplossing:*

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

HTML:
1
<div align="center"><div id="content"><div id="audio"></div></div></div>


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

  • Walance
  • Registratie: September 2005
  • Laatst online: 30-04 15:03

Walance

Hm.. wat zal ik hier schrijven

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

  • Vinnienerd
  • Registratie: Juli 2000
  • Laatst online: 18:42
Gilian645 schreef op dinsdag 20 september 2005 @ 14:53:
je moet hiervoor tabellen gebruiken
code:
1
2
3
4
5
6
<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
  • Registratie: September 2005
  • Laatst online: 30-04 15:03

Walance

Hm.. wat zal ik hier schrijven

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

  • frickY
  • Registratie: Juli 2001
  • Laatst online: 24-04 11:26
Gilian645 schreef op dinsdag 20 september 2005 @ 14:53:
je moet hiervoor tabellen gebruiken
code:
1
2
3
4
5
6
<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
  • Registratie: Februari 2000
  • Laatst online: 00:56

crisp

Devver

Pixelated

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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>

Intentionally left blank

Pagina: 1