Elemente mit 100% Breite werden "zur Seite gescrollt"
Ralf
- css
Hallo,
ich habe ein für mich unlösbares Problem in einer Website, die ich gerade umsetze. Es lässt sich auch sogar anhand dieses Forums demonstrieren:
Ich habe einen Header (nehmen wir einmal an es handelt sich dabei in diesem Fall um den hellgrauen Kasten oben mit dem SELFHTML-Logo) und darunter den Content-Bereich. Der Header ist allerdings leicht transparent, damit ein Hintergrundbild, welches sich im Body befindet und oben rechts ausgerichtet ist, leicht durchscheint.
Der Content-Bereich hat eine feste Breite. Nehmen wir an, es handelt sich dabei um den Kasten "Nachricht beantworten" hier in dem Forum.
Jetzt kommt mein Problem: Verkleinert man das Browserfenster nun in der Breite solange, bis es schmaler wird als der Contentbereich (Das Nachrichtenfeld), so erscheint der horizontale Scrollbalken.
Scrollt man nun beim Lesen des Contentbereichs nach rechts, so wird der Header oben "zur Seite geschoben" - er bleibt so schmal wie der Viewport des Browserfensters. In diesem Fall wird nun das dahinterliegende Hintergrundbild sichtbar. Je nachdem wie weit man scrollt, wird es teils mehr, teils weniger durch den transparenten Header verdeckt.
Das ganze sieht ziemlich unschön aus und die Kundin nervt mich, weil sie den Header gerne immer am rechten Browserrand anschließend haben möchte... So wie ein "Magnet".
Da ein Element mit 100% Breite allerdings immer die Breite des sichtbaren Bereiches annimmt weiß ich einfach nicht mehr weiter.
Meine Hoffnung für eine Lösung des Problems liegt nun bei Euch. Hat jemand eine Idee?
Vielen lieben Dank im Voraus,
Ralf
Hi,
Da ein Element mit 100% Breite allerdings immer die Breite des sichtbaren Bereiches annimmt weiß ich einfach nicht mehr weiter.
Absolute Positionierung, und Breite implizit aus left- und right-Angabe bestimmen lassen?
(Ausrichtung dann natuerlich nicht am Viewport, sondern einem Container, der seinerseits breiter als dieser bleibt - ggf. funktioniert sogar schon body.)
Funktioniert natuerlich im IE < 7 nicht, der braeuchte dann nach wie vor eine width-Angabe.
MfG ChrisB
Hi,
Da ein Element mit 100% Breite allerdings immer die Breite des sichtbaren Bereiches annimmt
das tut es nicht. Sein Content-Bereich nimmt 100% der Breite seines Elternelements an.
Cheatah