zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Liste und Bild mit Float: wie?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.06.2009, 10:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2009
Ort: tzifutfiztd
Beiträge: 10
Martu befindet sich auf einem aufstrebenden Ast
Standard Liste und Bild mit Float: wie?



Wie man sieht, kleben die Pfeile (list-style-image) im Bild und beachten den margin vom Bild garnicht. Wie geht das noch zu korrigieren, hat irgendein Spezialist eine Ahnung?

Geändert von Martu (30.06.2009 um 10:43 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.06.2009, 10:46
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Am Besten stellst Du auf list-style:none um und bindest die Listenpunkte per Hintergrundbild für die li's ein.
Da müsstest Du dann aber auch linkes padding mindestens in Bild-Breite vergeben (sollte klar sein ).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.06.2009, 10:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2009
Ort: tzifutfiztd
Beiträge: 10
Martu befindet sich auf einem aufstrebenden Ast
Standard

Wow! Das ist ja mal eine Lösung

Hab garnicht an die Möglichkeit gedacht, ich probier es mal aus und berichte dann
Mit Zitat antworten
  #4 (permalink)  
Alt 30.06.2009, 10:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2009
Ort: tzifutfiztd
Beiträge: 10
Martu befindet sich auf einem aufstrebenden Ast
Standard



Naja jetzt sind keine Symbole am Bild mehr da. Ich frage mich erstaunt wieso

Code:
.staniliste li {margin-left:30px;
margin-top:20px;
list-style:none;
background-image:url(list.gif);
background-repeat:no-repeat;
padding-left:18px;}
Mit Zitat antworten
  #5 (permalink)  
Alt 30.06.2009, 11:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Bin mir zwar nicht sicher, aber vielleicht hilft dir das weiter:
http://xhtmlforum.de/55856-listen-pr...-position.html
Mit Zitat antworten
  #6 (permalink)  
Alt 30.06.2009, 12:51
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

Auf diesem Link wird die ul durch Erzeugen eines neuen Block Formatting Contexts komplett neben das Bild gestellt. Das kann man allerdings auch viel einfacher haben (und vor allem sauberer!), indem man ul einfach margin-left passend zur Breite des Bildes gibt.

In beiden Fällen sieht das Resultat allerdings nicht aus wie auf der Grafik, sondern auch die Punkte unterhalb des Bildes sind genauso weit nach rechts eingerückt wie die neben dem Bild. Für ein Resultat wie auf dem Bild müsste eine andere Lösung her.
__________________
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.)
Mit Zitat antworten
  #7 (permalink)  
Alt 30.06.2009, 12:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2009
Ort: tzifutfiztd
Beiträge: 10
Martu befindet sich auf einem aufstrebenden Ast
Standard

Ja, das habe ich bereits ausprobiert aber es passiert ja das was heiko_rs gesagt hat; es ist plötzlich alles rechts, auch die unteren li's.
Mit Zitat antworten
  #8 (permalink)  
Alt 30.06.2009, 13:40
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

Die Sache mit Floats ist folgende: Nicht die Blockelemente, die einem Float folgen, stellen sich neben diesen, sondern nur ihre Inline-Inhalte (also auch Text). Bei einer Liste ist es genauso: Verhält sich der Browser korrekt, reichen die auf einen Left-Float folgenden li trotzdem bis zum linken Rand, nur ihre Inhalte weichen diesem nach rechts aus. Bei Listen tritt noch der Sonderfall ein, dass das Listensymbol je nach Browser entweder mit dem Inhalt nach rechts "mitgeht" oder nicht.

Sollen nun die li dem Float komplett ausweichen, ist der Ansatz des neuen Block Formatting Contexts schon richtig, und was mir im konkreten Fall spontan einfällt:

Code:
ul {
	list-style: none;
	}

li {
	background: url(symbol.png) no-repeat 0 .5em;
	padding: 0 0 1em 20px;
	overflow: auto;
	display: block; /* Opera 8 */
	}

* html li {
	overflow: visible;
	height: 1px;
	}
Das schiebt die li komplett nach rechts, aber eben nur "bei Bedarf". Alle Geckos, IE ab 5.0, Opera ab 8.0 und Safari machen's anstandslos, nur Opera 7 tanzt aus der Reihe (alle li bleiben links, aber der Text weicht korrekt aus, ist also letztlich kein großes Problem).
__________________
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 (30.06.2009 um 13:43 Uhr)
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
Bilder im div mit float positionieren henmey CSS 4 25.01.2009 02:53
Abstand zwischen Bild und Float-Element pinguino CSS 4 21.08.2008 18:55
verschachtelungsproblem mit float left Holger (HMR) CSS 6 01.09.2005 18:19
Zeilenumbruch bei horizontal nebeneinanderliegenden divs GrafZahl Knowledge Base 10 16.07.2004 17:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:23 Uhr.