CSS Layout mit fixed Navigation lässt sich nicht umsetzen

[mosquito87]

Hallo zusammen,

ich versuche gerade, folgendes Layout über HTML/CSS umzusetzen:

+---------------------------------------+
|  +---------------------------+-----+  |
|  |fixed Nav1                       |  |
|  +---------------------------+-----+  |
|  |fluid Content              |fixed|  |
|  |                           |Nav2 |  |
|  |                           |     |  |
|  +---------------------------+-----+  |
|                                       |
+---------------------------------------+

Die Website soll mittig dargestellt werden, das klappt:

*
{
    margin: 0;
    padding: 0;
    font-family: Tahoma, Lucida Sans, Verdana, Arial;
    font-size: 10pt;
    color: #3f3f3f;
    border: 0;
[B]    margin-left: auto;
    margin-right: auto;[/B]
}

Nav1 (oben) soll fixed sein, also "mitscrollen", immer sichtbar sein. Das wurde schon umgesetzt und funktioniert auch (ist auch nicht schwer, da Nav1 ja immer mittig sein soll):

#header
{
    position:fixed;
}

Nav2 (rechts) soll ebenfalls fixed sein. Hier funktioniert die momentane Umsetzung nur mit festen Positionsangaben:

#navRechts
{
    background-image: url(../images/navRechts.png);
    background-repeat:repeat-y; 
    min-height: 100%;
    max-width: 225px;
[B]    position: fixed;
    right: 119px;[/B]
}

Ich sage, dass es 119px vom rechten Rand entfernt sein soll. Doch was passiert bei einer viel geringeren Auflösung? Dann ist es auch noch 119px vom Rand entfernt und überlappt somit den Content.
Content weiß leider nichts von Nav2, weil fixed sich wie absolute verhält, d. h. absolut positionierte Elemente werden ja aus dem Fluss herausgehoben und liegen über den anderen Elementen.

Ich will trotzdem, dass Nav2, horizontal gesehen, erst nach Content angezeigt wird. Nav2 muss aber quasi "mitscrollen", der Inhalt also zu jeder Zeit sichtbar sein.

Wie realisiere ich das? :-(

Danke.

 

[DeFlamm]

Bin ich jetzt völlig daneben oder gibt man mit "fixed" nicht an, dass der Bereich an der Stelle bleiben soll?

 

[Cool Master]

Für eine Zentrierte Darstellung kann man auch das nutzen:

margin: 0 auto;

ist schon ein wenig Optimierung Desweitern würde ich hinter die 0er immer eine EInheit schreiben sieht einfach besser aus

Warum muss es umbedingt fixed sein?

Ich würde dir empfehlen mit "float" zu arbeiten und sobald du damit fertig bist mit

clear:both;

den float aufheben.

@DeFlamm

Ja fixed =an der stelle bleiben ähnlich wie position:absolute;

 

[faltermayer]

Hmm... Ich weiß nicht, ob ich was übersehe, aber warum gibst du nicht deinem "fluid content" nen magrin-right, so dass für navRechts immer genug Platz bleibt und die Nav-Box deinen Content nicht überdeckt?

 

[Daaron]

muss man sogar so machen, da sonst irgendwann bei entsprechend langen Inhalten der Krams unter die Navigation (oder darüber) rutscht.

 

[mosquito87]

Die Nav2 soll immer sichtbar sein.
Der Content darin (mehrere Buttons) soll man auch noch sehen, wenn man weit nach unten gescrollt ist.
Dafür wollte ich fixed nehmen. Das ist doch soweit richtig und es gibt keine andere Lösung, oder?

Content sieht in CSS momentan so aus:

#content
{
    background-image: url(../images/backgroundContent.png);
    background-repeat:repeat-y; 
    min-height: 500px;
    max-width: 799px;
}

Ergänzung (27. September 2012)

Übrigens, mit folgendem Code erziele ich mein Ergebnis.
Aber dann ist die Nav2 links und der Content rechts. Also genau umgekehrt wie gewollt:

#content
{
    background-image: url(../images/backgroundContent.png);
    background-repeat:repeat-y; 
    min-height: 500px;
    max-width: 799px;
    float: right;
}
#navRechts
{
    background-image: url(../images/navRechts.png);
    background-repeat:repeat-y; 
    min-height: 100%;
    max-width: 225px;
    position: fixed;
    float: left;
}

 

[Daaron]

du hättest ganz einfach machen sollen, was wir dir gesagt haben:
#content
{
margin-right: 225px;
}

 

[mosquito87]

Ausprobiert- alle Kombinationen, ohne Erfolg.

Wie würde denn der komplette Content-Block aussehen, wie der NavRechts-Block?

 

[Daaron]

#navTop
{
position:fixed;
top: 0;
left: 0;
right: 0;
height: 100px
}

#content
{
//position: static;
margin-top: 100px; //zzgl. n bisschen Luft
margin-right: 225px;
}

#navRight
{
position: fixed;
right: 0;
top: 100px;
bottom: 0;
width: 225px;
}

rubbeldikatz bin ich fertig

 

[mosquito87]

Danke. Aber:
Damit ist die NavRechts einfach an den rechten Rand geklatscht.
Und so soll es nicht sein.
Denn ab einer gewissen Auflösung soll links und rechts von der Seite ein Rand sein. Die Seite soll zentriert sein. Siehe Skizze in Anfangspost.
Und somit ist die Position der NavRechts mal näher und mal weiter vom rechten Browserrand weg.

 

[Daaron]

Das ist wohl eher ein Fall für mediaqueries. Responsive Design ist halt kein Pappenstiel. Da muss man teilweise wirklich mal nachdenken, wie man es am besten angeht.

 

[Boehser Onkel]

Hi mosquito87, dies dürfte m.M. in etwa Deiner Vorstellung nahe kommen: siehe Beispiel auf jsfiddle.net

 

[Daaron]

In der Version ist der Content-Bereich immer gleich breit. Das klingt für mich zumindest nicht sehr fluid. Außerdem drückst du bei niedrigen horizontalen Auflösungen die rechte Navigation aus dem Bild. Zumindest im Fiddle ist jetzt absolut kein Zugriff mehr auf die rechte Navigation mehr möglich.