Reihenfolge bei Überlappung

[Julius]

Hallo miteinander,

ich will einer von mir betriebenen Website (http://sf.gidoo.de) ein neues Lay-out (http://sf.gidoo.de/test) verpassen, habe jedoch noch ein Problem, das außerhalb der Grenzen meines Lateins liegt.

Ich habe Navigationsspalte, deren reduzierter Code wie folgt ausschaut:
<div id="nav"><ul>
  <li><div>Grammatik</div><ul>
    <li><a href="...">Adjektiv</a><ul>
       <li><a href="...">feminine Form</a></li>
       <li><a href="...">Stellung</a></li>
    </ul></li>
  </ul></li>
</ul></div>

Die Untermenüpunkte »feminine Form« und »Stellung« werden rechts des nächst höheren Menüpunktes (»Adjektiv«) angezeigt, sofern sich über diesem die Maus befindet (hover-Effekt).
Die Position der Untermenüpunkte ist - gesehen vom Menüpunkt Adjektiv - um einen Pixel nach links verschoben. Nun möchte ich, dass an der Stelle, wo sich der Menüpunktverweis (a ist hier display:block) und die Untermenüpunkte überlappen, der Rand um das Untermenü nicht angezeigt wird.

Mein Problem sei anhand der folgende Grafik verdeutlicht:

(Die orange Kreise dienen zur Hervorhebung.)

Z-index führte nicht zum gewünschten Erfolg und ich bin momentan etwas ratlos. Ich hoffe, jemand von euch hat eine Idee.

Grüße
Julius

[Hopsel]

Hi Julius!

Ich hoffe, jemand von euch hat eine Idee.

border-left: none; ?

MfG Hopsel

[Julius]

Hallo Hopsel,

border-left:none eliminierte den gesamten linken Rahmen. Er soll aber nur bei der Überscheidung nicht zu sehen sein.

Grüße
Julius

[Hopsel]

Hi Julius!

border-left:none eliminierte den gesamten linken Rahmen.

Worauf hast du denn diese Eigenschaft angewendet?

Er soll aber nur bei der Überscheidung nicht zu sehen sein.

Dann mach es doch so, dass er nur bei der Überschneidung nicht zu sehen ist.

Ich kann dir nicht ganz folgen...

MfG Hopsel

[Julius]

Hallo Hopsel,

Dann mach es doch so, dass er nur bei der Überschneidung nicht zu sehen ist.

Das ist ja mein Problem, dass ich das nicht hinbekomme. z-index zeigt keine Wirkung.

Grüße
Julius

[Hopsel]

Hi Hopsel!

Ich kann dir nicht ganz folgen...

Okay, ich glaube, ich weiß, was du meinst.

Füge bei #nav ul li li:hover ul ein border-left: none; hinzu.

MfG Hopsel

[Ingo Turski]

Hi,

Füge bei #nav ul li li:hover ul ein border-left: none; hinzu.

wie soll denn das helfen? Das schaltet doch auch für alle Unterpunkte den border ab.
Nein, das ist schon etwas komplizierter und ginge (jedenfalls im Firefox) z.B. so:

  
#nav ul ul ul>li:first-child {    /* nur für den ersten Untermenüpunkt */  
  border-left: 1px solid #f0f4f8; /* border in Hintergrundfarbe definieren */  
  margin-left:-1px;               /* und über den border der ul legen */  
  padding-bottom:4px;             /* sowie auf die ganze Höhe bringen */  
}  
#nav ul ul ul li:first-child+li { /* beim nächsten Listenpunkt */  
  margin-top:-4px;                /* den Abstand wieder reduzieren */  
}  

Für den IE bräuchte man zur Selektion natürlich Klassen.

freundliche Grüße
Ingo

[Hopsel]

Hi Ingo!

Füge bei #nav ul li li:hover ul ein border-left: none; hinzu.
wie soll denn das helfen? Das schaltet doch auch für alle Unterpunkte den border ab.

Ich will ja nicht trotzig erscheinen, aber welche Unterpunkte meinst du?

MfG Hopsel

[Ingo Turski]

Hi,

Ich will ja nicht trotzig erscheinen, aber welche Unterpunkte meinst du?

na die li der Subnavigation. Schau' Dir doch die Grafik an, wie es aussehen soll. Es geht nicht darum, den linken Border der ul zu entfernen, sondern nur teilweise dort, wo er an den dazugehörigen Listenpunkt der Hauptnavigation angrenzt - also noch nicht mal nur für das erste li der Subnavigation (dann könnte man border für die lis definieren).

freundliche Grüße
Ingo

[Hopsel]

Hi Ingo!

Oh! :)

Mein Fehler. Wieso funktioniert dieser z-index nicht?

MfG Hopsel

[Ingo Turski]

Hi,

Wieso funktioniert dieser z-index nicht?

der funktioniert schon - nur würde dann die gesamte ul und damit auch der ganze border verdeckt werden.

freundliche Grüße
Ingo

[Julius]

Hallo Ingo,

im Stylesheet http://sf.gidoo.de/test/screen.css habe ich Folgendes stehen:
#nav ul li li:hover a {background-color:#F0F4F8; z-index:2;}
#nav ul li li:hover ul  {display:block; position:absolute; width:175px; left:174px; top:-1px; background-color:#F0F4F8; z-index:1; border:1px #888888 dotted;}

Da a als display:block definiert ist, müsste doch a vor (/über) ul angezeigt werden, oder?

Grüße
Julius

[Ingo Turski]

Hi,

Da a als display:block definiert ist

was hat das mit z-index (für positionierte Elemente) zu tun?

freundliche Grüße
Ingo

[Julius]

Heureka!

Vielen Dank für deinen Hinweis mit positioniert.
Ich habe den Verweisen im Menü (Adjektiv) einfach eine Position zugewiesen (position:relative; left:0px; top:0px;) und schon funktioniert es: http://sf.gidoo.de/test/.

Danke nochmal für eure Hilfe und viele Grüße
Julius

[Ingo Turski]

Hi,

Ich habe den Verweisen im Menü (Adjektiv) einfach eine Position zugewiesen (position:relative; left:0px; top:0px;)

position:relative reicht bereits, da diese Werte ohnehin Vorgabe sind.

Übrigens würde ich mal probieren, den xml-Prolog zu entfernen - könnte sein, daß es im IE6 dann deutlich besser aussieht. Und wenn nicht, dann würde ich dem IE über einen CC statt der Grafik http://sf.gidoo.de/test/sf.png eine Grafik mit einem netten Hinweis liefern. ;-)

freundliche Grüße
Ingo

[Julius]

Hallo,

wenn ich den xml-Prolog entferne und über meta den Zeichensatz UTF-8 angebe, sieht es fast perfekt mit IE aus. Um das sf-Logo kümmere ich mich noch.

Grüße

Julius

[MudGuard]

Hi,

Ich habe den Verweisen im Menü (Adjektiv) einfach eine Position zugewiesen (position:relative; left:0px; top:0px;)
position:relative reicht bereits, da diese Werte ohnehin Vorgabe sind.

Wann wurde das geändert?
In CSS 2 (inkl. Errata) und CSS 2.1 ist nicht 0 (oder 0px) die Vorgabe.
CSS 1 kennt Positionierung gar nicht.

Bei CSS 3 fehlt das "Positioning Module" noch.

Woher hast Du die Vorgabe 0px für left und top?

cu,
Andreas

[Orlando]

Hallo Andreas,

(position:relative; left:0px; top:0px;)
position:relative reicht bereits, da diese Werte ohnehin Vorgabe sind.

In CSS 2 (inkl. Errata) und CSS 2.1 ist nicht 0 (oder 0px) die Vorgabe.

Wo siehst du einen Unterschied zwischen „0“ und „auto“?

Grüße
 Roland

[MudGuard]

Hi,

Wo siehst du einen Unterschied zwischen „0“ und „auto“?

Darin, daß auto nicht immer 0 bedeutet.

cu,
Andreas

[Orlando]

Hallo Andreas,

Wo siehst du einen Unterschied zwischen „0“ und „auto“?

Darin, daß auto nicht immer 0 bedeutet.

Wie sieht das bei position:relative aus? Eben.

Grüße
 Roland

[MudGuard]

Hi,

Wo siehst du einen Unterschied zwischen „0“ und „auto“?
Darin, daß auto nicht immer 0 bedeutet.
Wie sieht das bei position:relative aus? Eben.

Ändert das was daran, daß 0 nicht der initial-Wert für left ist?

Abgesehen davon:

<div style="width:200px; height:50px; border:1px solid red;">
  <div style="position:relative; right:-50px; width:20px; height:20px; border:1px solid green; left:0px; "></div>
  <div style="position:relative; right:-50px; width:20px; height:20px; border:1px solid green; left:auto;"></div>
</div>

Die beiden inneren divs unterscheiden sich nur durch left:0px <---> left:auto
Deiner Meinung nach dürfte ja kein Unterschied sein, da left:auto (in Verbindung mit position:relative) identisch sein soll mit left:0.

Ich bekomme in IE, Opera, Geckos und Konqueror (unter Cygwin) aber (wie von mir erwartet) eine unterschiedliche Darstellung der beiden inneren divs.

cu,
Andreas

[Orlando]

Hallo Andreas,

Wo siehst du einen Unterschied zwischen „0“ und „auto“?
Darin, daß auto nicht immer 0 bedeutet.
Wie sieht das bei position:relative aus? Eben.

Ändert das was daran, daß 0 nicht der initial-Wert für left ist?

Das stand nicht zur Diskussion, ein Hinweis auf „auto“ wäre allerdings angebracht gewesen.

<div style="width:200px; height:50px; border:1px solid red;">
  <div style="position:relative; right:-50px; width:20px; height:20px; border:1px solid green; left:0px; "></div>
  <div style="position:relative; right:-50px; width:20px; height:20px; border:1px solid green; left:auto;"></div>
</div>

Deiner Meinung nach dürfte ja kein Unterschied sein, da left:auto (in Verbindung mit position:relative) identisch sein soll mit left:0.

Ohne den Einsatz von right ist es das und um lediglich z-index wirken zu lassen, ist ebendieses nicht notwendig. Grundsätzlich hast du Recht, bei Julius’ Beispiel ist das allerdings irrelevant.

Grüße
 Roland

[Julius]

Hallo Ingo,

dass es beim IE nicht funktioniert, ist nich weiter schlimm, denn mit dem IE sieht die Seite sowieso wie eine Katastrophe aus.

Dein Vorschlag funktioniert gut, aber nur so lange der Menüpunkt "Adverb" nicht länger lautet, deshalb ein Zeilenumbruch stattfindet und die damit die Höhe zunimmt. Aber damit kann man leben.

Vielen Dank.

Grüße
Julius