XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Floatende Liste mit absoluten Elementen (http://xhtmlforum.de/showthread.php?t=53773)

-Oliver- 24.09.2008 18:19

[solved] Floatende Liste mit absoluten Elementen
 
Liste der Anhänge anzeigen (Anzahl: 1)
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

hubspe 24.09.2008 18:27

Hi,

gib ul position:relative.
Nimm bei li position:relative; und z-index:5; weg.
Nimm bei li div z-index:10; und right:-10px; weg.

Nun kannst du dein div mit top/left positionieren. ;)

Boris 24.09.2008 18:35

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 ;)

-Oliver- 25.09.2008 11:33

Liste der Anhänge anzeigen (Anzahl: 1)
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

heiko_rs 25.09.2008 11:51

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!

-Oliver- 26.09.2008 12:24

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:55 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023