Zurück   Flashforum > Alternative Technologien > HTML und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 20-05-2010, 16:18   #1 (permalink)
Alter User
 
Benutzerbild von Dharokan
 
Registriert seit: Jul 2003
Ort: Dortmund
Beiträge: 808
Bild mit Liste umfließen lassen

Hallo Ihr,

ich habe auf einer Seite links ein Bild im Text, daß vom Text umflossen wird.
float:left - soweit kein Problem.

Nun können im Text aber auch mal Aufzählungslisten vorkommen. Und genau das scheint nicht zu klappen. Ich ersetze die bullets durch eine Hintergrundgrafik. Und im Chrome, sowie Firefox 3.5 bleiben diese bullets jetzt linksbündig hinter der Grafik verborgen. Firefox 2.0 stellt es aber richtig dar

Ich bastel da jetzt schon 'ne Weile rum, finde aber keine Lösung. Kennt jemand von Euch das Phänomen und vielleicht sogar einen Workaround?

Grüße,
Dharokan

PHP-Code:
CSS:

img {
    
floatleft;
    
margin-right1em;
}

ul.bkgbullets li {
    list-
style:        none;
    list-
style-image:     none/* for ie win 5.x */
    
padding:        0 0 0 26px;
    
background:        transparent url(bullet.gifno-repeat 7px .6em;

HTML-Code:
<div class="wrap">
	<img src="test.png" width="150" height="150" alt="Hilfe! Ich werde umflossen!">
	<h1>Liste mit normalen bullets</h1>
	<ul>
		<li>Punkt eins</li>
		<li>Punkt zwei</li>
		<li>Punkt zweieinhalb, der ein bisschen aus der Reihe tanzt, weil er so viel l&auml;nger ist als die anderen</li>
		<li>Punkt drei</li>
		<li>Punkt vier</li>
		<li>Punkt f&uuml;nf</li>
		<li>Punkt sechs</li>
		<li>Punkt sieben</li>
		<li>Punkt. Aus. Ende.</li>
	</ul>
</div>

<div class="wrap">
	<img src="test.png" width="150" height="150" alt="Hilfe! Ich werde umflossen!">
	<h1>Liste mit background-bullets</h1>
	<ul class="bkgbullets">
		<li>Punkt eins</li>
		<li>Punkt zwei</li>
		<li>Punkt zweieinhalb, der ein bisschen aus der Reihe tanzt, weil er so viel l&auml;nger ist als die anderen</li>
		<li>Punkt drei</li>
		<li>Punkt vier</li>
		<li>Punkt f&uuml;nf</li>
		<li>Punkt sechs</li>
		<li>Punkt sieben</li>
		<li>Punkt. Aus. Ende.</li>
	</ul>
</div>
Angehängte Dateien
Dateityp: zip test-floating-ul.zip (17,4 KB, 3x aufgerufen)
__________________
Dharokan
Dharokan ist offline   Mit Zitat antworten
Alt 21-05-2010, 09:32   #2 (permalink)
Designschmied
 
Benutzerbild von kobo1
 
Registriert seit: May 2005
Ort: Stuttgart
Beiträge: 272
Ist ein ganz logisches Verhalten. Wenn du dir kurz Gedanken machst, verstehst du auch warum, denn dein Ansatz ist falsch!
Wenn du ein Background-Image einfügst richtet sich dieses immer links oben innerhalb des Blocks aus. Wenn du einen float hast, fängt der Block des List Items trotzdem am linken Rand des zuletzt mit "position" ausgerichteten Elements an.

Deshalb bringt dies die Lösung:

PHP-Code:
ul.bkgbullets li {
    list-
style-image:     url(bullet.gif);

Warum so kompliziert, wenn das Gute liegt so nah... ;-)
Habs jetzt nur im FF 3.6.3 getestet, sollte aber überall funktionieren.
__________________
  • Zeitreisen werden Grammatik komplizierter gemacht haben: "Der Hund fing den Ball, der geworfen werden wird." (Joscha Sauer)
  • Gerüchten zufolge arbeiten die Beck's Produktentwickler bereits am nächsten Clou: Beck's Zero! Durch das Weglassen unterschiedlicher Herstellungsschritte soll es nicht nur farb-, sondern auch völlig geschmackslos und außerdem frei von Alkohol und Kohlensäure sein. In diesem Sinne: Prost! (Michael Siener)

Geändert von kobo1 (21-05-2010 um 09:33 Uhr)
kobo1 ist offline   Mit Zitat antworten
Alt 21-05-2010, 09:58   #3 (permalink)
Alter User
 
Benutzerbild von Dharokan
 
Registriert seit: Jul 2003
Ort: Dortmund
Beiträge: 808
Zitat:
Zitat von kobo1 Beitrag anzeigen
Ist ein ganz logisches Verhalten. Wenn du dir kurz Gedanken machst, verstehst du auch warum, denn dein Ansatz ist falsch!
Wenn du ein Background-Image einfügst richtet sich dieses immer links oben innerhalb des Blocks aus. Wenn du einen float hast, fängt der Block des List Items trotzdem am linken Rand des zuletzt mit "position" ausgerichteten Elements an.
Jau! Stimmt ja.
Hatte mir das früher so angehöhnt, weil es für horizontale Navileisten der beste Weg war und (damals) die Browser das wie gewünscht interpretierten. Und wie das nunmal mit Gewohnheiten ist, da waren die Scheuklappen mal wieder viel zu robust.

Danke für Deine Augen-öffnende Antwort. Werde ich später oder am Wochenende direkt mal näher ausprobieren.

Grüße,
Dharo
__________________
Dharokan
Dharokan ist offline   Mit Zitat antworten
Antwort

Lesezeichen

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 sind an
Pingbacks sind an
Refbacks sind an


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bild mit Text umfließen? - Geht das?! Mirco_XP Flash Einsteiger 2 09-01-2008 07:44
bei dyn. geladenem bild&text umfließen verhindern o-stimpson Flash 8 4 30-06-2007 16:31
Bild von Text umfließen lassen cyberdodel Flash 8 1 06-02-2006 06:08
bild mit text umfließen lassen fabbsen Flash MX 0 24-06-2004 15:08
Text im Htmltextfeld soll Bild nicht umfließen Fiveop ActionScript 1 1 05-04-2004 22:39


Alle Zeitangaben in WEZ +1. Es ist jetzt 19:50 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele