mixmastertobsi: CSS ::before width

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

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

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

      1. Moin!

        Sorry, aber was sind Asterixe?

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

        Jörg Reinholz

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

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

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

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

              --
              Signaturen sind bloed (Steel) und Markdown ist mächtig.
              1. 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.

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

    --
    Signaturen sind bloed (Steel) und Markdown ist mächtig.
    1. 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

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

        --
        Signaturen sind bloed (Steel) und Markdown ist mächtig.
        1. 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

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

            --
            Signaturen sind bloed (Steel) und Markdown ist mächtig.
  3. @@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

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@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

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)