Navigation, horizontal, zentriert, mousover, float left möglich?

[mtjvc]

Hallo Leute

Bin gerade dabei eine Website für einen Bekannten zu erstellen..

So weit so gut ... Hier kommt mein Problem

Wir haben hier eine Navigationsleiste, die ist fixed gesetzt weil sie bis zum Ende der Seite mitscrollen soll ..

Mousover Effekte damit es auch anschaulich ist ..

Meine Frage:

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

Die Html:

  
<ul class="nostyle">  
<li class="home"><a href="#box1"></a></li>  
<li class="profil"><a href="#box2"></a></li>  
<li class="leistungen"><a href="#box3"></a></li>  
<li class="kontakt"><a href="#box4"></a></li>  
<li class="niceprice"><a href="#box5"></a></li>  
</ul>  

Css

  
@charset "utf-8";  
/* CSS Document */  
  
  
.nostyle  
{		  
			margin-left: auto;  
            margin-right: auto;  
			list-style-type:none;  
			position:fixed;  
			top:20px;  
			left: 400px;  
			background:none;  
			float:right;  
			width:100%;  
			  
}  
  
  
  
.home  
{  
	float:left;  
}  
.home a       { display:block;  
             background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/home.png);  
             width:109px; height:41px }  
.home a:hover { background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/home_on.png); }  
  
  
  
  
  
.profil  
{  
	float:left;  
}  
.profil a       { display:block;  
          		   background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/profil.png);  
          		   width:109px; height:41px }  
.profil a:hover { background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/profil_on.png); }  
  
  
  
  
  
.leistungen  
{  
						float:left;  
}	  
.leistungen a       {	display:block;  
          			   background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/leistungen.png);  
          			   width:109px; height:41px; }  
.leistungen a:hover { background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/leistungen_on.png); }  
  
  
  
  
.kontakt  
{  
					float:left;  
}  
.kontakt a       { display:block;  
          		   background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/kontakt.png);  
          		   width:109px; height:41px; }  
.kontakt a:hover { background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/kontakt_rot.png); }  
  
  
.niceprice  
{  
					float:left;  
}  
.niceprice a	{	display:block;  
					background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/niceprice.png);  
					width:109px; height:41px;}  
  
  

Zur veranschaulichung:

Website

Hoffe ihr versteht meine Frage und könnt mir helfen..

Mfg

Anto

[Der Martin]

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:(

[Jo]

Hallo,

wie Martin schon ausgeführt hat ist der .nostyle {...} sehr seltsam und wenn du den Quelltext deiner Seite anschaust wird du erkennen das da noch mehr Seltsamkeiten vorhanden sind...

Aber als Lösung für deine Frage wäre eine Javascript Lösung ideal, da du damit den Client auf seine Breite abfragen kannst dementsprechend kann dann das Menue oben fixiert Links x-Pixel ausgerichtet werden.

Gruss Ja

[mtjvc]

Zu meiner Verteidigung, ich bin totaler Anfänger und mache alles nur durch probieren ..

Wenn ihr irgendwas "komisches" findet, bitte sagen..

Bitte für allerlei Kritik offen und bereit dazuzulernen ...

mfg

mtjvc

[Matthias Apsel]

Om nah hoo pez nyeetz, mtjvc!

Bitte für allerlei Kritik offen und bereit dazuzulernen ...

Na dann: validiere deinen Code

Matthias

[mtjvc]

Super, Danke Matthias!

Ich werde jetzt zuerst schauen die Fehler zu beheben die mir der Validator anzeigt, danach werde ich mich mit dem js befassen zwecks der Navigationsleiste...

Was mir auch auffällt dass ich garkeine Struktur habe und so dass alles ziemlich unübersichtlich wird..

Melde mich wieder wenn ich diese Fehler behoben habe

Gruß

mtjvc