In the realm of my star.jsp page, the style.css is its trusty companion, faithfully executing its duties. However, a desire has crept into my heart - I yearn for the stars to shrink in size.
The Chronicles of My Code
star.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Notation</title>
<script type="text/javascript">
function notation(starId) {
var elements = document.getElementsByClassName("notation-star-
selected");
for (i = 0; i < elements.length; i++) {
elements[i].className = "notation-star";
}
document.getElementById(starId).className = "notation-star-
selected";
document.getElementById("notationNote").value = starId.substr(4,
4);
var note = document.getElementById("notationNote").value =
starId.substr(4, 4);
document.getElementById("vote").innerHTML = note.valueOf();
}
</script>
</head>
<div class="notation-text">Your feedback is invaluable to us in enhancing the quality of our service</div>
<form method="post" action="voting">
<div id="star5" class="notation-star" onClick="notation(this.id);"></div>
<div id="star4" class="notation-star" onClick="notation(this.id);"></div>
<div id="star3" class="notation-star" onClick="notation(this.id);"></div>
<div id="star2" class="notation-star" onClick="notation(this.id);"></div>
<div id="star1" class="notation-star" onClick="notation(this.id);"></div>
<input type="hidden" id="notationNote" name="notation_note" value="0">
<input type="submit" value="ok"></form <br>
<p id="vote"></p>
</html>
Saga of My Style Sheet
style.css
body {
font-family: Verdana, arial;
}
.notation-text {
color: #000000;
font-size: 18px;
text-align: center;
margin: 18px;
}
.notation-block-star {
display: table;
margin: 0 auto;
width: inherit;
}
.notation-star {
background-image: url("../images/etoile_grise.png");
background-repeat: no-repeat;
cursor: pointer;
display: table-cell;
float: right;
height: 64px;
width: 64px;
padding: 10 5px;
}
.notation-star:hover,
.notation-star:hover ~ .notation-star {
background-image: url("../images/etoile_jaune.png");
}
.notation-star-selected {
background-image: url("../images/etoile_jaune.png");
background-repeat: no-repeat;
cursor: pointer;
display: table-cell;
float: right;
height: 64px;
width: 64px;
padding: 0 5px;
}
.notation-star-selected ~ .notation-star {
background-image: url("../images/etoile_jaune.png");
}
I attempted a makeover with adjustments to width, height, and even introduced font-size, but alas, the stars remained unyielding in their size.
https://i.sstatic.net/oSMds.png