navi verschiebt sich

[eisn]

hallo,

meine navigationsleiste verschiebt sich bei unterschiedlicher auflösung, wodurch kann ich das unterbinden?
der für die leiste relevante css- und html-code is folgender:

  
.navigation{  
margin-left:50px ;  
margin-top:-5px ; /*musste leicht verschoben werden, aber auch ohne margin verschob sich die leiste */  
}  
  
ul#Navigation li {  
text-align:center ;  
list-style:none ;  
float:left ;  
}  
  
ul#Navigation li ul {  
position:absolute ;  
display:none ;  
padding:0 ;  
}  
  
ul#Navigation li:hover ul {  
display:block ;  
background-color:black ;  
}  
  
ul#Navigation li ul li {  
float:none ;  
display:block ;  
}  
  
ul#Navigation a, ul#Navigation span {  
display:block ;  
width:131px ;  
height:36px ;  
text-decoration:none ;  
color:white ;  
font-family: Arial Black, Helvetica ;  
}  

  
<center>  
<div class="navigation">  
<ul id="Navigation">  
  <li><a class="start" href="index.htm">Home</a></li>  
  <li><a class="about" href="about us.htm">About Us <small>▼</small></a>  
   <ul>  
   <li><a class="about" href="about us.htm">BF Bio</a></li>  
   <li><a class="contact" href="contact.htm">Contact Us</a></li>  
   </ul>  
  </li>  
  <li><a class="releases" href="releases.htm">Releases</a></li>  
  <li><a class="freestuff" href="free downloads.htm">Free Stuff <small>▼</small></a>  
   <ul>  
   <li><a class="fdnb" href="free drum n bass.htm">DNB</a></li>  
   <li><a class="fdubstep" href="free dubstep.htm">Dubstep</a></li>  
   <li><a class="mixsets" href="mixsets.htm">Mixsets</a></li>  
   <li><a class="podcasts" href="podcasts.htm">Podcasts</a></li>  
   </ul>  
  </li>  
  <li><a class="artistz" href="artistz.htm">Artistz</a></li>  
  <li><a class="forthcomin" href="forthcoming.htm">Forthcomin</a></li>  
</ul>  
</div>  
      </center>  

die klassen der links sind nur für die textformatierung da, nicht zur positionierung.

vielen dank schonmal
eisn

[Beat]

hallo,

meine navigationsleiste verschiebt sich bei unterschiedlicher auflösung, wodurch kann ich das unterbinden?
der für die leiste relevante css- und html-code is folgender:

Ich sehe wohl ein position:absolut aber nirgendwo ein entsprechendes position:relative, an welchem die Ausrichtung zuverlässig erfolgen könnte.

ul#Navigation li ul {
position:absolute ;
display:none ;
padding:0 ;
}

mfg Beat

[eisn]

Ich sehe wohl ein position:absolut aber nirgendwo ein entsprechendes position:relative, an welchem die Ausrichtung zuverlässig erfolgen könnte.

ul#Navigation li ul {
position:absolute ;
display:none ;
padding:0 ;
}

mfg Beat

also wenn ich dieses absolute rausnehme verschiebt sich der drunterliegende inhalt wenn die unternavi aufklappt - ich denke nicht dass es daran liegt (weder dem body noch dem div "navigation" ein relative zu geben ändert etwas an der situation)...

ich vergass zu erwähnen dass die navi eine dynamische navigation ist, die per hover ein untermenü zeigt (ist eine stark abgespeckte version der dynamischen navi die man hier in der css-referenz findet) http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

mfg
eisn

[apsel]

Om nah hoo pez nyeetz, eisn!

Ich sehe wohl ein position:absolut aber nirgendwo ein entsprechendes position:relative, an welchem die Ausrichtung zuverlässig erfolgen könnte.

also wenn ich dieses absolute rausnehme

was Beat meint, ist, dass ein position:relative fehlt. Zur Positionierung kannst du im selfhtml-wiki einen interessanten Link finden.

Matthias

[eisn]

Om nah hoo pez nyeetz, eisn!

Ich sehe wohl ein position:absolut aber nirgendwo ein entsprechendes position:relative, an welchem die Ausrichtung zuverlässig erfolgen könnte.

also wenn ich dieses absolute rausnehme

was Beat meint, ist, dass ein position:relative fehlt. Zur Positionierung kannst du im selfhtml-wiki einen interessanten Link finden.

Matthias

ok, das hat mir schon mal zum verständnis des position-attributes verholfen, was aber der sache an sich nicht grossartig weiterhilft...
ich hab 'das problem' mal auf unseren server geladen, wär top wenn da mal einer drüberfliegen könnte und mir einen wink mit dem zaunpfahl geben könnte.

das problem

[ChrisB]

Hi,

bitte zitiere sinnvoll, nicht einfach alles.

ich hab 'das problem' mal auf unseren server geladen, wär top wenn da mal einer drüberfliegen könnte und mir einen wink mit dem zaunpfahl geben könnte.

das problem

Zaunpfahl #1
Zaunpfahl #2

Fehler beseitigen, dann weitersehen.

MfG ChrisB

[eisn]

Hi,

bitte zitiere sinnvoll, nicht einfach alles.

hi,

verzeihung und danke für die zaunpfähle (warum ich aber auch nich selbst vorher beim w3c vorbeischaue).

also die fehler sind nun behoben, bis auf den text-shadow, den ich drinlassen werde da ein teil der besucher dann halt die schrift mit schatten sieht - wie vorgesehen - und ein teil ohne (ich will dafür nicht extra eine grafik nutzen, das verlängert nur unnötig die ladezeit).
also nun weitersehen...

mfg
eisn

[apsel]

Om nah hoo pez nyeetz, eisn!

entsorge mal die <center> Dieses Element ist jedoch als deprecated eingestuft. Es ist mittlerweile eigentlich überflüssig und sollte nur noch in begründeten Ausnahmefällen (z.B. Abwärtskompatibilität zu Netscape 1.1) benutzt werden. [[ref:self812;html/text/bereiche.htm#block_zentriert@title=selfhtml]].

und dann kümmere dich um die Zentrierung aller Elemente, dann wird dir sicher was einfallen, was auch der Liste hilft.

Im FF kann man mit firebug gut arbeiten, in Opera ist dragonfly mit dabei und auch im IE8 kann man mit F12 Entwicklertools nutzen, also Eigenschaften gezeilt an- und ausschalten. Manchmal helfen auch simple Rahmen um das Objekt, sodass man sehen kann, welchen Raum es einnimmt.

Matthias

[eisn]

und dann kümmere dich um die Zentrierung aller Elemente, dann wird dir sicher was einfallen, was auch der Liste hilft.

YAY :)
einfach eine tabelle gebaut mit 3 spalten und der gesamtbreite von 100% und der mittleren spalte (mit der leiste als inhalt) eine breite von 900px zugewiesen und fertig :)

ich meld mich wenn ich auf das nächste problem stosse, danke soweit erstmal.

mfg
eisn

[apsel]

Om nah hoo pez nyeetz, eisn!

und dann kümmere dich um die Zentrierung aller Elemente, dann wird dir sicher was einfallen, was auch der Liste hilft.

YAY :) einfach eine tabelle gebaut mit 3 spalten und der gesamtbreite von 100% und der mittleren spalte (mit der leiste als inhalt) eine breite von 900px zugewiesen und fertig :)

Damit hast du die denkbar schlechteste Lösung gewählt, die du hättest wählen können, Tabellen dienen der Aufnahme tabellelarischer Daten und nicht der Gestaltung.

Was mich daran an meisten ärgert, ist, dass auch eine Vielzahl von CMS auf Tabellenlayout setzt. Deshalb habe ich z.B. den WebsiteBaker gleich wieder vor die Tür gesetzt.

Matthias

[eisn]

Damit hast du die denkbar schlechteste Lösung gewählt, die du hättest wählen können...

hi matthias,

hätte ich andere lösungen parat gehabt, hätte ich hier nicht nachgefragt - die tabellenlösung wollte ich anfangs auch nicht wählen, allerdings funktioniert eine zentrierung bei dieser liste auch durch margin-left/-right:auto nicht, center ebenfalls nicht...

es klappt, also passts :)

mfg
eisn

[at]

Hallo.

einfach eine tabelle gebaut mit 3 spalten und der gesamtbreite von 100% und der mittleren spalte (mit der leiste als inhalt) eine breite von 900px zugewiesen und fertig :)

ich meld mich wenn ich auf das nächste problem stosse

Das bist du offenbar bereits.
MfG, at