Wie krieg ich das hin?

[blubbbla]

Ich möchte so etwas, wie auf der Grafik zu sehen ist, bauen.
Also: Einen Text (er kann mal länge roder mal kürzer sein), nach diesem Text erscheinen nebeneinander Bilder. Theoretisch wäre dies ja kein Problem, aber die Bilder sollen als Hintergrundgrafiekn in css geladen werden. Also müsste ich das ja als Liste oder Tabelle aufbauen, aber ul und table tags erzeugen eine neue Zeile und erscheinen dann nicht neben dem Text und wenn ich den Text einschließe in die Liste/Tabelle, dann entsteht kein Zeilenumbruch (wie auf dem Bild zu sehen ist) falls der Text zu lang ist.
Kann mir jemand helfen, wie ich das bauen kann?

 

[Gumbo]

Du müsstest ein Inline-Element nehmen, beispielsweise:

<span style="background:url(http://tbn0.google.com/images?q=tbn:cIcw0uNEhB0kDM:http://www.onlinespiel.de/images/tpl/rating_2.jpg) no-repeat 100% 50%; padding-right: 85px">China erleben zu Hause und in der Luft und überhaupt</span>

 

[blubbbla]

Ja aber die Sterne müssen einzeln abgebildet sein.
Also, zum Beispiel
<li>stern 1</li>
<li>stern 2</li>

usw.

 

[mAu]

Warum muss es als Hintergrundgrafik sein? Und auch wenn es "separat" sein muss kannst du es mittels display: inline; machen:

Dein Text... (<div style="background-image: url('pfad/zum/stern-bild.gif'); display: inline;">&nbsp</div><div style="background-image: url('pfad/zum/stern-bild.gif'); display: inline;">&nbsp</div><div style="background-image: url('pfad/zum/stern-bild.gif'); display: inline;">&nbsp</div><div style="background-image: url('pfad/zum/stern-bild.gif'); display: inline;">&nbsp</div><div style="background-image: url('pfad/zum/stern-bild.gif'); display: inline;">&nbsp</div>)

 

[blubbbla]

Weil die Bilder im css in bestimmten Fääen ausgetauscht werden müssen. Jetzt hab ich mal deinen Tip probiert und da verschwinden die Sterne - ist bloß der Text und die zwei leeren Klammern zu sehen. Wenn ich etwas in die divs reinschreibe, dann sehe ich die Sterne, aber das kann ich ja nicht :-( das inline Objekt ignoriert die Breiten - und Höhenangaben.

.big_full{
	background-image: url(../images/stars/star_big_green.gif);
	background-repeat: no-repeat;
	width: 14px;
	height: 13px;
	background-position: bottom;
	display:inline;
}
.big_half{
	background-image: url(../images/stars/star_big_half.gif);
	background-repeat: no-repeat;
	width: 14px;
	height: 13px;
	background-position: bottom;
	display:inline;
}
.big_empty{
	background-image: url(../images/stars/star_big_empty.gif);
	background-repeat: no-repeat;
	width: 14px;
	height: 13px;
	background-position: bottom;
	display:inline;
}

<h2>China erleben zu Hause und in der Luft und überhaupt <span class="stars">(<div class="big_full"></div><div class="big_full"></div><div class="big_full"></div><div class="big_half"></div><div class="big_empty"></div>)</span></h2>

 

[Gumbo]

<h2>China erleben zu Hause und in der Luft und überhaupt <span class="stars" title="3,5 Punkte">(<span class="big_full"></span><span class="big_full"></span><span class="big_full"></span><span class="big_half"></span><span class="big_empty"></span>)</span></h2>

.stars span {
	padding-right: 14px;
	background-repeat: no-repeat;
	background-position: 100% 50%;
}
.stars .big_full {
	background-image: url(../images/stars/star_big_green.gif);
}
.stars .big_half {
	background-image: url(../images/stars/star_big_half.gif);
}
.stars .big_empty {
	background-image: url(../images/stars/star_big_empty.gif);
}

 

[blubbbla]

Hm im Firefox und Opera funktioniert das super und im IE (6 und 7) sind keine Sterne zu sehen
Im IE muss etwas in den spans drin stehen, damit man die Sterne sieht.

Kann man das ganze nicht mit einer Liste machen - zumindest die Sterne