feststehende Navi-leiste

Question

Guten Tag,
Die Navileiste soll beim Scrollen nicht mitlaufen, sondern fest stehen bleiben, so dass sie immer zu sehen ist.
Ich habe folgende "css" Angabe gemacht:

[quote]
menucontainer {
position:fix;
border:0px solid #000;
background-color:#ffffff;
width:170px;margin:4px;

}

Dann <div class="menucontainer">

Die Navileiste bleibt aber nicht stehen.
Habe ich etwas übersehen?
Danke für die Antwort.
Gruß
Annika

Answer 1

Hallo Annika,

ändere mal im CSS die Position von fix nach fixed

Gruß
computerschrat

Answer 2

Hi,
ein Menü im HTML steht von Haus aus immer fest, wenn es nicht duch einen anderen Code oder JavaScript in Bewegung gesetzt wird.
Du hast uns sicher nicht alles mitgeteilt.

Answer 3

Nachtrag:
Setze mal einen Punkt vor

.menucontainer {
position:fixed;
border:0px solid #000;
background-color:#ffffff;
width:170px;margin:4px;
}

Answer 4

Danke für die Antwort. Punkt gesetzt und fixed; ergänzt. Auch kein Erfolg. Die Navileiste bleibt nicht stehen, sondern der Text scrollt an ihr vorbei, so dass die Navileiste weiter unten nicht mehr zu sehen ist.

Answer 5

Ich habe die Seite mit css erstellt. Bei Seiten, die mit Frames geschrieben wurden, bleibt die Navileiste stehen und der Text zieht vorbei. Dieses wollte ich mit css auch erreichen.

Answer 6

Im Missverständnisse zu vermeiden:
Deine Anwendung hat ein Fenster. Wenn der Inhalt des Fensters zu lang ist, scrollst Du den innerhalb des Fensters. Dann sollte es aber mit den oben genannten Einstellungen gehen.

Wenn natürlich das Fenster selbst nicht in die das Browserfenster passt, so dass Du im Browser rauf- und runterscrollst, dann rollt natürlich das Navigationsmenü auch mit. Das könntest Du dann eventuell mit Java Script lösen.

Welcher Fall tritt bei Die ein?

Gruß
computerschrat

Answer 7

Hallo Computerschrat,
zunächst Danke für Deine verschiedenen Hilfen.
Konkret:
Die gesamte Seite ist 900px, unterteilt in 2 Bilder, die zusammen ca 770px breit sind. Der Rest ist für die Navileiste vorgesehen.
Der Text ist länger als das Fenster. Ich muß also scrollen und dadurch verschwindet die Navileiste.
Ich möchte erreichen, dass der Text an der Navileiste vorbei läuft und die Navileiste immer zu sehen ist.
Du hast geschrieben, dass das Problem mit Java Skript zu lösen ist. Das habe ich bisher noch nicht gemacht. Kannst du mir bitte einen Rat dazu geben.
Danke.
Beste Grüße
Annika

Answer 8

Ich habe hier mal ein kleines Beispiel gemacht. Die Kopfzeile und die linke Spalte stehen fest, in der rechten Spalte kannst Du rauf und runter-scrollen, ohne dass sich links und oben etwas bewegt.

Zuerst der CSS Bereich

#seitenkopf
{
position:absolute;
height:79px;
top:10px;
width:904px;
left:10px;
border-width: 5px;
border-spacing: 2px;
border-style: inset;
border-color: #1d5773;
border-collapse: separate;
padding: 10px;
}

#linke-spalte
{
position:absolute;
height:150px;
top:123px;
width:140px;
left:10px;
border-width: 5px;
border-spacing: 2px;
border-style: inset;
border-color: #1d5773;
border-collapse: separate;
padding:10px;
}
#rechte-spalte
{
position:absolute;
height:150px;
top:123px;
width:730px;
left:184px;
overflow: scroll;
border-width: 5px;
border-spacing: 2px;
border-style: inset;
border-color: #1d5773;
border-collapse: separate;
padding:10px;
}

und hier der HTML-Code

<div id="seitenkopf">
Kopf<br/>
Der soll sich nicht bewegen
</div>

<div id="linke-spalte">
Navigationsmenü<br/>
Dieser Bereich sollte sich nicht bewegen
</div>

<div id="rechte-spalte">
Inhaltsbereich<br/>
Hier <br/>
gehts<br/>
rauf<br/>
und<br/>
runter,<br/>
wenn<br/>
der<br/>
Platz<br/>
nicht<br/>
reicht<br/>
um<br/>
alles<br/>
darzustellen.<br/>
</div>

Gruß
computerschrat

Answer 9

Guten Abend Computerschrat,
danke für den Entwurf. Ich mußte 2 Positionen umschreiben, weil die Navileiste bei mir rechts angesiedelt ist.
Die Navileiste scrollt allerdings mit. Ich wollte ja erreichen, dass an der Navileiste der Text vorbei scrollt, so dass die Navileiste immer zu sehen ist. Habe ich da etwas falsch gemacht?

[quote]#linke-spalte
{
position:absolute;
height:850px;
top:323px;
width:750px;
left:10px;

padding:10px;
}


#rechte-spalte
{
position:absolute;
height:10px;
top:13px;
width:730px;
left:770px;

padding:10px;
}

Annika

Answer 10

Dir fehlt in dem div, das gescrollt werden soll noch ein
overflow: scroll;
damit der Inhalt dieses div gescrollt werden kann.

Ausserdem scheint mir die Spalte mit dem Ihnalt so groß zu sein, dass hier nichts zu scrollen ist, das passt immer rein. Sie ist aber so groß, dass sie vermutlich nicht ins Browserfenster passt. Demnach scrollst Du wirklich im Browserfenster und nicht im div.

Wie man da mit Java Script die Position fixiert weiss ich nicht, da ich das bisher nicht gemacht habe, ich habe nur mal gelesen, dass das geht. Vielleicht findet sich da noch ein anderer Supporter.

Aber, muss denn Dein Ausgabefenster so groß sein? Wenn Du mal mein Beispiel startest sollte doch ungefähr der gewünschte Effekt sichtbar werden. Wichtig ist, dass die divs alle zusammen in das Browserfenster passen.

Gruß
computerschrat