Der Martin: Navigation, horizontal, zentriert, mousover, float left möglich?

Beitrag lesen

Hallo,

So weit so gut ... Hier kommt mein Problem
Wir haben hier eine Navigationsleiste, die ist fixed gesetzt ...

ja, das kann tatsächlich ein Problem sein - nämlich dann, wenn ein Nutzer mit kleinerem Browserfenster daherkommt, als du erwartest. Der kann dann nämlich Teile der Navigation nicht mehr erreichen, weil sie außerhalb seines Browserfensters liegt und dank "fixed" nicht scrollbar ist.

weil sie bis zum Ende der Seite mitscrollen soll ..

Aber position:fixed; tut genau das Gegenteil: Es bewirkt, dass das Element *nicht* mitscrollt.

Wenn ich in den Browser rein oder rauszoome ... Dann verändert sich die Navigationsleiste..  Bzw. sie ist nichtmehr zentriert..

Sie ist in deinem Beispiel auch vorher nicht zentriert. Sie ist nur bei der Browserfenster-Größe, die du aktuell gewählt hast, zufällig etwa in der Mitte.

.nostyle

{
margin-left: auto;
            margin-right: auto;
list-style-type:none;
position:fixed;
top:20px;
left: 400px;
background:none;
float:right;
width:100%;

}

  
Findest du nicht auch, dass "nostyle" ein seltsamer Klassenname ist?  
Egal. Jedenfalls nimmt position:fixed; das Element aus dem normalen Fluss heraus, so dass die beabsichtigte Zentrierung mit margin: auto; wirkungslos ist. Nur left: 400px; sorgt in deinem Fall dafür, dass das Element ungefähr in die Mitte rückt - andererseits aber wegen width: 100%; auch um genau diese 400px nach rechts aus dem Fenster herausragt.  
Übrigens schließt Floating und fixe Positionierung sich auch gegenseitig aus, das float:right; ist daher wirkungslos.  
  

> Hoffe ihr versteht meine Frage und könnt mir helfen..  
  
Generell würde ich raten, auf fixe Positionierung zu verzichten. Falls du trotz der möglichen Probleme daran festhalten möchtest: Erkenne den Widerspruch zwischen left:400px, margin:auto und width:100%.  
  
Ciao,  
 Martin  

-- 
Man soll den Tag nicht vor dem Abend loben.  
Und den Mann nicht vor dem Morgen.  
  (alte Volksweisheit)  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(