zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit CSS Ausklappmenü: Im Untermenü wird der Platz nicht genutzt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.09.2006, 02:53
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Frage Problem mit CSS Ausklappmenü: Im Untermenü wird der Platz nicht genutzt

Hallo,
ich habe da ein kleines Problem bei der Erstellung eines CSS basierten Aufklappmenüs.
Wenn man den Code (siehe unten) im Firefox oder Opera betrachtet (woanders habe ich es nicht getestet und das Problem besteht in beiden Browsern), dann stellt man fest das in dem aufgeklappten Menü, der Platz nicht vollständig genutzt wird, dazu kommt das der Inhalt scheinbar rechtsbündig angezeigt wird (daran ändert auch ein text-align:left nichts).
Wenn ich den Inhalt über relative Positionierung nach links verschiebe, habe ich den ungenutzten Raum nur rechts. Das merkwürdige ist, das dieses Problem scheinbar mit der Angabe: position:relative im übergeordneten li Tag, zusammenhängt, wenn ich den Wert auf position:absolute ändere, dann wird zumindest der aufgeklappte Block korrekt dargestellt, wenn man davon absieht das, dass Haupsmenü dann vollkommen zusammenbricht.
Das Problem dabei sind 3 Sachen:
1. Muss das, dem Untermenü übergeordnete, Element (li) eine position Angabe, verschieden von static, besitzen, da sonnst die absolute Positionierung des Untermenüblocks auf den Body bezogen wird.
2. Kann ich für das Haupt li keine absolute Positionierung verwenden, da in meinem Hauptdesign, die Menüpunkte stark unterschiedliche Breite besitzen und damit kein Menü aufbau berechnet werden kann. Wenn ich die breiten der Hauptmenüpunkte festlegen würde könnte ich zwar das Menü konstruieren allerdings würde ich dann die Barrierefreiheit aufgeben, da die Haupt li Elemente dann nicht mehr mit den, möglicherweise von User vergrößerten, Schriftarten mitwachsen.
3. wird in allen Beispielen die ich im Internet gefunden habe, für das übergeordnete li Tag, die relative Positionierung verwendet
Code:
<html>
	<head>
		<style type="text/css">
			<!--
				ul.menu {margin:0px;padding:0px;background-color:red}
				ul.menu li {float:left;list-style:none;position:relative;}
				ul.menu li ul {display:none; background-color:green;position:absolute;top:25px;}
				ul.menu li:hover ul {display:block}
				ul.menu li ul li {list-style:none;background-color:orange;display:block}
			-->
		</style>
	</head>
	<body>
		<div>
			<ul class="menu">
				<li>Eintrag 1</li>
				<li>
					Eintrag 2
					<ul>
						<li>Eintrag 2.1</li>
						<li>Eintrag 2.2</li>
					</ul>
				</li>
				<li>Eintrag 3</li>
			</ul>
		</div>
	</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.09.2006, 18:38
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard

Wurde jetzt bisher einfach nur keine Lösung gefunden oder ist das Thema zu uninterresant?
Zumindest scheint es sich um ein systematisches Problem zu handelt, denn sowohl der Firefox als auch der Opera stellen das Menü gleich dar.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.09.2006, 17:12
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard

Um den Zugang zu dem Problem mal etwas zu erleichtern, habe ich den Code jetzt auf einen Webspace geladen, wo sich das Problem sehr deutlich zeigt.
Wie gesagt der grüne bereich sollte eigentlich nicht zu sehen sein, den Dabei handelt es sich um den ul Container welcher das Untermenü darstellt. der Orange Bereich sind die li Elemente, und diese sollten eigentlich den gesammten ul Container ausnutzen und eigentlich auch linksbündig beginnen.
Ich vermute das sie schon den ganzen bereich nutzen aber leider zu weit rechts beginnen.
Also ist fängt entweder der ul Container zu weit links an und die li-Tags sind korrekt oder umgekehrt.
Hier ist die Testseite
http://test.posthuman.de/test2.html
Mit Zitat antworten
  #4 (permalink)  
Alt 20.09.2006, 18:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Du hast die Default-Randabstände nicht auf Null gesetzt.
Leite dein Stylesheet mit * {margin:0; padding:0;} ein.

Außerdem fehlt eine Doctype-Angabe.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.09.2006, 18:46
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard

Ich glaubs nicht, das wars tatsächlich.
Und welche Werte waren jetzt explizit nicht auf 0 gesetzt?
Also welche Werte haben dies Bewirkt?
Ich frage nur weil ich in meinem Hauptdisign, zumindest immer den div, span, p, img und dem body tags margin und padding 0 zuweise.
Mit Zitat antworten
  #6 (permalink)  
Alt 20.09.2006, 20:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Listen haben in allen Browsern unterschiedliche Default-Ränder. Diese hattest du nicht auf Null gesetzt (deine Angabe galt nur für ein einziges ul-Element deines Codes, das erste)
Mit Zitat antworten
  #7 (permalink)  
Alt 20.09.2006, 23:45
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard

Aja die Listen, hätte ich mir denken können.
Danke für die Antwort, das Problem hat mich schon zeit Wochen beschäftigt.
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 Browserweiche IE CSS 00001 CSS 5 24.09.2010 11:23
Problem mit CSS relative, absolute & float FrageHabe CSS 3 13.08.2010 15:40
Css und Steam Problem justinlenz Offtopic 3 27.03.2008 22:58
Problem mit Layout- Totaler CSS Noob meici CSS 3 01.03.2008 17:33
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04


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