Html Navigation mit Listen und CSS (Problem mit margin-top)

[Johannes]

hi,

hab mir eine html navigation mit Listen und JavaScript gebastelt:
-Menüpunkte untereinander
-bei klick auf menüpunkt öffnen sich andere untermenüpunkte unter dem main-menüpunkt und die anderen main-menüpunkte gehen(sollen) logischerweise sich nach unten verschieben.

Soweit so Gut
Jetzt habe ich die einzelnen buttons mit CSS-Stylesheets ausgerichtet (margin)...das klappt auch alles wunderbar so lang die Untermenüpunkte geschlossen sind.
Sobald ich jetzt auf ein Main-Menüpunkt klicke und sich die dazugehörigen untermenüpunkte drunter ausfahren...sind die anderen Mainmenüpunkte die unter dem geklickten mainmenüpunkt stehen total verschoben (zu weit unten / zu weit oben)

ich nehme an das das an dem margin-top liegt der sich ja immer an dem ElternObjekt richtet...und bei ausfahren der untermenüs ändert sich ja das elternObjekt

Kennt jemand das Problem ???
bin für jeden tipp dankbar

hier noch ein auszug aus meinem Quelltext wie ich das ganze aufgebaut habe:

<!-- Main-Menüpunkt
        ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<a href="untermenue.php" onclick="javascript:switchlayer('Stau1');
  return false;">
   <img src="D:\buttons\button_hellgrün_pfeil.gif"border="0"                style="margin-top:-78px;"
   id="roll3"
  onmouseover="rollover('roll3')"
  onmouseout="rollout('roll3')" >
     <div style="position:relative; top:-83px;  left:27px;">
              <span onmouseover="rollover('roll3')" onmouseout="rollout('roll3')" style="text-decoration:none; color:black; font-family:Verdana; font-size:11px;">Stau 1</span>
    </div></a> <br>

<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<!--2 Untermenüpunkte----------------------------------------------------------------------------------------------------------------------------------------------------------------->
        <dl id="Stau1" style="display:none;">
        <a href="untermenue.php"><img src="D:\buttons\button_weiss.gif" border="0" style="margin-top:-80px; margin-left:-40px;"
          id="roll6"
          onmouseover="rollover('roll6')"
          onmouseout="rollout('roll6')">
            <div style="position:relative; top:-121px; left:-2px;">
                             <span onmouseover="rollover('roll6')" onmouseout="rollout('roll6')" style="text-decoration:none; color:black; font-family:Verdana; font-size:11px;">Staumeldung</span>
                   </div></a> <br>

<a href="untermenue.php"><img src="D:\buttons\button_weiss.gif" border="0" style="margin-top:-110px; margin-left:-40px;"
          id="roll7"
          onmouseover="rollover('roll7')"
          onmouseout="rollout('roll7')">
            <div style="position:relative; top:-159px; left:-2px;">
                             <span onmouseover="rollover('roll7')" onmouseout="rollout('roll7')" style="text-decoration:none; color:black; font-family:Verdana; font-size:11px;">Staumeldung</span>
                   </div></a> <br> </dl>
                            <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<!--2. Mainmenüpunkt (der sich beim öffnen der beiden oberen untermenüpunkte verschiebt (also nicht direkt unter den beiden untermenüs steht)------------------------------------------------------------->
        <a href="untermenue.php" onclick="javascript:switchlayer('Verkehrslage');
  return false;"><img src="D:\buttons\button_hellgrün_pfeil.gif" border="0" style="margin-top:-116px;"
   id="roll4"
  onmouseover="rollover('roll4')"
  onmouseout="rollout('roll4')" >
    <div style="position:relative; top:-121px; left:27px;">
              <span onmouseover="rollover('roll4')" onmouseout="rollout('roll4')" style="text-decoration:none; color:black; font-family:Verdana; font-size:11px;">Stau 2</span>
    </div></a> <br>
 <"------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------>

Kopiert euch den quelltext ambesten in ne Textdatei...kann ja kein mensch lesen so wie der hier drin steht...;)

Vielen Danke für jede bemühung!!!

Gruß
Johannes

[Thomas Luethi]

Hallo,

Ich habe keine Lust, mich durch diese JavaScript-Quellcode-Wueste
hindurchzuarbeiten...

Versuch doch mal als erstes, eine normale Liste in
statischem HTML mit CSS so zu gestalten, wie Du
sie haben moechtest.

Die Formatierung von Listen (UL, OL, wohl auch DL)
ist leider nicht ganz einfach.
Die Browser haben ihre eigenen Ideen.
Insbesondere will der MS IE bei UL oft, dass das LI-Element
einen Border (ich glaube, border-top reicht) von
mindestens 1px hat, wenn die LI-Elemente vertikal nahtlos
aneinander grenzen sollen. Diesen Border kann man natuerlich
auch in der Hintergrundfarbe machen, hauptsache, er ist da.

Weitere Ideen zur Listen-Formatierung mit CSS:
http://www.subotnik.net/style/list-box-test.html
http://devedge.netscape.com/viewsource/2002/list-indent/
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listamatic/

HTH, mfg
Thomas

P.S. Eine Online-Seite zusaetzlich zum Quelltext
waere sehr hilfreich, um helfen zu koennen...

[Cyx23]

Hallo,

Insbesondere will der MS IE

dazu noch ein Beispiel zu Listen, Abständen und float als Korrektur für den IE: http://www.lipfert-malik.de/webdesign/tutorial/bsp/listenCSSmenu.html

Grüsse

Cyx23

[molily]

Hallo,

Insbesondere will der MS IE

dazu noch ein Beispiel zu Listen, Abständen und float als Korrektur für den IE: http://www.lipfert-malik.de/webdesign/tutorial/bsp/listenCSSmenu.html

Was wird da überhaupt für welchen IE korrigiert? Ich sehe keine gravierenden Unterschiede ohne die Korrektur, nur eben die Zeilenhöhe, aber dafür würde im 6.0 line-height ausreichen (?). margin:0; padding:0; für ul und li sollten m.W. nicht nötig sind, es sollte i.d.R. ausreichen:

ul {margin:0; padding-left:0;}
li {margin-top:0; margin-bottom:0; text-align:center;}

Dabei sind nur die margins für li für Opera (unter Version 7).

Ob das auch für MSIE 5.x und KHTML reicht, weiß ich nicht.
Wieso sollte hier denn mit padding anstatt text-align gearbeitet werden, oder war das keine Absicht?

Mathias

[Cyx23]

Hallo Mathias,

Was wird da überhaupt für welchen IE korrigiert? Ich sehe keine gravierenden Unterschiede ohne die Korrektur, nur eben die Zeilenhöhe, aber dafür würde im 6.0 line-height ausreichen (?).

per float scheint mir der Fehler (Zeilenhöhe) ursächlicher korrigiert zu werden als beim m.E. eher symptomatischen line-height, aber wenn line-height eine Alternative oder gar zuverlässiger ist warum nicht (!).
Float hatte aber bei meinen Tests auch Vorteile wenn Bilder mit Text gemischt waren, da war wenn ich es recht erinnere mit line-height bei der Testdatei keine geeignete Korrektur möglich.

margin:0; padding:0; für ul und li sollten m.W. nicht nötig sind, es sollte i.d.R. ausreichen:

Hier war die Strategie erstmal klarere Verhältnisse zu schaffen, deshalb li, ul  {margin:0; padding:0;}, und dann anpassen.

Wieso sollte hier denn mit padding anstatt text-align gearbeitet werden, oder war das keine Absicht?

Bei dem Beispiel sollte kein center simuliert werden, sondern ein Einzug der Unterpunkte ist per padding dargestellt.

Eine Umsetzung der Breite z.B. beim a:hover des IE als Button war übrigens auch erstmal nicht so wichtig, es ging besonders um das ähnliche Layout für neuere Browser und Netscape 4 (volle Breite beim a:hover wäre aber vielleicht doch für die Liebhaber von Schaltflächen interessant); für die IE kleiner 6 könnte (oder sollte) auch noch etwas nachgebessert werden, zumal der IE 6 wohl beim betr. Beispiel CSS-kompatibel rendert.

Grüsse

Cyx23

[MudGuard]

Hi,

<a href="untermenue.php" onclick="javascript:switchlayer('Stau1');
  return false;">
   <img src="D:\buttons\button_hellgrün_pfeil.gif"border="0"                style="margin-top:-78px;"
   id="roll3"
  onmouseover="rollover('roll3')"
  onmouseout="rollout('roll3')" >
     <div style="position:relative; top:-83px;  left:27px;">

div ist in a überhaupt nicht erlaubt. Wenn sich aus fehlerhaftem Code Darstellungsfehler ergeben, würde ich erstmal den Grund-Fehler beseitigen...

cu,
Andreas