|
|||
[solved] Floatende Liste mit absoluten Elementen
Hi,
eigentlich dachte ich, meine Idee ist relativ einfach umzusetzen, jedoch habe ich mich geirrt, deshalb bitte ich um eure Hilfe. Ich habe eine Liste mit Elementen (wird gefloatet und hat einen Rahmen) und in diesem Elementen gibt es eine Box, welche über die aktuelle und das nächste Element erscheinen soll. Folgenden Code verwende ich hierfür: HTML-Code:
<html> <head> <style> li{ float:left; list-style:none; border:1px blue solid; padding:15px; position:relative; z-index:5; background-color:yellow; } li div { background-color:red; height:30px; width:30px; position:absolute; z-index:10; right:-10px; } </style> </head> <body> <ul> <li>Menu1<div></div></li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> </ul> </body> </html> Leider erscheint aber die Box UNTER dem nächsten Element (Siehe Screenshot). Habt ihr irgendwelche Tricks auf Lager? Bitte zu beachten, dass der HTML-Code nicht geändert werden kann, bzw. nicht soll. LG & vielen, vielen Dank im Voraus, Oliver Geändert von -Oliver- (26.09.2008 um 12:24 Uhr) Grund: Problem wurde gelöst. |
Sponsored Links |
Sponsored Links |
|
||||
Die Frage ist eher - was soll das werden, bzw. was bezweckst du mit diesem leeren DIV innerhalb von LI? Wie soll das Endergebnis denn aussehen?
Es gibt diverse Methoden etwas umzusetzen, wenn man weiß, wie es aussehen soll
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
Hi,
vielen Dank für euren bisherigen Einsatz. Noch ein paar zusätzliche Informationen: @hubspe: Danke, deine Lösung behebt das Problem, dass das Element unterhalb ist, jedoch kann ich dann nicht mehr das div relative zum li-Element verschieben. :/ @Boris: Also ich muss etwas ausholen, damit ich das Problem exakt beschreibe. Ich habe eine Liste von Seiten, durch welche ich mich durchnavigieren kann. Seite1, Seite2, Seite3, ... (Die Länge dieser Elemente ist flexibel, also je nach Beschreibungstextlänge). Diese Seiten haben einen bestimmten Status. "Bereits besucht", "Aktuelle Seite", "nächste Seite". (Jeder Status hat ein bestimmtes Design, also eine eigene CSS-Klasse) Um den Ablauf von Seite1 - Seite(N) darzustellen, möchte ich ein Pfeil zwischen den Seiten darstellen. Meine Idee: Die Hintergrundfarbe wird durch die CSS-Klasse bestimmt (ohne Pfeil = simple). Dann gibt es ein div-Element mit einem Hintergrundbild, welches nach rechts verschoben wird (15px über den rechten Rand) und somit bereits über den nächsten Element liegt. Da die rechte Seite des Pfeils transparent ist, sollte der Effekt so funktionieren. Im neuen Screenshot habe ich versucht, es darzustellen. Falls etwas unklar ist, dann fragt mich bitte, weil ich denke das Problem ist etwas kompliziert zu beschreiben. Vielen Dank, Oliver |
|
||||
Um das Ganze auch im IE (mit seinem eigenwilligen Stacking Context) zum Laufen zu bekommen, musst Du eh ganz anders vorgehen: Jedes li bekommt eine ID, und dann seinen eigenen z-index, absteigend von links nach rechts (d.h. im Markup von oben nach unten).
In alten Geckos (z.B. NN 7) und Opera 7 wird das Ganze dennoch so nicht laufen, da diese position: relative; bei Floats ignorieren. Falls das wichtig ist, muss die Lösung verändert werden. Und verwende unbedingt einen Doctype!
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) Geändert von heiko_rs (25.09.2008 um 11:58 Uhr) |
|
|||
ES GEHT!!!!
Vielen Dank! Ich bin so froh und happy. Also habe ich wieder was in CSS gelernt! Das wegen Opera 7 ist mir nicht wichtig, weil der Marktanteil schon sooo niedrig ist, dass ich darauf nicht achten muss. Nochmals Danke an alle fürs Helfen!! LG, Oliver |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Firefox 1 und 2 floaten nicht korrekt | Cocoon | CSS | 4 | 16.01.2010 00:11 |
<li> von einer Liste in andere verschieben | tichy | Javascript & Ajax | 5 | 16.07.2009 14:54 |
Horizontale Liste mit breiteren Unterpunkten | Korasu | CSS | 3 | 12.05.2009 10:00 |
Bunte Liste: Code kürzen? | Steakfred | CSS | 2 | 23.01.2008 12:43 |
Liste (inline) Umbruch erzeugen | Steakfred | CSS | 3 | 09.05.2006 13:27 |