Webseite mit fixer Linkliste und fixem Hintergrundbild

  • Im angehängten Bild ist eine potentielle HTML-Seite abgebildet, die ich mir so wie im Bild vorstelle.


    Die Linkliste soll links unter dem roten Rahmen angeordnet sein und fix sein.


    Das rote Hintergrundbild sollte immer zentriert sein und sich ebenfalls nicht mitverschieben.


    Nur der Inhalt, der immer in den Hintergrund passen soll, soll scrollbar sein.


    Beim verschieben und skalieren des Browserfensters, soll die Anordnung immer gleich bleiben:


    Linkliste unter dem roten Hintergrundbild-Rahmen


    Inhalt innehalb des Hintergrundbildes



    Ich habe schon verschiedenes versucht mit CSS, Tabellen, etc. Immer passt
    etwas nicht. Entweder ragt der Inhalt über das Hintergrundbild hinaus, oder beim Verschieben des Fensters bleibt das Fenster zentriert, der Text aber verschiebt sich. Oder es treten andere Probleme auf.


    Anbei mein css-Code:



    div#linklist steht für die Linkliste, die links unter dem roten Rahmen zu sehen ist


    div#content steht für den Inhalt, der im Hintergrundbild eingebettet ist/sein soll.


    div#main geht über den ganzen <body>-Inhalt



    Bitte um konstruktive Tipps und Vorschläge. Am besten wäre Beispielcode mit dem angehängten Bild.


    LG
    padding-top

  • Am besten einen main-container erstellen mit diesem Hintergrund bild.
    Anweisungen:
    margin-left: auto;
    margin-right: auto;
    width: bildbreite;
    height: bildhöhe;
    background: url('path') no-repeat 0 0 scroll;


    Dann hängste das menue einfach als absatz links an den Rand des main-containers und für den context machste ein neues element mit floar:right; und overflow: scroll; (margin-top: höhe des roten abschnitts;)