Sternebewertung zentrieren

[Michel22]

Hey Leute, Ich bastele eben an einer Sternebewertung, bei der man innerhalb von 5 Sternen auswählen kann. Das klappt bis jetzt auch sehr gut, jedoch bekomme ich es einfach nicht hin, diese Sternebewertung zu zentrieren. Ich wäre sehr dankbar dafür, wenn mir jemand helfen kann. Hier ist der html und css code:

<!-- 1. Stern -->
<span class="star" style="width:250px; margin:0px">
<span class="spacer"></span>
 <!-- 2. Stern -->
 <span class="star" style="width:200px;">
 <span class="spacer">&nbsp;</span>
  <!-- 3. Stern -->
  <span class="star" style="width:150px;">
  <span class="spacer">&nbsp;</span>
   <!-- 4. Stern -->
   <span class="star" style="width:100px;">
   <span class="spacer">&nbsp;</span>
    <!-- 5. Stern -->
	
    <span class="star" style="width:50px;">
    <span class="spacer">&nbsp;</span>
	  
    <!-- 5. Stern Ende-->
    </span>
   <!-- 4. Stern Ende-->
  </span>
  <!-- 3. Stern Ende-->
 </span>
 <!-- 2. Stern Ende-->
 </span>
<!-- 1. Stern Ende-->
</span>
  

css:

.star{
 height:50px;
 display:block;
 margin-left:50px;
 background:url(stern_inactive.gif) left no-repeat;
}

.active {
 background:url(stern_active.gif) left no-repeat;
}

.star:hover{
 background:url(stern_active.gif) left no-repeat;
}

.spacer{
  display:block;
 float:left;
 width:50px;
 height:50px;
}

[Gunnar Bittersmann]

@@Michel22

Ich bastele eben an einer Sternebewertung, bei der man innerhalb von 5 Sternen auswählen kann. Das klappt bis jetzt auch sehr gut

Es mag klappen, aber nicht funktionieren. Ich sehe in deinem HTML nichts, womit ein Nutzer eine Sternebewertung tätigen könnte.

jedoch bekomme ich es einfach nicht hin, diese Sternebewertung zu zentrieren. Ich wäre sehr dankbar dafür, wenn mir jemand helfen kann.

Das SELFHTML kann dir helfen. Darin nach „zentrieren“ gesucht – voilà! Inhalte zentrieren

<span class="star" style="width:250px; margin:0px">

Sämtliches CSS sollte im Stylesheet stehen; nicht inline in style-Attributen.

Deine span-Elemente haben keinen Inhalt. Da sind nirgendwo Sterne.

 <span class="spacer">&nbsp;</span>

Was soll das denn? Für Abstände ist CSS da.

Ich hab so eine Sternebewertung mal gebastelt.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich hab so eine Sternebewertung mal gebastelt.

Und wenn du nun noch einen Wert für justify-content hinzufügst, ist sie sogar zentriert. 😉

@Michel22: Wert und Stelle musst du selbst finden 😜

Bis demnächst
Matthias

[marctrix]

Hej Michel22,

Ich bastele eben an einer Sternebewertung

Mal eine (vermutlich) ganz unerwartete Gegenfrage: Warum?

Es gibt doch zuhauf fertige Lösungen! - Deine Zeit ist IMHO besser investiert die vorhandenen Lösungen nach einer guten zu durchforsten, d.h. einer, die von allen Menschen bedient und verstanden werden kann und sich auch noch an deine Vorstellungen anpassen lässt (um z.B. aus den Sternchen im nächsten Projekt Herzchen machen zu können).

Ich würde so etwas nur als Übung für mich oder als Übung für andere machen. Es sei denn ich finde keine gute Lösung. Dann muss ich halt wirklich selber ran.

Zu Deinem Glück hat @Gunnar Bittersmann dir ja schon ein schönes Teil auf dem Silbertablett serviert (was dir freilich nicht weiter hilft, wenn das dein persönliches Lernprojekt ist).

Marc