zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menu: DropUp statt Dropdown - css 'bottom'

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.11.2010, 09:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2010
Beiträge: 9
Schwammakobf befindet sich auf einem aufstrebenden Ast
Standard Menu: DropUp statt Dropdown - css 'bottom'

Guten Morgen,

ich versuche gerade per css aus einem Dropdown-Menü ein DropUP-Menü zu machen. Das Menü ist eine Liste mit left-gefloateten li's, die teilweise widerum Listen enthalten.

Diese Untermenüs werden per absoluter Position und 'left: -999em;' nach draußen befördert und beim hovern des entsprechenden li's mit 'left: auto;' an die richtige Stelle geschoben...funktioniert - als DropDOWN...

Um die Submenus aber nach oben klappen zu lassen, wollte ich sie mit dem 'bottom'-Befehl positionieren.

Leider richtet sich das Ganze bei position: absolute am unteren Browserrand aus.
Ändere ich bei 'hover' die Position auf relative gibt's gleich 2 Probleme:
1. der angegebene Wert scheint sich nicht mehr auf den unteren (!) Rand zu beziehen (also alle Submenüs - übrigens mit unterschiedlichen Höhen - beginnen oben auf einer Linie).
2. verkackt's mir natürlich das darunter liegende Layout aufgrund von 'position: relative'

Kann mir jemand helfen?
Das Problem scheint simpel - aber irgendwas überseh ich offenbar.

Danke
Schwammakobf
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.11.2010, 09:17
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

wenn du einen Container mit position:absolute hast gib dem übergeordneten Cont. position:relative,
dann orientiert sich das absolute Element bei Positionsangaben daran (und nicht an html).

Ohne Link zum Problem kann man dir aber nicht so gut helfen.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.11.2010, 09:18
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von Schwammakobf Beitrag anzeigen
Kann mir jemand helfen?
Nein, ohne Code kann man dir nicht helfen. Bitte lies die Hinweise für Fragende.
Mit Zitat antworten
  #4 (permalink)  
Alt 17.11.2010, 09:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2010
Beiträge: 9
Schwammakobf befindet sich auf einem aufstrebenden Ast
Standard

Danke schonmal für den Hinweis und sorry, dass ich noch keinen Link bieten kann: die Seite wird noch lokal entwickelt.

Hier die entsprechenden CSS-Schnipsel:
HTML-Code:
#navi li ul{
	position: absolute;
	width: 210px;
	padding-top: 10px;
	background: transparent url("../images/dropdown.png") 0 top no-repeat;
	left: -999em;	
	z-index: 6;
}

#navi li:hover ul{
	left: auto;
	bottom: auto;
	position: relative;
	margin-left: -10px;
}
Ich werd mal versuchen, einen umschließenden Container relativ zu positionieren und dann die Submenüs absolut daran auszurichten.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.11.2010, 09:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2010
Beiträge: 9
Schwammakobf befindet sich auf einem aufstrebenden Ast
Standard

Optimal!!!
Vielen Dank hubspe!

Der funktionierende Code:
Code:
#navi{
	position: relative;
}
#navi li ul{
	position: absolute;
	width: 210px;
	padding-top: 10px;
	background: transparent url("../images/dropdown.png") 0 top no-repeat;
	left: -999em;	
	z-index: 6;
}

#navi li:hover ul{
	left: auto;
	bottom: 30px;
	margin-left: -10px;
}
Nochmal danke für die schnelle Hilfe!
Gruß aus Kötzting nach Passau
Schwammakobf
Mit Zitat antworten
  #6 (permalink)  
Alt 25.11.2010, 15:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2010
Beiträge: 9
Schwammakobf befindet sich auf einem aufstrebenden Ast
Standard

Servus beinander
Jetzt muss ich das Thema doch nochmal aufgreifen...

Das oben erwähnte DropUp funktioniert ja wie bereits erwähnt.
Nur (wie könnte es anders sein) streikt mal wieder der IE...und zwar in der 7er Version:

Das Dropup erscheint wie gewünscht, nur finde ich leider keinen Grund, warum sich die Listen der Submenus am rechten Rand des jeweils (hierarchisch) darüber liegenden Listenelements aufbaut...

css4you schreibt:
Zitat:
left:
Abstand des linken Elementrand vom linken Rand des übergeordneten Elements.
Auch wenn ich den Wert für bottom so weit nach oben setze, dass die Liste definitiv über dem des Elternelements liegt, richtet sich mein Element nicht am linken sondern am Rechten Rand aus.

Im IE8 klappts dann übrigens...
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
CSS Spry Menu Problem mit Hintergrund bei Mouseover myron CSS 9 12.07.2009 14:34
IE7 fixing - expandable menu matsie CSS 6 10.04.2008 16:55
CSS Dropdown menu horizontal...Help please ... Oni CSS 4 09.04.2008 10:48
CSS Hilfe gesucht für Blindenseite johnjdoe CSS 30 17.02.2005 18:14
CSS Dropdown Menu - verschiebung.... pixelcatcher CSS 3 25.12.2004 01:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:01 Uhr.