Forum für CMS/made simple

amh

Gast

[GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Servus Gurus!

Ich bin nun auch auf ein Problem gestoßen, dass bereits viele vor mir hatten. Leider funktionieren die Lösungen (Link 1, etc.) nicht.

Hier ein Bild, das das Problem verdeutlicht:

CSS Bug on Flickr.

Hat jemand einen Tipp?!

Vielen Dank
Andreas

Beitrag geändert von amh (15. Februar 2011 13:39)

mike-r

arbeitet mit CMS/ms

Registriert: 21. Dezember 2010

Beiträge: 898

Webseite

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Ich kann Dir nicht folgen, wo genau ist Dein Problem?

---

Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

nicmare

Server-Pate

Registriert: 15. Dezember 2010

Beiträge: 1.314

Webseite

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

guck dir die bullets an. dann siehst du das problem. aber diesen sachverhalt hatte ich persönlich auch noch nicht. wieso funzt der workaround nicht??
ich glaube es liegt daran da du keine echten list-styles benutzt sondern nen hintergrundbild. versuchs mal mit list-style-type:square statt hintergrundbild

Beitrag geändert von nicmare (14. Februar 2011 17:45)

---

Meine Projekte:
Dashcam-Test | Babyphone-Testberichte | Türspionkameras

amh

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Problem: Wenn eine Liste (ul!) neben einem gefloateten Element steht, werden die Bullets und auch die Hintergrundbilder »nicht« angezeigt, da das gefloatete Element nur den Text verschiebt und keine weiteren Elemente. Darum sind die roten Quadrate auch hinter dem Bild (das ist im Beispiel transparent gemacht).

@nicmare: Mit echten list-styles (und dann position: inside) wird das auch nicht (viel) besser, da diese dann zwar über dem Bild und knapp neben dem Text liegen –  aber eben nur knapp. Mal abgesehen davon, dass die Bullets schei** aussehen und nicht positioniert werden können ;-).
So sieht es dann auch für den Besucher nach einem echten Fehler aus. So fehlt einfach nur etwas, aber es stört nicht.

Gibt’s noch einen Tipp?
Viele Grüße Andreas

mike-r

arbeitet mit CMS/ms

Registriert: 21. Dezember 2010

Beiträge: 898

Webseite

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Mit echten list-styles (und dann position: inside) wird das auch nicht (viel) besser, da diese dann zwar über dem Bild und knapp neben dem Text liegen –  aber eben nur knapp. Mal abgesehen davon, dass die Bullets schei** aussehen und nicht positioniert werden können ;-).

Du kannst ja auch Bilder nehmen statt der Bullets. Was Du mit "knapp" meinst, kann ich nicht nachvollziehen. Die sind normalerweise genauso weit weg wie sonst auch. Kann man das mal sehen?

Das mit der Positionierung ist ein Ärgernis, aber man sollte auch sehen, dass der Standard (bullet ist in der Mitte der ersten Zeile), in 99% der Fälle der Vernünftigste ist. Hab grad nix auf dem Schirm, wo man das anders brauchen könnte.

---

Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

owr_web

Server-Pate

Registriert: 16. Dezember 2010

Beiträge: 543

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Du kannst ja auch Bilder nehmen statt der Bullets. Was Du mit "knapp" meinst, kann ich nicht nachvollziehen. Die sind normalerweise genauso weit weg wie sonst auch. Kann man das mal sehen?

Sieh mal im bild oben das eingezeichnete Rechteck, dort sind die Bullets, sie werden also nicht mit rübergeschoben.

Die andere Frage - ist das Bild in einem Div oder nur mittem im Text gefloatet?

nicmare

Server-Pate

Registriert: 15. Dezember 2010

Beiträge: 1.314

Webseite

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

amh, dann kannst du dir den workaround aber sparen. das display:inline und list-style inside greift ja nur bei den "echten" bullets. und das problem bleibt ja nach wie vor bestehen. da wirst du wohl nicht drum herum kommen, manuelle bullets einzufügen. also als extra zeichen. oder du erzwingst mit clear:both, dass die liste unter dem bild ausgegeben wird. alles natürlich suboptimal…

---

Meine Projekte:
Dashcam-Test | Babyphone-Testberichte | Türspionkameras

piratos

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

und ein display: inline-block;  ?

mike-r

arbeitet mit CMS/ms

Registriert: 21. Dezember 2010

Beiträge: 898

Webseite

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Kann man das mal sehen?

Sieh mal im bild oben das eingezeichnete Rechteck, dort sind die Bullets, sie werden also nicht mit rübergeschoben.

Oh, das hatte ich noch gar nicht gesehen, hab mich nur gewundert, was dieser Rahmen da soll
In der Konstellation hab ich das noch nie gesehen, da fehlt mehr Code um das zu bewerten.
Bei einem "normalen bildfloat" mit einer anschliessenden Liste sind die Bullets zwar hinter dem Bild aber auf der rechten Seite. (Siehe auch der zusätzliche Link im Beitrag oben).
Hier ist irgendwas anderes kaputt.

amh, dann kannst du dir den workaround aber sparen. das display:inline und list-style inside greift ja nur bei den "echten" bullets. und das problem bleibt ja nach wie vor bestehen.

was sind echte Bullets? Die vom OS vorgegebenen? Nein, man kann auch Grafiken verwenden (schrieb ich bereits)

und ein display: inline-block;  ?

das soll genau was bringen?

---

Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

mike-r

arbeitet mit CMS/ms

Registriert: 21. Dezember 2010

Beiträge: 898

Webseite

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Ich habe mal ein funktionierendes Testcase gebaut: http://trash-wissen.de/dev/bullets/

Probleme: im IE 6 und 7 ist der Text an den Bullets dran. Sollte ohne weiteres HTML-Markup zu lösen sein, indem man die Grafiken etwas breiter macht. Schaue ich mir bei Gelegenheit mal an
Im IE 8 ist der Abstand allerdings ohne Modifikation bereits zu weit.

Zumindest sind die Bullets in keinem Browser hinter der Grafik.

Beitrag geändert von mike-r (15. Februar 2011 23:34)

---

Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

amh

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

2Danke für die vielen Antworten. Dann will ich mal wieder

@mike-r:

Du kannst ja auch Bilder nehmen statt der Bullets. Was Du mit "knapp" meinst, kann ich nicht nachvollziehen. Die sind normalerweise genauso weit weg wie sonst auch. Kann man das mal sehen?

»Mein« Link zeigt das ganz gut: http://barrierefrei.e-workers.de/worksh … index3.php

Das ich Bilder statt Bullets nehmen kann, wusste ich in der Tat noch nicht. Das muss ich mir nochmals anschauen. Mit knapp meinte ich, dass die Standard-Bullets über oder knapp neben dem Bild liegen, aber nicht die Textlinie aufnehmen. Ergo: Kääääse :-)

In der Konstellation hab ich das noch nie gesehen, da fehlt mehr Code um das zu bewerten.

Hmm. Kann aber schon vorkommen :-) Gerade bei einem CMS wo man nie weiß, was genau für ein Inhalt mal eingepflegt wird von den Laien.

 Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<div class="column">
<img class="imgLeft" src="bla.png&amp;text=Platzhalter 294px" alt="" width="294" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <strong>exercitation ullamco laboris nisi ut aliquip ex ea</strong> commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
  <li>Wichtiger Punkt</li>
  <li>Noch einer</li>
  <li>und noch einer</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <em>exercitation ullamco laboris nisi ut aliquip</em> ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
  <li>Wichtiger Punkt</li>
  <li>Noch einer</li>
  <li>Und noch einer</li>
</ul>
</div>

Danke für den Test-Case! Bei mir ist alles localhost.

@nicmare: Ja, eher suboptimal. Immerhin soll ja der Editor den Inhalt einpflegen. Wenn ich dem nun erklären muss im Falle xy dann ein div mit der Klasse … Dann bekomme ich große Augen mit der Frage: »Und das soll einfach (…made simple) sein?«     

@piratos: kurz und knapp: nö.

Viele Grüße Andreas

nicmare

Server-Pate

Registriert: 15. Dezember 2010

Beiträge: 1.314

Webseite

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

amh, dann kannst du dir den workaround aber sparen. das display:inline und list-style inside greift ja nur bei den "echten" bullets. und das problem bleibt ja nach wie vor bestehen.

was sind echte Bullets? Die vom OS vorgegebenen? Nein, man kann auch Grafiken verwenden (schrieb ich bereits)

natürlich kann man das. habe ich auch garnicht bezweifelt. aber der workaround ist für die default bullets gedacht. und bei hintergrundbildchen würde das nichts bringen. die würden nach wie vor ganz links stehen (unter dem bild).
im übrigen sind die grafikbullets mit list-style nicht ganz cross browser kompatibel. daher sollte man das die lösung mit background-image bevorzugen. ja ihr lest richtig, wir bewegen uns in einer zwickmühle

Beitrag geändert von nicmare (15. Februar 2011 13:15)

---

Meine Projekte:
Dashcam-Test | Babyphone-Testberichte | Türspionkameras

amh

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

@nicmare: »Zwickmühle« Das Gefühl habe ich auch. ABER das mit den Bilder schaut nicht soooo schlecht aus: http://www.css4you.de/list-style-image.html
Ich denke der Netscape 4 sollte ausgestorben/irrelevant sein. Ich gebe aber auch zu, dass ich da noch nicht viel Erfahrung habe.

Nein, man kann auch Grafiken verwenden

hmm … habe in Deinen Testfall mal »meine« Grafiken gehängt und nun wieder den Nachteil bewerkt. Man kann nicht positionieren. Einen Tod muss ich sterben, schon klar.

LÖSUNG:
Mit den list-style-Bildern ist das beste Ergebnis zu erziehen und somit ein Lösungsansatz/die Lösung. Die Inkompatibilität mit bestimmten Browsern kann ich noch nicht sagen, da ich immer alles mit Hintergrundbildchen gemacht habe. Aber selbst Microsoft gibt an, dass es unterstützt wird (http://msdn.microsoft.com/de-de/library … S.85).aspx). Da verlasse ich mich mal drauf und passe das Bild etwas an.

VIELEN DANK FÜR EURE HILFE!

Andreas

Beitrag geändert von amh (15. Februar 2011 13:40)

amh

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Noch eine Anmerkung für Designer-Kollegen: Mehrzeilige Listenpunkte sehen sche** aus. Wegen »inside« erfolgt keine automatische Einrückung mehr und die Textlinie ist versaut. Aber gut.

Andreas

piratos

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

@piratos: kurz und knapp: nö.

Sieht bei mir aber ganz brauchbar aus.

amh

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Hallo Piratos,

ja, mit den Standard-list-style-Elementen. Ursprünglich suchte ich nach einem Workaround für die Hintergrundbild-Version.

Außerdem – so steht es zumindest in dem Text – werden dann die Listen, die nicht neben einem float stehen, nicht bündig. Da sagt der Auto zwar, dass das das kleinere Übel ist, aber der Meinung bin ich nicht, da Listen öfter allein stehen. Edit: habe ich falsch verstanden. Ist ja o.k. so.

Vielen Dank aber nochmals.
Andreas

Beitrag geändert von amh (16. Februar 2011 08:33)

amh

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Hier noch ein Bild zur Verdeutlichung mit den mehrzeiligen Listenpunkten und das die Positionierung ohne größeres gif nicht geht.

Und für alle die auch interessiert noch der Code:

 Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Bullets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
    body {
        font: 12px/20px 'Lucida Grande', sans-serif;
    }
    img    {
        float: left;
        margin-right:10px
    }
    ul {
        margin: 0;
        padding: 0;
    }
    li    {
        list-style: url(http://localhost:8888/test/uploads/fsp-tpl/_img/_bullet-startNavi.gif) inside;
        border: 1px solid silver;
        margin-bottom: 2px;
    }
</style>
</head>

<body>
<img src="http://trash-wissen.de/dev/bullets/bg.jpg" width="100" height="100">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<ul>
    <li>Text 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunr adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
    <li>Text 2</li>
    <li>Text 3 </li>
    <li>Text 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunr adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
</body>
</html>

Beitrag geändert von amh (16. Februar 2011 08:44)

piratos

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Na ja es geht schon in dieser Art:

Für die Images habe ich einfach solche genommen die mir gerade über den Weg "liefen".

Beitrag geändert von piratos (16. Februar 2011 13:01)

amh

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

Dir ist die Frage die kommen muss sicherlich klar: Wie? 

piratos

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

display: inline-block;

Hast du ja bereits verworfen.

amh

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

hmm, vielleicht/sicher stehe ich auf dem Schlauch, aber bei mir will das nicht. Weder bei ul noch bei li. Denkfehler? Sicher!

Das CSS

 Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
<style type="text/css">
    body {
        font: 12px/20px 'Lucida Grande', sans-serif;
    }
    img    {
        float: left;
        margin-right:10px
    }
    ul {
        margin: 0;
        padding: 0;
    }
    li    {
        display: inline-block;
        background: url(http://localhost:8888/test/uploads/fsp-tpl/_img/_bullet-startNavi.gif);
        list-style: none;
        /* list-style: url(http://localhost:8888/test/uploads/fsp-tpl/_img/_bullet-startNavi.gif) inside; */
        border: 1px solid silver;
        margin-bottom: 2px;
    }
</style>

piratos

Gast

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [gelöst] Bild mit float und Liste daneben

 Hier klicken, um den Code zum Kopieren zu markieren

<style type="text/css">
    body {
        font: 12px/20px 'Lucida Grande', sans-serif;
    }
    img    {
        float: left;
        margin-right:10px
    }
    ul {
        margin: 0;
        padding: 0;
        display: inline-block;
    }
    li    {
        list-style: url(list.gif) inside;
        border: 1px solid silver;
        margin-bottom: 2px;
        background: url('images/bgr02.jpg');
    }
</style>