Suchen
Inside Forum
Nützliche Links




 
phpforum.de bei Facebook
 
phpforum.de bei Twitter
 

Zurück   PHP Forum: phpforum.de > andere (Programmier-)Sprachen > CSS

CSS Alles rund um CSS

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 01.04.2018, 15:15
xDragonx xDragonx ist offline
Engagierter Besucher
 
Registriert seit: 02.01.2004
Beiträge: 292
Standard 5 Star Rating Css Problem

Hab hier unten eine Super einfache Five Star Rating Vorlage gefunden.
Die ich gerne mit etwas erweitern möchte. Nur liegen meine Sterne untereinander, statt aufeinander. Wen ich Voten will, muss ich mit dem Maus nach unten. Für den ersten Stern eine Zeile, für den fünften Stern fünf Zeilen, und immer etwas weiter nach rechts.

Es liegt an der dämlichen CSS, habs nicht hinbekommen!
Hat jemand einen Tip? mach schon seit 2 tagen rum!!

HTML Quellcode:
<style type="text/css">
/* STAR RATING */
  .star-rating{
    list-style:none;
    margin-left:5px!important;
    padding:0px;
    width: 125px;
    height: 25px;
    position: relative;
    background: url(alt_star.gif) top left repeat-x;
  }
  .star-rating li{
    padding:0px;
    margin:0px;
    /*\*/
    float: left;
    /* */
  }
  .star-rating li a{
    display:block;
    width:25px;
    height: 25px;
    text-decoration: none;
    text-indent: -9000px;
    z-index: 20;
    position: absolute;
    padding: 0px;
    padding-top:-25px;
  }
  .star-rating li a:hover{
    background: url(alt_star.gif) left bottom;
    z-index: 2;
    left: 0px;
  }
  .star-rating a.one-star{
    left: 0px;
  }
  .star-rating a.one-star:hover{
    width:25px;
  }
  .star-rating a.two-stars{
    left:25px;
  }
  .star-rating a.two-stars:hover{
    width: 50px;
  }
  .star-rating a.three-stars{
    left: 50px;
  }
  .star-rating a.three-stars:hover{
    width: 75px;
  }
  .star-rating a.four-stars{
    left: 75px;
  }
  .star-rating a.four-stars:hover{
    width: 100px;
  }
  .star-rating a.five-stars{
    left: 100px;
  }
  .star-rating a.five-stars:hover{
    width: 125px;
  }
  .star-rating li.current-rating{
    background: url(alt_star.gif) left center;
    position: absolute;
    
    height: 25px;
    display: block;
    text-indent: -9000px;
    z-index: 1;
  }
</style>
<div id="rating">
<h3>Rating:</h3>
<pre>
<ul class="star-rating">
<li class="current-rating" id="current-rating" style="width: <?php echo $ratingpx = $rating *25; echo $ratingpx; ?>px"><!—Currently <?php echo $rating; ?>/5 Stars.—></li>
<li><a href="javascript:rateImg(1,'1')" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="javascript:rateImg(2,'2')" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="javascript:rateImg(3,'3')" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="javascript:rateImg(4,'4')" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="javascript:rateImg(5,'5')" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>
</pre>
Mit Zitat antworten
  #2  
Alt 01.04.2018, 17:18
Kasalop Kasalop ist offline
Forum-Mitarbeiter
 
Registriert seit: 29.12.2006
Ort: München
Beiträge: 5.858
Standard AW: 5 Star Rating Css Problem

Weil du selbst dran rumgeschustert hast, ohne zu Wissen was du tust... Du musst versuchen zu verstehen, wie der Code funktioniert, bevor du ihn veränderst.

Bitte lies dir mal durch, was das pre-tag in html macht und dann schau dir deinen Code an. Ich würde wetten, dass das pre-tag da nicht von Anfang an drin gestanden hat?

Entfern das mal und dann siehst du, dass das nicht am CSS liegt, sondern am HTML Markup.

Beim nächsten mal posten: Bitte das verwendete Bild mitposten. So muss man selbst wenn man testen will, erstmal auf die Suche nach einem Stern-Bild gehen.
Und bei so Problemen mach es den Helfern doch bitte etwas einfacher, in dem du eine fiddle (zum Beispiel jsfiddle) mit deinem Problem anlegst.
Diesmal habe ich das für dich gemacht. Da ich aber kein passendes Sternbild hatte, habe ich einfach mal einen Rahmen drumherum gezogen.

Lg Kasalop
__________________
Es gibt 10 Arten von Menschen auf der Welt. Die die die binäre Mathematik verstehen und die die sie nicht verstehen!

Zu welcher der Gruppen gehörst du?

Geändert von Kasalop (01.04.2018 um 17:33 Uhr)
Mit Zitat antworten
  #3  
Alt 01.04.2018, 17:48
xDragonx xDragonx ist offline
Engagierter Besucher
 
Registriert seit: 02.01.2004
Beiträge: 292
Standard AW: 5 Star Rating Css Problem

Danke funktioniert wie es soll, und sieht toll aus :-)
Der PRE Tag ist nicht von mir, sondern, noch das original Source Code von der Tutorial Seite !!!



Danke, danke, danke :-)
Mit Zitat antworten
  #4  
Alt 01.04.2018, 17:52
protestix protestix ist gerade online
Engagierter Besucher
 
Registriert seit: 29.06.2016
Beiträge: 671
Standard AW: 5 Star Rating Css Problem

Hier mal aus meiner Fundgrube
HTML Quellcode:
<!DOCTYPE HTML>
<html lang="de">
  <head>
  <meta charset="UTF-8">
  <title>Bewertung</title>
  <style>
      .rating {
          height: 39px;
          border: 1px solid gold;
          width: 200px;
          background: url("bilder/5stars.jpg") no-repeat left top;
          position: relative;
      }
      .onestars {height: 39px; border: 1px solid gold; width:40px;}
      .twostars {height: 39px; border: 1px solid gold; width:80px;}
      .threestars {height: 39px; border: 1px solid gold; width:120px;}
      .fourstars {height: 39px; border: 1px solid gold; width:160px;}
  </style>
  </head>
  <body>
  <div class="rating fourstars">
  </div>
  <div class="rating twostars">
  </div>
  <div class="rating">
  </div>
  
  </body>
</html>


5 Sternebild ist bei mir 39px hoch und 200px breit, womit sich dann bei jedem Stern 40px Breite ergeben.
Kannst jedes 5 Sterne Bild verwenden, musst dann nur die Zahlen anpassen.

Ebenso ist das lediglich ein Beispiel wie einfach das CSS sein kann, es kann da auch Checkbox oder input range verwendet werden.
Mit Zitat antworten
  #5  
Alt 01.04.2018, 19:01
xDragonx xDragonx ist offline
Engagierter Besucher
 
Registriert seit: 02.01.2004
Beiträge: 292
Standard AW: 5 Star Rating Css Problem

Danke Protestix,
aber bei deinem Beispiel fehlt mir die Animation.

Probier mal meinen Code, entferne die PRE Tags aus meinem Post.

nimm diesen Grafik:
Mit Zitat antworten
  #6  
Alt 01.04.2018, 22:08
Kasalop Kasalop ist offline
Forum-Mitarbeiter
 
Registriert seit: 29.12.2006
Ort: München
Beiträge: 5.858
Standard AW: 5 Star Rating Css Problem

Hier mal noch eine Ansicht, ohne volle Sterne, sondern auch mit Bruchteilen.
(ohne Input, nur Ansicht): https://jsfiddle.net/3ksmk63c/
__________________
Es gibt 10 Arten von Menschen auf der Welt. Die die die binäre Mathematik verstehen und die die sie nicht verstehen!

Zu welcher der Gruppen gehörst du?
Mit Zitat antworten
  #7  
Alt 02.04.2018, 14:35
xDragonx xDragonx ist offline
Engagierter Besucher
 
Registriert seit: 02.01.2004
Beiträge: 292
Standard AW: 5 Star Rating Css Problem

Sieht super aus :-)
Und ziemlich wenig code !! Danke Kasalop!
Mit Zitat antworten


Antwort

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.

Gehe zu
Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
AJAX Star Rating Bar grundig1313 PHP 8 01.01.2009 21:11
Star Rating Bar Problem Darstellung IE6 rockable CSS 0 06.09.2008 14:05
Doctype ignoriert star hack urban_spaceman HTML 3 13.09.2007 10:02
Ajax Star Rating Installation GregTheNose PHP 0 21.07.2007 17:28
Ajax Star Rating "Installation" GregTheNose PHP 12 21.07.2007 01:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:26 Uhr.


Powered by vBulletin® Version 3.8.8 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Powered by NuWiki v1.3 RC1 Copyright ©2006-2007, NuHit, LLC