Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Str4ng3r · 01.08.2009

Hallo liebe Community,

folgendes problem.

ich habe eine Liste mit ul und li, li wies ich per CSS ein Aufzählungszeichen zu, diese grafik ist 48x48px groß. Das funktioniert auch einwandfrei, allerdings macht nun der text daneben probleme, entweder die erste zeile des textes fängt erst am fuße des images an (boden der 1. zeile genau gleichauf mit boden des images) und der rest halt darunter, oder wenn ich dem text per span position:top zuweise dann fängt die erste zeile oben mit dem image an, die 2. zeile aber erst unter dem image. aussehen soll es z.b. genau wie bei twitter, text beginnt oben gleichauf mit der oberen kante des images und läuft dann nach unten weiter. Wie kann ich dies realisieren?

der HTML Code sieht so aus:

HTML:

<li><span><a href="http://tinyurl.com/ktma3y">http://tinyurl.com/ktma3y</a> Welche Multiplex-Kino Website sagt euch mehr zu?</span> <a href="http://twitter.com/StaidDesign/statuses/3070438998" style="font-size: 85%;">8 minutes ago</a></li>

der CSS Code dazu:

Code:

#twitter_div { width:542px; display:block; height:auto; padding-left:15px; }

#twitter_div #twitter_update_list li { list-style-image:url(../images/logobutton_normal.jpg); list-style-position:outside; margin:0; padding:0; font-size:14px; }

#twitter_div #twitter_update_list li span { vertical-align:top; margin:0; padding:0; }
    
#twitter-link { margin-left:430px; width:100px; height:100px; background:url(../images/twitter_follow.png) no-repeat; font-size:0px; text-align:right; }

wie ihr wohl seht handelt es sich um eine einbindung von twitter

xyzutschixyz · 01.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Also leider kenn ich mich mit Twitter gar nicht aus, bin dort auch nicht angemeldet. Schicke doch einfach mal paar Screenshots, damit man sich das mal besser vorstellen kann. Ansonsten mach es noch mit einer Tabelle, ist zwar nicht die eleganteste Methode, aber die sicherste...

Shuilar · 01.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Hi,

stimmt es, dass Du die Standardschriftart benutzen willst? Ansonsten, welche Schriftart?

Stell mal bitte noch kurz die Grafik ein.
Ich seh sowas immer gerne vor mit.

LG
Shu

Str4ng3r · 01.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

um schriftart und twitter direkt geht es hier ja gar nicht, denn das script das ich eingebunden habe ist von twitter vorgegeben, somit erledit sich das auch mit tabellen, bei der grafik stell dir einfach mal nen quadrat mit 48x48 px vor.

Shuilar · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

ok ... ich check das mal heute Abend ... ich geh jetzt nämlich schlafen und mach mal morgen einen auf Familie.

LG
Shu

Str4ng3r · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

oke danke

wknetpublishing · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Moin Moin,

ich habe das mit dieser Angabe im CSS auf einer Website gelöst:

li {
list-style-image: url(../images/pfeil.gif);
list-style-position: outside;
}

Auf diese Art ist die Liste etwas eingerückt und vor jedem Listenpunkt steht (in diesem Fall) ein kleiner weißer Pfeil.

Gruß
Christiana Kohn

Str4ng3r · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

position

utside hab ich ja auch in meiner CSS allerdings ändert das nichts an folgedem problem:

screenshot:

das blau eingerahmte ist ein Twitter Post, wie ihr seht beginnt er oben am Icon, und dann geht er erst darunter wieder weiter, das sieht nicht nur unschön aus sondern erschwert das lesen!

wknetpublishing · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Moin Moin,

Deine Grafik bestimmt den Zeilenabstand, deswegen sieht es so komisch aus.

Hast Du eine Testversion irgendwo ins Netz geladen?
Dann sende mir doch bitte den Link, ich werde dann versuchen den Fehler für Dich auszumerzen und Dir eine Anleitung zu schreiben.

Gruß
Christiana Kohn

leohh · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Setz doch einfach mittels Span die Listenaufzaehlungszeichen.
Ich weiss, dass es nicht sehr elegant ist aber so umgehst du die Sache mit der line-height verschmerzbar.

Shuilar · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Also nach einigen Überlegungen ist mir jetzt klar, warum das umbringt. Ist ja ein Aufzählungszeichen. Wie sollte der Text auch wissen, dass er sich darauf verteilen soll.

Mach es einfach so:

Code:

<div style='float:left;width:48px;margin-right:5px;'><img alt='Logo' src='logobutton_normal.jpg' /></div><div style='width:489px;float:left;'>Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht.</div>

Ich hab die Styles jetzt direkt in den Quelltext geschrieben und der Pfad zur Grafik muss auch angepasst werden. Aber so siehst Du, was ich meine.
Für den nächsten "Listenpunkt" müsstest Du dann einfach den Code nochmal kopieren.

Poste mal, falls das, was ich Dir geschrieben habe nicht machbar ist, das Script von Twitter. Damit kann man dann vielleicht mehr anfangen.

LG
Shu

Str4ng3r · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Shuilar schrieb:
Also nach einigen Überlegungen ist mir jetzt klar, warum das umbringt. Ist ja ein Aufzählungszeichen. Wie sollte der Text auch wissen, dass er sich darauf verteilen soll.

Mach es einfach so:

Code:

<div style='float:left;width:48px;margin-right:5px;'><img alt='Logo' src='logobutton_normal.jpg' /></div><div style='width:489px;float:left;'>Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht.</div>

Ich hab die Styles jetzt direkt in den Quelltext geschrieben und der Pfad zur Grafik muss auch angepasst werden. Aber so siehst Du, was ich meine.
Für den nächsten "Listenpunkt" müsstest Du dann einfach den Code nochmal kopieren.

Poste mal, falls das, was ich Dir geschrieben habe nicht machbar ist, das Script von Twitter. Damit kann man dann vielleicht mehr anfangen.

LG
Shu

Das Problem ist, ich erstelle die Liste nicht, die Liste wird durch ein Javascript von Twitter erstellt! D.h. ich kann da nur per CSS eingreifen, an die Generierung der Liste und wie der HTML Code Ausgegeben wird komm ich leider nicht ran!

Shuilar · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Dann so ...

Code:

<ul style='list-style:none; margin:0;padding:0;'>
<li><span style='width:48px;margin-right:5px;float:left;'><img alt='Logo' src='logobutton_normal.jpg' /></span><span style='width:489px;float:left;'>Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht.</span></li>
</ul>

Den Stylekram musste da halt rausziehen. Wenn das auch nicht klappt, dann sag mir mal den Pfad bei Twitter, wo ich das machen kann. Hab mich da jetzt angemeldet, aber ich find noch nicht mal den Teil, den Du gerade bearbeitest und bin ganz ehrlich auch zu faul zum Suchen.

Edit ... wart mal ... hab es jetzt gefunden ... ich melde mich gleich wieder.

Update:
Also bei mir klappt das wunderbar ... und man kann den generierten Code problemlos bearbeiten.

Code:

<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<div style='width:48px;margin-right:5px;float:left;'><img alt='Logo' src='images/logobutton_normal.jpg' /></div>
<div style='width:489px;float:left;'>Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht.
<a href="http://twitter.com/Shuilar" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Shuilar.json?callback=twitterCallback2&amp;count=5"></script>

Das sieht dann so aus:

LG
Shu

Str4ng3r · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Shuilar schrieb:
Also nach einigen Überlegungen ist mir jetzt klar, warum das umbringt. Ist ja ein Aufzählungszeichen. Wie sollte der Text auch wissen, dass er sich darauf verteilen soll.

Mach es einfach so:

Code:

<div style='float:left;width:48px;margin-right:5px;'><img alt='Logo' src='logobutton_normal.jpg' /></div><div style='width:489px;float:left;'>Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht.</div>

Ich hab die Styles jetzt direkt in den Quelltext geschrieben und der Pfad zur Grafik muss auch angepasst werden. Aber so siehst Du, was ich meine.
Für den nächsten "Listenpunkt" müsstest Du dann einfach den Code nochmal kopieren.

Poste mal, falls das, was ich Dir geschrieben habe nicht machbar ist, das Script von Twitter. Damit kann man dann vielleicht mehr anfangen.

LG
Shu

Shuilar schrieb:
Dann so ...

Code:

<ul style='list-style:none; margin:0;padding:0;'> <li><span style='width:48px;margin-right:5px;float:left;'><img alt='Logo' src='logobutton_normal.jpg' /></span><span style='width:489px;float:left;'>Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht. Das ist der ziemlich lange Text, der mit viel Glück, auch noch umbricht.</span></li> </ul>

Den Stylekram musste da halt rausziehen. Wenn das auch nicht klappt, dann sag mir mal den Pfad bei Twitter, wo ich das machen kann. Hab mich da jetzt angemeldet, aber ich find noch nicht mal den Teil, den Du gerade bearbeitest und bin ganz ehrlich auch zu faul zum Suchen.

Edit ... wart mal ... hab es jetzt gefunden ... ich melde mich gleich wieder.

LG
Shu

den style kram rauszunehmen ist nicht das problem du hast allerdings ein image tag eingefügt, welches ich eben dank dem Twitterscript nicht kann

ich kann ja nichtmal direct auf das javascript einwirken sonst würde ich eben dies umändern!

Shuilar · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Hi,

also irgendwie reden wir glaub aneinander vorbei ... ich hab doch den verflixten Code von Twitter genommen.

Du willst das auch nur auf Deiner Webseite verlinken oder lieg ich jetzt komplett quer?

Ich hab mir den HTML-Code generiert ... in ein HTML-Dokument kopiert, angepasst und fertig.
Ich hab doch an dem JavaScript auch nichts geändert.

Was willst Du denn damit anderes machen als ich?

LG
Shu

Str4ng3r · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

HTML:

<li>
<span>
<a href="http://tinyurl.com/ktma3y">http://tinyurl.com/ktma3y</a> 
Welche Multiplex-Kino Website sagt euch mehr zu?
</span> 
<a href="http://twitter.com/StaidDesign/statuses/3070438998" style="font-size: 85%;">
8 minutes ago</a></li>

das ist der html code der mir ausgegeben wird und den ich zur verfügung habe, mehr nicht. da ist nichts von einem <img> welches ich mittels CSS formatieren könnte

Shuilar · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

ne ... ist da nicht ... aber Du kannst doch in Deinen Quelltext reinschreiben, was DU willst.

Ändert doch nichts an der Funktion.

Probier es doch einfach mal aus, dann siehst Du, dass es geht.

Edit:
Schau Dir mal den Quelltext auf meiner Webseite an ... das ist doch jetzt Dein Code in Divs

LG
Shu

anoX · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Also wenn ich mich jetzt richtig eingelesen habe, hast Du eine Liste und die Schrift daneben ist falsch ausgerichtet. Diese Aussage ist falsch, denn eigentlich ist deine Grafik falsch ausgerichtet.

Also machst Du folgendes:

entsprechende CSS

Code:

li {
 list-style-image:url(../images/list-icon.jpg) no-repeat 2px 0px;  
}

Die Pixelangabe behandelt die x- und y-Achse. Spiele ein bischen mit den Werten und richte dein List-Icon entsprechend aus.

Shuilar · 02.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Hi anoX,

egal, wie sie eine so große Grafik positioniert. Der Text daneben wird in der zweiten Zeile UNTERHALB der Grafik stehen, weil es eben eine neue Zeile ist.

Wenn Du in Word eine Liste mit einer riesigen Grafik machst, dann steht die zweite Zeile auch darunter.
Das ist ja der Sinn einer Liste, dass genau das passiert.

LG
Shu

anoX · 03.08.2009

AW: Problem bei verwendung einer Grafik als Aufzählungszeichen einer Liste

Ja schon klar, aber ich versteh das Problem nicht ehrlich gesagt.

Wenn ich das so mache:

CSS

Code:

body {
 font: 12px/18px Arial;
}

h1 {
 font: 16px/18px Arial;
}

p {
 margin:0;
}

ul
{
list-style-type: none;
list-style-position:outside;
padding: 0;
margin: 0;
}

li
{
background:transparent url(list-icon.jpg) no-repeat scroll 0 8px;
height:75px;
padding-left:60px;
}

HTML

Code:

<body>
<ul>
<li>
 <h1>Topic</h1>
 <p>Beschreibung</p>
 <a href="#">Link</a>
</li>
<li>
 <h1>Topic</h1>
 <p>Beschreibung</p>
 <a href="#">Link</a>
</li>
<li>
 <h1>Topic</h1>
 <p>Beschreibung</p>
 <a href="#">Link</a>
</li>
</ul> 
</body>

sieht es so aus:

und das ist doch gewünscht, oder nicht?

Dabei spielt die position des li-Elements bzw. dessen Hintergrundes eine Rolle - wenn auch nicht die Größte, aber zum "verfeinerten" Ausrichten allemal brauchbar.