CSS Problem

[Tronjer]

Hallo, ich habe zur Abwechslung auch mal ein CSS Problem. ;)

Die Seite hat zwei Elemente:
Eine einfache Dropdown Navi, deren Untermenüpunkte per visibility: hidden/visible aus- und eingeblendet werden. display: block/none kommt nicht in Frage, weil das den Seitencontent nach unten verschieben würde

Unterhalb der Navi befindet sich ein Div-Container mit etwas Text. Diesen Container will ich direkt unter die Navi rücken, und zwar ohne position: relative einzusetzen, sondern nur mit einem negativen margin. Das scheint aber tricky zu sein, eventuell ein collapsing margin Problem?

Hier der Link zur Seite:

 

[djheke]

Also, wenn du auf visibility verzichten kannst und mit position:absolute arbeitest, dann funktionieren die folgenden Änderungen:

  div {
  width: 300px;
  background-color: #ddd;
  clear: both;
  color: red;
  margin-top: -150px;
  }
  /* Zuerst die Listenformatierung aufheben */
  nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  /* Anschließend alle Listenelemente links nebeneinander anordnen */
  nav ul li {
  display: block;
  float: left;
  width: 120px;
  position:relative;  /* geändert*/
  }
  /* Die Linkformatierung entfernen */
  nav ul li a {
  text-decoration: none;
  color: black;
  }
  /* Danach das Submenü im Normalzustand unsichtbar stellen */
  nav ul li ul {
  position:absolute;  /* geändert*/
  left:-9999em;  /* geändert*/
  }
  /* Die dritte Ebene einrücken */
  nav ul li ul li ul {
  margin-left: 120px;

  }
  /* ... und beim Hovern wieder sichtbar machen */
  nav ul li:hover > ul {
  left:auto;  /* geändert*/
  top:auto;  /* geändert*/
  }

nav ul ul li:hover > ul { top:0;}  /* NEU */


  /* Zum Schluß die Listenelemente des Submenüs untereinander anordnen */
  nav ul li ul li {
  clear: both;
  }

 

[Tronjer]

Danke dir, djheke. Die Navigation benötigt zwar ohnehin noch einen Wert für z-index und damit ein position: relative, wenn die Hover-Elemente über dem nachfolgenden Div liegen sollen, aber ich wollte das Div selber lediglich per margin bewegen. Genaugenommen ist das Attribut position für mich immer nur ein letzter Rettungsanker, sofern alles andere nicht klappt.

Die Frage ist, warum funktioniert in diesem Kontext kein negatives margin für den unteren Div-Container?

 

[djheke]

Cler.both stört dabei. Hier eine neuer Versuch mit visibility

  div {
  width: 300px;
  float:left;
  background-color: #ddd;
  color: red;
  margin-top: 20px;
  margin-left:-300px;
  }
  /* Zuerst die Listenformatierung aufheben */
  nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 300px;
  float:left;
  position:relative;
  z-index:99;
  }
  /* Anschließend alle Listenelemente links nebeneinander anordnen */
  nav ul li {
  display: block;
  float: left;
  width: 120px;
  }
  /* Die Linkformatierung entfernen */
  nav ul li a {
  text-decoration: none;
  color: black;
  }
  /* Danach das Submenü im Normalzustand unsichtbar stellen */
  nav ul li ul {
  visibility:hidden;
  }
  /* Die dritte Ebene einrücken */
  nav ul li ul li ul {
  margin-left: 120px;
  margin-top:-1em;
  background:#eee;
  width:120px;
  }
  /* ... und beim Hovern wieder sichtbar machen */
  nav ul li:hover > ul {
  visibility: visible;
  }
  /* Zum Schluß die Listenelemente des Submenüs untereinander anordnen */
  nav ul li ul li {
  clear: both;
  }

Funktioniert zumindestens im FF

 

[scbawik]

Danke dir, djheke. Die Navigation benötigt zwar ohnehin noch einen Wert für z-index und damit ein position: relative, wenn die Hover-Elemente über dem nachfolgenden Div liegen sollen, aber ich wollte das Div selber lediglich per margin bewegen. Genaugenommen ist das Attribut position für mich immer nur ein letzter Rettungsanker, sofern alles andere nicht klappt.

Die Frage ist, warum funktioniert in diesem Kontext kein negatives margin für den unteren Div-Container?

Wie wärs damit?

nav ul:after {
  content:" ";
  clear:both;
  display:block;
}

oder

nav ul {
  overflow:hidden;
}

Weil ul und somit nav keine Höhe haben (fehlendes clear) funktioniert margin nicht. So zumindest meine Spekulationen :)

 

[djheke]

Na, aber visibility reserviert doch den Platz und clear wirkt nicht wie erwartet. Da div die Navi gleich mit einschließt.

 

[Tronjer]

Danke euch beiden. Der clear war schon richtig, obwohl ich das jetzt durch einen .clearfix ersetzt habe. Ansonsten lag scbawik sehr dicht an der Lösung. Wobei hier nur die oberste <ul> ein overflow:hidden bekommen darf, sonst wird die Unternavigation auf der zweiten Hierarchiestufe nicht angezeigt:

nav > ul {
  overflow: hidden;
}

Das overflow:hidden verwende ich eher selten, weil es häufig dazu dient, unsauberes Styling glattzubügeln. Aber manchmal scheint es wohl unumgänglich zu sein.