[CSS] Geneste layer of niet?

[Reveller]

Ik wil een plaatje op mijn website hebben, dat altijd rechtsonderaan in de browser zit. Ik wil dit dynamisch toevoegen en heb hiervoor o.a. het volgende:

JavaScript:

function O_banner() {
  var banner = O_n('div', {'id' : 'O_banner'});
  document.body.appendChild(banner);
}

function O_n(type, options) {
  if (type == 'text') {
    var el = document.createTextNode(options);
  }
  else {
    var el = document.createElement(type);
    for (var key in options) {
      el.setAttribute(key, options[key]);
    }
  }
  return el;
}

Cascading Stylesheet:

#O_banner {
  position: absolute; 
  right: 20px; 
  bottom: 20px;
  width: 200px;
  height: 100px; 
  background: url("banner.gif");
}

Door van O_banner() een onload event te maken, verschijnt de banner rechtsonderaan. Maar op die banner, wil ik een kruisje maken om de banner te kunnen sluiten (met onmouseover een verandering van de kleur van het kruisje). Nu heb ik 2 plaatjes gemaakt van een zwart en een rood (mouseover) kruisje, maar mijn vraag is hoe ik deze toevoeg:

• moet ik een aparte div definieren met het kruisje en deze een absolute position geven of
• een div binnen #O_banner maken en deze relatief ten opzichte van #O_banner definieren?

Wat is het meest gebruikelijk?

[Sebazzz]

Heb je wel eens van position:fixed gehoord?

Voor de browsers die het niet ondersteunen zorg je voor een andere (of deze) oplossing.

offtopic:
Ja, IE6 ondersteunt het niet, maar schijt IE6 maar uit...

[Reveller]

Sebazzz schreef op zondag 21 september 2008 @ 20:32:
Heb je wel eens van position:fixed gehoord?

Voor de browsers die het niet ondersteunen zorg je voor een andere (of deze) oplossing.

offtopic:
Ja, IE6 ondersteunt het niet, maar schijt IE6 maar uit...

Ik heb graag een generieke oplossing waarvan ik weet dat 'ie altijd werkt, en dit werkt opzich toch goed?

[Verwijderd]

Waarom zou je voor het toevoegen van een knopje een div gebruiken? Zou je niet eerder denken aan <button> of <input type="button"> die er iets meer geschikt voor zijn?

Het knopje valt binnen het banner element, maar of het ook hiërarchisch binnen dat element hoort is de vraag. Wat mij betreft boeit het niet zoveel, maar ik zou hem erbinnen doen omdat dat minder gedoe is bij het op het kruisje klikken.

Sowieso niet relatief positioneren. Absoluut positioneren binnen een niet-static gepositioneerd betekent altijd dat de absolute positie relatief wordt bepaald ten opzichte van de oorsprong (linkerbovenhoek) van dat element. En dat is wat je wilt. Het plaatje moet op een vaste plaats in een container komen. Dan positioneer je dus absoluut, en moet de container absoluut, relatief of fixed gepositioneerd zijn.

Verder: een div element maken met een id dat al een functienaam is binnen Javascript, is natuurlijk niet handig.

[ Voor 28% gewijzigd door Verwijderd op 21-09-2008 20:41 ]

[Reveller]

Verwijderd schreef op zondag 21 september 2008 @ 20:38:
Waarom zou je voor het toevoegen van een knopje een div gebruiken? Zou je niet eerder denken aan <button> of <input type="button"> die er iets meer geschikt voor zijn?

Volgens mij kan ik geen mouseover actie aan een button input type hangen waardoor het tweede (mouseover) plaatje geladen wordt...