Topbar in een div

[HaBl]

Hallo,

Ik ben al een tijdje aan het stoeien om een topbar te maken in een div net overflow auto. Het is dan dus de bedoeling dat deze div op zijn plek blijft staan, ook als je gaat scrollen. Heb wel wat oplossingen gevonden om hem in de body op zijn plek te houden, maar dat werkt in dit geval niet.

Hoe ik het wil is dus het volgende:

code:

<div id="content">
    <div id="topbar"></div>
    Hier wat content...
</div>

Nu had ik zelf een css als dit in gedachten:

code:

#content {
    padding: 5px;
    height: 98%;
    overflow: auto;
    background-color: #eeeeee;
    position: relative;
}

#info {
    position: absolute;
    width: 100%;
    height: 50px;
    background-color: #000000;
    top: 0;
    left: 0;
}

Dit werkt alleen niet, de topbar blijft nu helemaal bovenin de div hangen, waardoor je het als je gaat scrollen niet meer ziet. Ik weet niet meer precies wat ik nog meer kan proberen, dus ik had gehoopt dat iemand anders er meer ervaring mee heeft:)

[Rowanov]

HaBl schreef op zaterdag 10 januari 2009 @ 14:57:
Ik ben al een tijdje aan het stoeien om een topbar te maken in een div net overflow auto. Het is dan dus de bedoeling dat deze div op zijn plek blijft staan, ook als je gaat scrollen. Heb wel wat oplossingen gevonden om hem in de body op zijn plek te houden, maar dat werkt in dit geval niet.

Wat voor oplossingen?

*knip*

Nu had ik zelf een css als dit in gedachten:

*knip*

Dit werkt alleen niet, de topbar blijft nu helemaal bovenin de div hangen, waardoor je het als je gaat scrollen niet meer ziet. Ik weet niet meer precies wat ik nog meer kan proberen, dus ik had gehoopt dat iemand anders er meer ervaring mee heeft:)

Met absolute positionering trek je het div element uit de flow en plaats je het op een absolute positie binnen het omvattende element, met dien gevolge dat hij binnen dat element vast staat en gewoon mee scrollt. Wat jij wil is fixeren ten opzichte van het browser venster; dat klinkt als position: fixed;.

[ Voor 3% gewijzigd door Rowanov op 10-01-2009 16:15 ]

[HaBl]

Rowanov schreef op zaterdag 10 januari 2009 @ 16:15:
[...]


Wat voor oplossingen?

Bijvoorbeeld http://tagsoup.com/cookbook/css/fixed/top/

[...]


Met absolute positionering trek je het div element uit de flow en plaats je het op een absolute positie binnen het omvattende element, met dien gevolge dat hij binnen dat element vast staat en gewoon mee scrollt. Wat jij wil is fixeren ten opzichte van het browser venster; dat klinkt als position: fixed;.

In tegendeel, als ik hem op fixed zet, zal hij hem fixed ten opzichte van de document zetten. Dit is juist niet wat ik wil, ik wil hem fixed tenopzichte van een div maken. Als ik hem op de document zou positioneren, kan ik de maten niet goed bepalen, omdat de div waar hij overheen moet vallen resizable is.

[mcDavid]

Waarom zo moeilijk?

code:

<div>
  <div id='topbar'></div>
  <div id='content'></div>
</div>

#topbar lekker laten staan, #content overflow:auto.

[ Voor 3% gewijzigd door mcDavid op 10-01-2009 23:11 ]

[HaBl]

Opzich heb je daar gelijk in natuurlijk, dat zou het oplossen. Alleen is het de bedoeling dat die topbar een transparante div wordt die een beetje over de content valt zeg maar.

[mcDavid]

...en waarom zou dat op deze manier niet gaan?

[Geert.H]

@HaBI
mcDavid heeft volgens mij net de richting van de oplossing gegeven. Als jij de topbar tov. de content div fixed wil maken - dan is dit the way to go. Het is dus goed als je het zou testen en evt. dan nog terug zou komen met problemen. Niet direct afkeuren.

Dus hup aan de slag

[HaBl]

Lol, inderdaad, jullie hebben gelijk. Ik zat inderdaad te moeilijk te denken. Was gisterenavond te laat dat ik die reactie las denk ik

Voor de volledigheid hier nog even het eind resultaat:

code:

<div id="holder">
   <div id="topbar"></div>
   <div id="content">
      Hier wat content...
   </div>
</div>

En de css:

code:

#holder {
    position: relative;
}

#content {
    padding: 5px;
    height: 98%;
    overflow: auto;
    background-color: #eeeeee;
}

#topbar {
    position: absolute;
    width: 100%;
    height: 50px;
    background-color: #000000;
    top: 0;
    left: 0;
}

Mijn exsuses dat ik zo snel was met afkeuren!

[HaBl]

Nog een kleine aanvulling, bovenstaande gaat in IE (uiteraard) niet goed. De overflow werkt niet. Om die te laten werken wil IE dat #holder ook een height heeft. Als je die een height geeft gaat het ook in IE goed.