zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Floatende Liste mit absoluten Elementen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.09.2008, 18:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.02.2005
Beiträge: 25
-Oliver- befindet sich auf einem aufstrebenden Ast
Standard [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
Angehängte Grafiken
Dateityp: jpg screenshot.jpg (6,8 KB, 9x aufgerufen)

Geändert von -Oliver- (26.09.2008 um 12:24 Uhr) Grund: Problem wurde gelöst.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.09.2008, 18:27
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
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

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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.09.2008, 18:35
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 25.09.2008, 11:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.02.2005
Beiträge: 25
-Oliver- befindet sich auf einem aufstrebenden Ast
Standard

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
Angehängte Grafiken
Dateityp: gif screenshot2.gif (5,1 KB, 12x aufgerufen)
Mit Zitat antworten
  #5 (permalink)  
Alt 25.09.2008, 11:51
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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)
Mit Zitat antworten
  #6 (permalink)  
Alt 26.09.2008, 12:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.02.2005
Beiträge: 25
-Oliver- befindet sich auf einem aufstrebenden Ast
Standard

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


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