zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdown Menue wird durch Untermenue gestreckt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.08.2008, 20:39
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.12.2006
Beiträge: 678
Schelm.isch wird schon bald berühmt werden
Standard Dropdown Menue wird durch Untermenue gestreckt

Schönen guten Abend.

Ich bin gestern aus zufällig auf dieses Menue Drop Down Menus || CSS Menu Builder gestoßen.
Bisher war ich immer mit statischen Menues ausgekommen, aber warum nicht mal etwas neues probieren?

Aber da ich meine Seite selbst schreiben will, habe ich mich heute hingesetzt und versucht das oben verlinkte Menue zu verstehen und soweit ist das nicht sonderlich schwer. Bin ich doch zu einer abgespeckten Version gekommen, die als vertikales Menue super funktionieren würde. Leider jedoch nicht als horizontales Menue, da bei Aufklappen des Submenues das beinhaltende Listenfeld die Breite annimmt. Wie kann ich das vermeiden?

Ich bin quasi im Urlaub und habe hier weder Bücher noch Webspace, deshalb poste ich einfach nur den Code, den ich mir heute überlegt habe.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="formate.css">
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<title></title>
</head>
<body>
<div class="nav">
  <ul>
    <li>
	  <a href="#">A</a>
	</li>
    <li>
	  <a href="#">B</a>
	  <div class="sub">
	    <ul>
	      <li>
		    <a href="#">Test</a>
		  </li>
	      <li>
		    <a href="#">Test2</a>
		  </li>
	      <li>
		    <a href="#">Test3</a>
		  </li>
	    </ul>
	  </div>
	</li>
    <li>
	  <a href="#">C</a>
	  <div class="sub">
	    <ul>
	      <li>
		    <a href="#">Test</a>
		  </li>
	      <li>
		    <a href="#">Test2</a>
		  </li>
	      <li>
		    <a href="#">Test3</a>
		  </li>
	    </ul>
	  </div>
	</li>
    <li>
	  <a href="#">D</a>
	</li>
    <li>
	  <a href="#">E</a>
	  <div class="sub">
	    <ul>
	      <li>
		    <a href="#">Test</a>
		  </li>
	      <li>
		    <a href="#">Test2</a>
		  </li>
	      <li>
		    <a href="#">Test3</a>
		  </li>
	    </ul>
	  </div>
	</li>
  </ul>
</div>
</body>
</html>
Code:
* {
  margin: 0;
  padding: 0;
}

.nav {
  background: #aaa;
  width: 750px;
}

.nav ul {
  width: 100%;
  background: #fff;
}

.nav ul li a, .sub ul li a{
  display: block;
  background: red;
  text-decoration: none;
}

.nav ul li {
  padding-left: 10px;
  padding-right: 10px;
  background: lime;
  overflow: hidden;
  float: left;
  z-index: 1;
}

.sub ul {
  float: left;
  width: 150px;
  display: block;
}

.sub ul li {
padding: 0;
margin: 0;
  width: 150px;
  background: yellow;
  overflow: hidden;
  display: block;
}

.nav ul li, .sub ul li {
  list-style: none inside;
}

.sub ul {
  display: none;
}

.nav ul li:hover .sub ul {
  display: block;
}
Ich hab mittels Farben versucht, mir das Problem zu verdeutlichen. Aber leider kann ich es nicht lösen. Hätte da jemand einen guten Tipp für mich?
Ich vermute mal, dass es an der Positionierung / dem teilweisen Floaten liegt...

Danke und einen schönen Abend noch.

Schelm.isch
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.08.2008, 20:50
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Das Submenü ist Kind des Menüs, und es hat eine Breite, und du lässt es mit display:none -> block einblenden. Daher muss das elterliche Menü aufgedrückt werden: hier enthält ein Float ein Float.

Überleg mal weiter: Was passiert, wenn diesem Menü Inhalt folgt? Und wie kannst du das dann sichtbare Problem vermeiden?
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (31.08.2008 um 20:52 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.08.2008, 21:18
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.12.2006
Beiträge: 678
Schelm.isch wird schon bald berühmt werden
Standard

Hrm, es wäre schön, wenn man das unabhängig koppeln könnte. Ich hatte schon geschaut, aber z-Index ist wirklich nur zur Angabe von Reihenfolgen da. Der Zusammenhang einzelner Objekte bleibt leider erhalten.

Was meinst du mit nachfolgendem Inhalt? Normalweise würde ich das Menue als ganzes in einen Wrapper stecken und dann nachfolgende Inhalte darunter setzen.

Vielleicht muss ich nochmal Floats neu nachlesen. CSS liegt bei mir schon etwas zurück, dazu hab ich im Moment wenig Zeit und ich mache das eh nur als Hobby.

Aber zur Größendefinition. Das Blockattribut habe ich erstmal rausgeworfen, das hat nicht wirklich etwas verändert. Aber auf die Größenangabe kann ich doch nicht verzichten, wenn ich später Grafiken als Hintergründe einbinden will. Oder verzettel ich mich da in der Logik von CSS?
Mit Zitat antworten
  #4 (permalink)  
Alt 31.08.2008, 23:13
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Mit nachfolgendem Inhalt meine ich z.B. ein <p>Lorem ipsum ...</p>. Steht dieses nach dem Menü, wird der Zeileninhalt zur Seite geschoben, wenn das Submenü ausklappt. Und richtig so: es ist ja ein Float, nachfolgende Boxen sehen es nicht, doch die Zeilenboxen machen Platz. Jedesmal also, wenn das Float-Submenü ausklappt, würde sich der nachfolgende Inhalt auf der Seite verschieben.

Die meisten Nutzer fänden dieses Verhalten ungewöhnlich.

"unabhängig koppeln" ist ein paradoxer Begriff. Wie wärs mit "komplett aus dem Fluss nehmen"? Das wäre eine Box, die absolut positioniert ist. Und nur dann, wenn eine Box positioniert ist, greift z-index.

Der Block, der dann absolut positioniert ist, benötigt die Größendefinition wie das Float. Aber das kratzt kein anderes Element auf der Seite; denn es ist aus dem Fluss der Seite entfernt.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 31.08.2008, 23:31
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.12.2006
Beiträge: 678
Schelm.isch wird schon bald berühmt werden
Standard

Prima, vielen Dank dir!

Manchmal macht man sichs selbst aber auch extra schwer. Habs nun mittels absoluter Position festgemacht und es läuft.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit einer DropDown Liste manuel_g CSS 2 31.03.2010 11:11
Zwei DropDown Navigationen verschmelzen Drian Offtopic 1 13.02.2010 15:00
DropDown Menü verschwindet andre-ne CSS 2 18.11.2009 11:44
DropDown CSS/JS Mix, Kleine Frage pkipper CSS 0 01.10.2008 11:23
Suche CSS Dropdown Menü Lloyd Larkin CSS 0 11.10.2006 21:50


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:42 Uhr.