mrx: Scrollbalken - Problem

SELF-Forum

Scrollbalken - Problem

mrx
– Informationen zu den Bewertungsregeln

Hallo,
ich habe eine Seite, auf der ein Hintergrundbild als Bild eingebaut ist, damit ich die Breite des Bildes regulieren kann:
<img src="../images/bild.jpg" style="position:absolute; top:0px; border:0px; width:100%; z-index:-1;">

Das Problem: Dadurch, dass es kein Hintergrundbild ist, wird jetzt aber ein Scrollbalken eingeblendet, wenn das Bild zu hoch ist. Wenn ich jetzt im <body>-Tag overflow:hidden hinzufüge, dann verschwindet zwar der Scrollbalken, aber wenn der Text auf der Homepage zu lange ist, kann dieser nicht mehr vollständig gelesen werden.

Welche Möglichkeiten gibt es also, dass das Bild nicht für die Scrollbalken berücksichtigt wird?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Scrollbalken - Problem

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Das Problem: Dadurch, dass es kein Hintergrundbild ist, wird jetzt aber ein Scrollbalken eingeblendet, wenn das Bild zu hoch ist. Wenn ich jetzt im <body>-Tag overflow:hidden hinzufüge, dann verschwindet zwar der Scrollbalken, aber wenn der Text auf der Homepage zu lange ist, kann dieser nicht mehr vollständig gelesen werden.

    Dann verwende overflow:hidden auf einem anderen Element, welches nicht den Hauptinhalt der Seite enthält - bspw. einem zusätzlich um das Bild gelegten DIV-Element.

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Scrollbalken - Problem

      mrx
      – Informationen zu den Bewertungsregeln

      Hi,

      Dann verwende overflow:hidden auf einem anderen Element, welches nicht den Hauptinhalt der Seite enthält - bspw. einem zusätzlich um das Bild gelegten DIV-Element.

      das habe ich auch schon versucht, aber es funktioniert nicht:

      <html>  
<head>  
</head>  
<body>  
<div style="overflow:hidden;">  
<img src="bild.jpg" style="position:absolute; left:0px; top:0px; border:0px; width:100%; z-index:-1;">  
</div>  
  
  
<!-- Inhalt -->  
<!-- Start Inhalt -->  
  
<h2 class="title">Aktuelle News:</h2>  
  
<h2 class='title'>Willkommen (vom 06.10.2009 17:15)</h2>  
<div class='story'>Hallo! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo  
</div>  
  
</body>  
</html>

      Zu sehen ist das auch hier: http://vfb-stuttgart.piranho.de/

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Scrollbalken - Problem

        ChrisB
        – Informationen zu den Bewertungsregeln

        Hi,

        Dann verwende overflow:hidden auf einem anderen Element, welches nicht den Hauptinhalt der Seite enthält - bspw. einem zusätzlich um das Bild gelegten DIV-Element.

        das habe ich auch schon versucht, aber es funktioniert nicht:

        <div style="overflow:hidden;">
        <img src="bild.jpg" style="position:absolute; left:0px; top:0px; border:0px; width:100%; z-index:-1;">

        Und von overflow:hidden ohne die Angabe irgendeiner Breite und Höhe erwartest du dir welchen Effekt genau ...?

        Dass du statt dem Bild das DIV-Element positionierst, sollte doch wohl logisch sein. Das kannst du nämlich problemlos so groß machen, dass es genau den Viewport ausfüllt.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. overflow:hidden greift nicht auf absolut positionierte Kindelem.

        JeSchnell
        – Informationen zu den Bewertungsregeln

        hi,

        Dann verwende overflow:hidden auf einem anderen Element, welches nicht den Hauptinhalt der Seite enthält - bspw. einem zusätzlich um das Bild gelegten DIV-Element.
        das habe ich auch schon versucht, aber es funktioniert [...]

        ... wenn du das Conatiner-DIV absolut positionierst, da sonst overflow:hidden; nicht greift, weil das Kindelement durch die Positionierung aus dem normalen Fluss gerissen wurde. Da bleibt dann nur noch das Problem, dass bei letzten Teil der Seite kein Hintergrund sichtbar ist, falls der Inhalt so lange bzw. der Viewport so niedrig ist, dass man zu diesem erst scrollen muss. Dies kann man aber ändern, in dem man statt einer absoluten eine fixe Positionierung beim DIV-Container verwendet (postion:fixed; orientiert sich nicht an nicht-statischen Vorfahren, sondern am Viewport und ist deshalb auch nicht scroll-sensitiv). Natürlich kann man somit nicht das ganze Hintergrundbild betrachten, da es sich beim Scrollen nicht verschiebt, jedoch kann dies auch gut so sein, da bei ganz langen Texten sonst nach dem "Überscrollen" des Hintergrundbildes nur noch ein kahler weißer Hintergrund zu sehen ist.

        lg JeSchnell

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln