CSS ::before width

[mixmastertobsi]

Hallo Zusammen,

es geht um folgende Seite und dort um die "Sterne".

http://www.slewo.com/

Um weniger Grafiken zu verwenden, habe ich der "Sterne-Bewertung" geändert. Nun ist es leider so, dass ich es nur hinbekommen habe, ganze sterne darzustellen. Meine Idee war im CSS zu sagen, wenn die Wertung zum Beispiel 4,5 ist, die Breite von ::before nur noch 90% ist, allerdings funktioniert das nicht, weil hier die Breite vom ganzen Element genommen wird, also auch mit Text "4.5/5". Wer hat mir einen Tipp...

[Jörg Reinholz]

Moin!

packe die Asterixe in einen <span>, den Du mit "display:inline-block;" formatierts. Dem kannst Du dann auch eigenständig eine Breite u.s.w. geben.

Jörg Reinholz

[mixmastertobsi]

Moin!

packe die Asterixe in einen <span>, den Du mit "display:inline-block;" formatierts. Dem kannst Du dann auch eigenständig eine Breite u.s.w. geben.

Jörg Reinholz

Sorry, aber was sind Asterixe?

Du meinst so?

<span><span></span>4.5/5</span>

[Jörg Reinholz]

Moin!

Sorry, aber was sind Asterixe?

Sterne als Zeichen: "**" (einer wäre nur "*")

Jörg Reinholz

[Felix Riesterer]

Lieber mixmastertobsi,

Sorry, aber was sind Asterixe?

Jörg meinte "Asterisk".

<span><span></span>4.5/5</span>

Wohl eher so:

<span class="rating">
    <span>*</span>
    <span>*</span>
    <span>*</span>
    <span>*</span>
    <span>*</span>
    <b>4.5/5</b>
</span>

Liebe Grüße,

Felix Riesterer.

[Jörg Reinholz]

Moin!

Ja. Sowas meinte ich auch:

<style>
.rating {
  display:inline-block;
  width: 5em;

.rating span.halbstern {
  display:inline-block;
  width:.5em; // Anpassen!
  overflow:hidden;
}
</style>
…
   <span class="rating">****<span class="halbstern">*</span><b>4.5/5</b></span>

Jörg Reinholz

[Jörg Reinholz]

Moin!

Ich reiche die fehlende Klammer nach:

<style>
.rating {
  display:inline-block;
  width: 5em;
}
.rating span.halbstern {
  display:inline-block;
  width:.5em; // Anpassen!
  overflow:hidden;
}
</style>

Jörg Reinholz

[Matthias Apsel]

Hallo Jörg Reinholz,

Moin!

Ich reiche die fehlende Klammer nach:

<style>

.rating {
  display:inline-block;
  width: 5em;
}
.rating span.halbstern {
  display:inline-block;
  width:.5em; /* Anpassen! */
  overflow:hidden;
}

</style>

und ich die richtige Kommentarauszeichnung.

Schade, dass man Codeblöcke nicht schachteln kann. Aber Christian kriegt das bestimmt hin.

Bis demnächst
Matthias

[dedlfix]

Tach!

<style>
.rating {
  display:inline-block;
  width: 5em;
}
.rating span.halbstern {
  display:inline-block;
  width:.5em; /* Anpassen! */
  overflow:hidden;
}
</style>

Schade, dass man Codeblöcke nicht schachteln kann. Aber Christian kriegt das bestimmt hin.

Einfach das von drumherum nehmen, das innere fügt sich dann schon.

dedlfix.

[Matthias Apsel]

Hallo mixmastertobsi,

Um weniger Grafiken zu verwenden, habe ich der "Sterne-Bewertung" geändert. Nun ist es leider so, dass ich es nur hinbekommen habe, ganze sterne darzustellen. Meine Idee war im CSS zu sagen, wenn die Wertung zum Beispiel 4,5 ist, die Breite von ::before nur noch 90% ist, allerdings funktioniert das nicht, weil hier die Breite vom ganzen Element genommen wird, also auch mit Text "4.5/5". Wer hat mir einen Tipp...

Oder ganz anders. http://alternativ-tankstelle.de/a9.html#Schleiz

Bis demnächst
Matthias

[Jörg Reinholz]

Moin!

Oder ganz anders. http://alternativ-tankstelle.de/a9.html#Schleiz

Warum beschreibst Du es nicht?

2 Grafiken.

Die erste mit alle 5 weißen Sternen als Hintergundbild in einem <span> (display: inline-Block) mit passender Weite.

Der zweite span, innerhalb des ersten bekommt als Hintergrundbild das mit 5 bunten Sternen - die Breite in Prozent - gleich passend zur Punktzahl.

<div class="bewertung">
<span class="weisse_sterne"><span class="bunte_sterne" style="width:85%">&nbsp;<span></span> Text
</div>

.bewertung span {
   display; inline-block
   width: 200px;
   height: 1em;
   background-image: url(weisse_sterne.png);
}

.bewertung span.bunte_sterne {
    background-image: url(bunte_sterne.png);
}

Jörg Reinholz

[Matthias Apsel]

Hallo Jörg Reinholz,

Nicht ganz: Durchsichtige Sterne und dazu eine Hintergrundfarbe.

Wenn man den farbigen Hintergrund als linear-gradient macht, braucht man kein zusätzliches Element.

Bis demnächst
Matthias

[Jörg Reinholz]

Moin!

Nicht ganz: Durchsichtige Sterne und dazu eine Hintergrundfarbe.

Wenn man den farbigen Hintergrund als linear-gradient macht, braucht man kein zusätzliches Element.

Auch eine klasse-Idee. Hat aber nichts mit der mit Dir verlinkten Tankstellenseite zu tun, denn da sind die spans verschachtelt:

<span class="sterne"><span style="width: 90%">&nbsp;</span></span>

	#content .sterne
	{
		display: block;
		float: left;
		margin-right: .5em;
		padding: 0;
	        width: 130px; 
		height: 24px; 
		background-image: url(stern.gif);
	        background-repeat: no-repeat; 
		background-position: 0 -120px;
		overflow: hidden;
	}
	#content .sterne span
	{ 
		display: block;
		background-image: url(stern.gif);
		background-repeat: no-repeat; 
	        background-position: 0 0;
		height: 24px;
	}

Im Hinblick auf Gif und das zugehördende CSS (background-position: 0 -120px;) wird mir aber klar, dass keine beiden Klasse-Methoden verwendet, sondern einfach eine Zeile aus dem Pic "ausgewählt" wird. Wieso dann da nochmal ein gif "drübergezimmert" wird erschließt sich noch nicht ganz, ich habe in der kurzen Zeit keine weitere (ganz anders) bewertete Tankstelle gefunden. Es sieht sogar so aus, als würden zwei Arten des Vorgehens kombiniert.

(Update: jetzt doch: Es werden nur die vollständig blauen und vollständig weißen Sterne (1. und letzte Zeile) benutzt und die Überdeckung (Breite des 2. Spans) bestimmt, wie viele Sterne angezeigt werden.)

Hehe. Wieso muss ich Dir eigentlich sagern, wie Deine Seite funktioniert?

Hinweis: Der 404er verweist auf die falsche Domain.

Jörg Reinholz

[Matthias Apsel]

Hallo Jörg Reinholz,

Auch eine klasse-Idee. Hat aber nichts mit der mit Dir verlinkten Tankstellenseite zu tun, denn da sind die spans verschachtelt:

Ja, ich weiß ;-) Damals war die Unterstützung von multiplen Hintergründen und linear-gradient noch nicht so weit.

Im Hinblick auf Gif und das zugehördende CSS (background-position: 0 -120px;) wird mir aber klar, dass keine beiden Klasse-Methoden verwendet, sondern einfach eine Zeile aus dem Pic "ausgewählt" wird. Wieso dann da nochmal ein gif "drübergezimmert" wird erschließt sich noch nicht ganz, ich habe in der kurzen Zeit keine weitere (ganz anders) bewertete Tankstelle gefunden. Es sieht sogar so aus, als würden zwei Arten des Vorgehens kombiniert.

(Update: jetzt doch: Es werden nur die vollständig blauen und vollständig weißen Sterne (1. und letzte Zeile) benutzt und die Überdeckung (Breite des 2. Spans) bestimmt, wie viele Sterne angezeigt werden.)

Hehe. Wieso muss ich Dir eigentlich sagern, wie Deine Seite funktioniert?

Naja ich kann dir ja ein wenig helfen ;-) Die anderen Zeilen des sternen-sprites werden benötigt, wenn du eine Tankstelle bewerten möchtest.

Hinweis: Der 404er verweist auf die falsche Domain.

Stimmt. Danke.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@mixmastertobsi

"Sterne-Bewertung"

Das passende HTML-Element dafür ist meter: <meter min="0" max="5" optimum="5" high="4.5" value="3.5"></meter>

Mit clip-path kann man – wie in der Weihnachtsbäckerei – Sterne ausstechen.

LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das passende HTML-Element dafür ist meter

Blöd, dass man für IE und iOS-Safari immer noch einen Polyfill braucht.

LLAP