[CSS] ID onder variabele ID

[Verwijderd]

Ik ben wat begonnen met het leren van CSS. Het positioneren is geen probleem, zolang het absoluut gebeurt. Maar ik heb nu het volgende probleem.

Ik heb twee ID's (twee blokken), die bovnen elkaar getoond moeten worden. Hetbovenste blok is echter niet altijd even groot, maar het onderste blok moet er wel altijd 5 pixels onder zitten.

Ik heb zelf het volgende gemaakt, maar het werkt niet.

code:

#bigmain {
  position:absolute;
  top: 100px;
  left: 10px
  background: #FFFFFF;
  border: 1px solid #BBBBBB;
  padding: 2px;
  }

#main {
  position:relative;
  top: 10px;
  left:30px
  background: #FFFFFF;
  border: 1px solid #BBBBBB;
  }

[Verwijderd]

Dit zou er toch voor moeten zorgen dat id=main 10 pixels er onder en 30 pixels meer naar links begint? Waarom werkt dit niet?

[Eskimootje]

Niet schoppen en bekijk eens wat tutorials/specs. Naar mijn idee snap je het nog niet helemaal.

[RM-rf]

dat kan je enkel doen door een extra container om te plaatsen:

code:

<style type="text/css">
#mainBlok {
  position:absolute;
  width: 100%;  
  top: 10px;
  left:30px
}
#bigMain {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #BBBBBB;
  padding: 2px;
  margin-bottom: 5px;
}
#main {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #BBBBBB;
}
</style>

<div id="mainBlok">
   <div id="bigMain">blah</div>
   <div id="main">blah</div>
</div>

---

_{crisp: even [ nohtml ] eromheen gezet}

[ Voor 50% gewijzigd door RM-rf op 26-08-2003 17:47 . Reden: #%&$ HTML-rechten bugje (of eerder mijn fout) ]

[Eskimootje]

RM-rf schreef op 26 augustus 2003 @ 17:30:Een heleboel html en css van iemand met HTML rechten fixed by Crisp.

zonder html rechten is denk ik beter

[ Voor 66% gewijzigd door Eskimootje op 26-08-2003 17:36 ]

[Verwijderd]

RM-rf schreef op 26 August 2003 @ 17:30:
dat kan je enkel doen door een extra container om te plaatsen:

en een margin-bottom dan?

http://www.w3schools.com/css/pr_margin-bottom.asp

[ Voor 15% gewijzigd door Verwijderd op 26-08-2003 17:42 ]

[RM-rf]

klopt, de margin-bottom moet je dan gebruiken om die extra 5px afstand onder bigMain te zetten (was die idd vergeten), echter als bigMain position:absolute; heeft dan heeft deze geen invloed op andere elementen

[Verwijderd]

bij #main dan een margin-top (als ie relative is)

[ Voor 34% gewijzigd door Verwijderd op 26-08-2003 18:00 ]

[RM-rf]

een margin-top bij een relatieve #main is wel leuk, maar zorgt er enkel voor dat de afstand tot de bovenrand van de pagina vergroot wordt, als #bigMain absoluut gepositioneerd is heeft deze geen invloed op een wel relatieve #main

[Verwijderd]

srry,.. idd.. hier stond een boel gezwets en code
bij relatieve zooi gaat dit wel op, zoals tabellen.

[ Voor 157% gewijzigd door Verwijderd op 26-08-2003 18:27 ]

[Verwijderd]

OK, RM-rf, dat werkt inderdaad, thanx.

Nu wil ik alleen dat het onderste blok gedeeld wordt, twee blokken naast elkaar dus. Moet daar weer een aparte container voor gemaakt worden???

[Verwijderd]

Voor de duidelijkhei, ik moet de volgende indeling maken:

code:

+---------------------------------------------+
|                                             |
|   hoogte hiervan is variabel                |
|                                             |
|                                             |
+----------------------------+----------------+
|                            |                |
|                            |                |
|                            |                |
|                            |                |
+----------------------------+----------------+

[ Voor 8% gewijzigd door Verwijderd op 26-08-2003 20:41 ]

[Johnny]

je hoeft geen aparte container te maken, je kunt gewoon via position: absolute; bottom: 0px; en dan voor left: een andere waarde opgeven om de rechterdiv te verplaatsen.

[ Voor 75% gewijzigd door Johnny op 26-08-2003 21:07 ]

[Verwijderd]

Voor wat diehard studie materiaal op dit gebied (wat niet altijd makkelijk is) zou ik je de sites www.espn.com en www.wired.com best willen aanraden