<![CDATA[Informationen für CMS/made simple / [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?id=436 Wed, 16 Feb 2011 12:32:47 +0000 FluxBB <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3666#p3666 
<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>
]]> Wed, 16 Feb 2011 12:32:47 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3666#p3666 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3664#p3664 hmm, vielleicht/sicher stehe ich auf dem Schlauch, aber bei mir will das nicht. Weder bei ul noch bei li. Denkfehler? Sicher!

Das CSS

[== 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>
]]> Wed, 16 Feb 2011 12:28:51 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3664#p3664 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3661#p3661 display: inline-block;

Hast du ja bereits verworfen.

]]> Wed, 16 Feb 2011 12:12:48 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3661#p3661 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3657#p3657 Dir ist die Frage die kommen muss sicherlich klar: Wie?  cool

]]> Wed, 16 Feb 2011 12:02:05 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3657#p3657 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3655#p3655 Na ja es geht schon in dieser Art:
test02.jpg
Für die Images habe ich einfach solche genommen die mir gerade über den Weg "liefen".

]]> Wed, 16 Feb 2011 11:54:00 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3655#p3655 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3632#p3632 Hier noch ein Bild zur Verdeutlichung mit den mehrzeiligen Listenpunkten und das die Positionierung ohne größeres gif nicht geht.
5449826933_5c8bbc5779.jpg

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

[== 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>
]]> Wed, 16 Feb 2011 07:32:29 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3632#p3632 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3630#p3630 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

]]> Wed, 16 Feb 2011 07:23:50 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3630#p3630 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3623#p3623

@piratos: kurz und knapp: nö.

Sieht bei mir aber ganz brauchbar aus.
test01.jpg

]]> Tue, 15 Feb 2011 19:38:48 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3623#p3623 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3620#p3620 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

]]> Tue, 15 Feb 2011 12:52:08 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3620#p3620 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3619#p3619 @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.

mike-r schrieb:

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

]]> Tue, 15 Feb 2011 12:39:29 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3619#p3619 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3615#p3615 mike-r schrieb:
nicmare schrieb:

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 wink

]]> Tue, 15 Feb 2011 12:14:18 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3615#p3615 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3614#p3614 2Danke für die vielen Antworten. Dann will ich mal wieder kiss

@mike-r:

mike-r schrieb:

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

mike-r schrieb:

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.

[== 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?«  cool  big_smile  wink

@piratos: kurz und knapp: nö.


Viele Grüße Andreas

]]> Tue, 15 Feb 2011 12:06:49 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3614#p3614 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3603#p3603 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 yikes
Im IE 8 ist der Abstand allerdings ohne Modifikation bereits zu weit.

Zumindest sind die Bullets in keinem Browser hinter der Grafik.

]]> Mon, 14 Feb 2011 22:30:05 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3603#p3603 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3602#p3602 owr_web schrieb:
mike-r schrieb:

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

nicmare schrieb:

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)

piratos schrieb:

und ein display: inline-block;  ?

das soll genau was bringen?

]]> Mon, 14 Feb 2011 22:14:42 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3602#p3602 <![CDATA[Re: [gelöst] Bild mit float und Liste daneben]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3601#p3601 und ein display: inline-block;  ?

]]> Mon, 14 Feb 2011 21:40:04 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=3601#p3601