[CSS] Hoe divjes definieren?

[Reveller]

Naar aanleiding van een eerdere post - ik wil graag rechtsonderaan de browser een bannertje plaatsen:



De grijze div heeft de volgende CSS:

Cascading Stylesheet:

#grijs {
  position: fixed;
  padding: 10px;
  width: 140px;
  height: 200px;
  right: 20px;
  bottom: 20px;
}

In #grijs wil ik een aantal andere divjes plaatsen. De vraag is hoe ik dit het beste kan doen. Volgens mij is het zo, dat als ik #blauw, #geel, #rood en #roze kinderen maak van #grijs, ik met een simpele getElementById('#grijs').style.visible = none de hele banner laten verdwijnen (hetgeen dient te gebeuren als iemand op #rood klikt). Maar de vraag is dan: met welke CSS zorg ik ervoor dat al die kinderen ook onderaan de browser komen en blijven als er gescrolled wordt? Moet ik ze allemaal een absolute "position : fixed" meegeven of kan het ook anders?

Patriot schreef op woensdag 24 september 2008 @ 21:42:
Een vraag is misschien handig, hier kunnen we niets mee. [...]

Ik had per ongeluk al op "verstuur bericht" geklikt voordat de post af was. Had moeten klikken op "Bekijk bericht"

[ Voor 78% gewijzigd door Reveller op 24-09-2008 21:50 ]

[Patriot]

Een vraag is misschien handig, hier kunnen we niets mee. Wat wil je precies bereiken, en wat heb je zelf al geprobeerd. Bovendien, naar aanleiding van welke post?

[Rekcor]

(terzijde: http://www.howtocreate.co.uk/fixedPosition.html voor fixed in ie6)

maar ik zie het probleem niet zo, als al die kleurendivjes een kind zijn van je grijze div, is hun gedrag toch hetzelfde als die grijze div?

geef anders wat html, zodat we beter kunnen zien wat je doet...

[Reveller]

Rekcor schreef op donderdag 25 september 2008 @ 08:41:
(terzijde: http://www.howtocreate.co.uk/fixedPosition.html voor fixed in ie6)

maar ik zie het probleem niet zo, als al die kleurendivjes een kind zijn van je grijze div, is hun gedrag toch hetzelfde als die grijze div?

geef anders wat html, zodat we beter kunnen zien wat je doet...

Het is vannacht al een soort van gelukt Hierbij de html / css. Zou dit misschien nog beter / efficienter kunnen? Ik heb nog niet veel ervaring met css. Wel heb ik een laatste vraag: waarom zijn #rood en #geel anders als je mijn html / css in een browser bekijkt? Het omdraaien van div#geel ne div#rood in de css geeft geen ander resultaat. Ik definieer toch eerst #geel en daarna pas #rood in de html?

HTML:

<div id="grijs">
  <div id="blauw"></div>
  <div id="geel"></div>
  <div id="rood"></div>
  <div id="groen"></div>
  <div id="roze"></div>
</div>

Cascading Stylesheet:

div#grijs {
  position: absolute; 
  right: 20px; 
  bottom: 20px;
}

body > div#grijs {
  position: fixed;
}

div#grijs {
  padding: 10px;
  width: 130px;
  height: 190px;
  background: grey;
  /* display: none; */
}

div#blauw {
  width: 70px;
  height: 20px;
  background: blue;
  float: left;
}

div#rood {
  width: 20px;
  height: 20px;
  background: red;
  float: right;
}

div#geel {
  width: 20px;
  height: 20px;
  background: yellow;
  margin-left: 10px;
  float: right;
}

div#groen {
  width: 130px;
  height: 130px;
  background: lime;
  margin: 10px 0 10px 0;
  float: left;
}

div#roze {
  width: 130px;
  height: 20px;
  background: pink;
  float: left;
}

[Goodfellas]

Simpel, omdat je het niet aangeeft. Je geeft alleen aan dat ze beide rechts moeten. Probeer dit eens:

<div id="grijs">
<div id="blauw"></div>
<div id="geelenrood"> (float right)
<div id="geel"></div> (float left)
<div id="rood"></div> (float right)
</div>
<div id="groen"></div>
<div id="roze"></div>
</div>

Verder vind ik je CSS bovenin maar vreemd. Waarom niet gewoon
margin: auto; (staat gecentreerd dan)
margin-top en margin-bottom instellen

[supakeen]

Mooi naadje als je div #groen opeens een rooie achtergrond gaat geven

[Verwijderd]

Het kan ook zijn omdat je eerst rood rechts laat floaten daarna pas geel,
waardoor de css ervoor zorgt dat rood uiterst rechts komt en geel er links naast...