mikeschie
Oct 10, 2023
view1341
view6
0
Goto Top

2 verschiedene Sterne-Bewertungen erstellen

GermanQuestionHTMLCSSPHPJavaScript
Wie kann ich 2 verschiedene Sterne-Bewertungen erstellen und diese mit einem "onClick" absenden?
z.B.
Gestaltung:
Farbgebung:

Meine Versuche aus dem Artikel [content:326544]
das dort genannte Beispiel codepen.io/jamesbarnett/pen/vlpkh zu duplizieren ist gescheitert.

Wenn ich den CSS Code in meine css einfüge bekomme ich keine Sterne angezeigt. Wieso geht das nicht?

<head lang="de">  
  <meta charset="UTF-8">  
  <title>Bewertungen</title>
  <link href="my_style.css" rel="stylesheet" type="text/css" />  
</head>

Vielen Dank für Eure Hilfe
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 71486463556

Url: https://administrator.de/contentid/71486463556

Printed on: April 29, 2024 at 10:04 o'clock

6 Comments
Latest comment
Goto Top
Member: Dawnbreaker
Dawnbreaker Oct 10, 2023 at 09:00:01 (UTC)
Goto Top
Hi,

poste mal deine gesamte HTML + CSS als Spoiler.

LG
Member: Mikeschie
Mikeschie Oct 10, 2023 at 09:09:40 (UTC)
Goto Top
Hier kommt meine html Seite:

<!DOCTYPE html>
<html>

<head lang="de">  
  <meta charset="UTF-8">  
  <title>Bewertungen</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <link href="my_style.css" rel="stylesheet" type="text/css" />  
<style>

</style>
 </head>
<body>
<center>
  <h2>Bewertungen</h2>
 
<div class="container">  
				
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">  
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>  
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>  
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>  
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>  
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>  
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>  
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>  
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>  
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>  
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>  
</fieldset>
<input type="button" id="btnGetStarValue" value="Get Rating" onClick="alert('Anzahl Sterne: ' + GetRating());" style="margin:0px 10px">    
 
</div>

</body>
</html>
und hier meine css als my_style.css:

.container {
	width: 18%;
	height: 400px;
	margin: 0 auto;
	border: 1px solid black;
	padding: 5px;
	clear: both;
}

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating1 { 
  border: none;
  float: left;
}

.rating1 > input { display: none; } 
.rating1 > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005"; 
}

.rating1 > .half:before { 
  content: "\f089"; 
  position: absolute;
}

.rating1 > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating1 > input:checked ~ label, /* show gold star when clicked */
.rating1:not(:checked) > label:hover, /* hover current star */
.rating1:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating1 > input:checked + label:hover, /* hover current star when changing rating */
.rating1 > input:checked ~ label:hover,
.rating1 > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating1 > input:checked ~ label:hover ~ label { color: #FFED85;  }
Member: SlainteMhath
SlainteMhath Oct 10, 2023 updated at 09:20:40 (UTC)
Goto Top
Moin,

ich bin jetzt nicht der css Profi, aber wenn die Class im CSS "rating1" benannt ist, dann solltest du die auch mit gleichem Namen im HTML referenzieren, oder?

lg,
Slainte
heart1
Member: Dawnbreaker
Dawnbreaker Oct 10, 2023 at 09:47:07 (UTC)
Goto Top
Hi,

genau das ist das Problem.
Du referenzierst den Style von der Klasse .rating aber in der css gibts nur .rating1.
Ergo wird kein Style applied, weil es ja keinen Style gibt...

LG
Member: Mikeschie
Mikeschie Oct 10, 2023 at 10:19:37 (UTC)
Goto Top
Ups, sorry das war von meinem Versuch es auf 2 Bewertungen zu duplizieren.

Hier die richte CSS

.container {
	width: 18%;
	height: 400px;
	margin: 0 auto;
	border: 1px solid black;
	padding: 5px;
	clear: both;
}

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005"; 
}

.rating > .half:before { 
  content: "\f089"; 
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }
Member: Dawnbreaker
Dawnbreaker Oct 10, 2023 at 15:16:59 (UTC)
Goto Top
Hi,

laut CSS Specs müssen @import Regeln immer als erstes kommen.

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.container {
	width: 18%;
	height: 400px;
	margin: 0 auto;
	border: 1px solid black;
	padding: 5px;
	clear: both;
}

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";  
}

.rating > .half:before { 
  content: "\f089";  
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }

Davon mal abgesehen, ist FontAwesome Version 3.2.1 veraltet, aktuell ist Version 6. face-wink

LG
GermanQuestionHTMLCSSPHPJavaScript
Hotly discussed
DaniEnd of availability for classic Teams clientDani - 1 CommentadmtechDeveloper diary: Release 6.1admtech