Anzeige

Vertikale Navigation scrollbar

Vertikale Navigation scrollbar | PSD-Tutorials.de

Erstellt von aemkey, 22.06.2010.

  1. aemkey

    aemkey Nicht mehr ganz neu hier

    2
    Dabei seit:
    08.04.2010
    Beiträge:
    138
    Geschlecht:
    männlich
    Software:
    Cinema 4D 11.5, Photoshop CS4
    Kameratyp:
    Nikon D70s
    Vertikale Navigation scrollbar
    Hallo zusammen
    Beim Programmieren einer Homepage bin ich gerade auf ein Problem gestossen.

    Ich habe ein vertikales Menu mit einem Hintergrundbild, verpackt in ein DIV. Nun habe ich diesem DIV die Höhe 100% gegeben. Dies führt aber zum Problem, dass wenn der Inhalt länger ist als die Seite, das Hintergrundbild abgeschnitten wird. (Schön zu sehen, wenn man das Fenster klein macht und dann scrollt)

    Das Beispiel ist unter http://kutschenfahren.ch/test5/index.php?a=p_stadt zu finden.

    Ziel des Ganzen ist, die Scrollbars nur auf den Inhalt zu beziehen, das heisst also, dass links die Grafik bei längeren Texten immer wieder erscheint, ohne aber als "Inhalt" gesehen werden.

    Ich hoffe, das ist soweit verständlich.
     
    Zuletzt bearbeitet: 22.06.2010
    #1      
  2. rest5

    rest5 webbastler

    Dabei seit:
    16.02.2007
    Beiträge:
    301
    Geschlecht:
    männlich
    Vertikale Navigation scrollbar
    AW: Vertikale Navigation scrollbar

    Warum legst Du den Blauen Qualm nicht in einen extra <div>?

    Alternativ kannst Du auch Deinem Navi-Container mit min-height eine Mindesthöhe zuweisen, die für das Bild in jedem Fall reicht.
     
    Zuletzt bearbeitet: 22.06.2010
    #2      
  3. aemkey

    aemkey Nicht mehr ganz neu hier

    2
    Dabei seit:
    08.04.2010
    Beiträge:
    138
    Geschlecht:
    männlich
    Software:
    Cinema 4D 11.5, Photoshop CS4
    Kameratyp:
    Nikon D70s
    Vertikale Navigation scrollbar
    AW: Vertikale Navigation scrollbar

    Das ist eben gerade nicht das Ziel.
    Wenn der Inhalt (also die rechte Seite) komplett dargestellt werden kann, will ich nicht noch runterscrollen können, um den blauen Qualm ganz zu sehen. Der blaue Qualm soll also bei einer kleinen Auflösung nur angeschnitten sein.

    So soll das Ganze bei 1024 ungefähr aussehen ohne Scrollbalken, da der Ganze Inhalt bereits da ist:
    [​IMG]
     
    #3      
  4. rest5

    rest5 webbastler

    Dabei seit:
    16.02.2007
    Beiträge:
    301
    Geschlecht:
    männlich
    Vertikale Navigation scrollbar
    AW: Vertikale Navigation scrollbar

    Ich glaube das geht nicht, jedenfalls nicht mit bloßem CSS. Bin gespannt, ob Dir da jemand eine gute Lösung postet und schließe mich Deiner Frage an.
     
    #4      
  5. AlexanderBo

    AlexanderBo Gesperrt

    Dabei seit:
    09.04.2009
    Beiträge:
    425
    Geschlecht:
    männlich
    Ort:
    im Tor zur Welt ;-)
    Software:
    Notepad++ / CS4
    Vertikale Navigation scrollbar
    AW: Vertikale Navigation scrollbar

    wenn ich dich richtig verstehe pack es in den #inhalt

    Code (Text):
    1.  
    2. overflow: auto;
    3. overflow: hidden;
    4.  
     
    #5      
  6. aemkey

    aemkey Nicht mehr ganz neu hier

    2
    Dabei seit:
    08.04.2010
    Beiträge:
    138
    Geschlecht:
    männlich
    Software:
    Cinema 4D 11.5, Photoshop CS4
    Kameratyp:
    Nikon D70s
    Vertikale Navigation scrollbar
    AW: Vertikale Navigation scrollbar

    Das Problem ist fast gelöst. Ich habe das Ganze nun in einen umgebenden Div-Container (blau) verpackt, da body die Anweisung min-height nicht interpretiert.

    Nun hats nur noch eine Schwachstelle. Falls der Inhalt kürzer ist als das Navi-Div (schwarz) und das Browserfenster kleiner ist als das Navi-Div, hat der Container nur die Höhe des Browserfensters, das Hintergrundbild wird also abgeschnitten.

    Lösungsvorschläge willkommen

    http://kutschenfahren.ch/test5/
     
    #6      
x
×
×