Struggling to design a CSS-based five-star rating system?

I have attempted to create a 5-star rating system, but I am having trouble with the stars overlapping. Can someone please help me? Here is my code snippet: http://jsfiddle.net/m3Yw8/1/

<div id="container">
  <div class="star blankstar" id="outer">★</div>
  <div id="inner">
  <div style="width:50%;" class="star goldstar">★</div>
</div>
</div>
/*need 2nd star next to 1st star.*/
<div id="container">
 <div class="star blankstar" id="outer">★</div>
<div id="inner">
   <div style="width:50%;" class="star goldstar">★</div>
</div>
</div>
htmlcss

Answer №1

Position the inner stars within the outer stars and apply position:relative to the outer stars

http://jsfiddle.net/k9RjU/8/

By the way, it is recommended to use classes instead of ids when dealing with multiple elements. IDs should be unique throughout the entire document, including containers, inner, and outer elements.

Answer №2

create a margin on the left side of an element

I adjusted the CSS in your fiddle for the container like so:

#container {
position: relative;
left: 20px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying the TR class appears to be ineffective in this instance

I am attempting to update the TR className using JavaScript. However, for some reason it does not appear to be working properly (please note that it must also work in IE8). <html> <head> <style> tr.test {background-color:#000000; ...

javascriptcss

Move the checkbox to a different position

When I view the file and check box, currently the check box is positioned above the browse control. I want it to be on the left side of it instead. How can I make this adjustment? <div class="form-group"> @Html.LabelFor(model => mod ...

htmlasp.netcssasp.net-mvcasp.net-mvc-4

The value within the style.setProperty function does not get applied

I have a progress bar that dynamically increases based on user input: <div class="progressBarContainer percentBar"> <div class="progressBarPercent" style="--width:${gPercent}" id="${gName}-pbar">< ...

javascripthtmlcssdocument

How to Switch between confirmation message boxes in an aspx.cs page

I am working on a search program that will scan a database for information. My goal is to notify users with a message if the date range exceeds 3 weeks, as searching through all the data might take some time. I have implemented a confirm message box in a ...

c#.netasp.netjavascripthtml

How to export HTML table information to Excel using JQuery and display a Save As dialog box

This script has been an absolute lifesaver for my web application. Huge thanks to sampopes for providing the solution on this specific thread. function exportToExcel() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6& ...

javascriptjqueryhtmlmysqlexcel

Why am I experiencing varying outcomes between createShadowRoot and attachShadow methods?

Recently, I've encountered an issue related to shadow dom while working on a project. After referring to an older tutorial that uses createshadowroot, I realized that this method is now considered deprecated and should be replaced by attachshadow. Un ...

csswebshadow-dom

What steps can I take to ensure the browser only shows the page once it has completely loaded?

I find it frustrating when webpages load slowly and you can see the process happening. In my opinion, it would be more satisfying to wait until everything is fully loaded - scripts, images, and all - before displaying the page. This brings up two questio ...

javascriptcss

What could be causing the overflow of my <table> data from its parent <div> container in Bootstrap?

Currently, I am trying to utilize angular in conjunction with bootstrap to present my data. I have mock data stored within a component and displayed in the html file of that component. However, I am facing an issue where when the table expands in size, it ...

htmlcssangularbootstrap-4

CSS positioning alignment

Could someone please explain to me why changing the position to relative causes the "facebook and Facebook helps you connect and share with the people in your life" text to display at the top of the page? I've only been studying CSS for three days. Th ...

htmlcssfrontend

Issues with the functionality of PHP and CSS are preventing them from functioning

I'm having a problem with my website where the header and footer are affected by the CSS styling, but the body is not. I've tried adjusting the values in the CSS code, but nothing seems to work. Strangely, when I add a background color to the bod ...

phphtmlcss

Make the text appear hazy as it moves behind a see-through object

I'm attempting to create a blurred text effect that transitions behind a semi-transparent container label. I've experimented with combining the backdrop-filter and filter properties along with the filter function blur(), but I haven't been ...

javascripthtmlcssblur

Having trouble with a basic image carousel function?

Currently in the process of developing a basic image carousel for a practice website I'm working on. I've been following this tutorial on YouTube. At the 7:10 mark, the tutorial demonstrates the specific function that I need help with. The tuto ...

javascriptjqueryhtmlcsscarousel

Ways to style the horizontal div using CSS

I am looking to create a horizontal div using CSS that looks like the one shown in the image below. image reference ...

htmlcss

Acquiring the `=` symbol within email HTML

Here is the HTML that I send from my ASP.NET application: <HTML> <BODY> <img src='http://10.1.1.42:8090/EmailLogo/8aaebe52-3758-485f-8c52-7782707a4c66.jpg' /> <br/> <div style='font-family:Arial, Tah ...

htmlasp.net

Incorporate a Selectable Class when selecting a cell in a table

I have a single HTML table. <table id="tbl_1"> <tr> <td>ABCD</td> <td>ABCD</td> </tr> <tr> <td>ABCD</td> <td>ABCD</td> </tr> < ...

jqueryhtmljquery-uijquery-ui-selectable

Validating that all checkboxes have been selected with PHP

I am working with a group of checkboxes and need to determine whether all of them are checked in order to display a message. <label class="control-label col-md-3">L4 Deliverables</label> <?php while($subd_row=$subd_result->f ...

phphtmlajax

Email-box appears in a seemingly "random" location

I am currently engrossed in my informatics project, which involves building a sample dating site. However, I have encountered some difficulties in getting everything to align correctly. Everything was working fine until my email box appeared in the wrong p ...

htmlcsstextboxmarginpadding

How can I set the initial Number of SMS to 1 when the characters are less than or equal to 160?

I am working on a jQuery code that displays the current number of characters being typed, the remaining characters, and also the number of SMS. The rule is that any value between 0 and 160 represents 1 SMS, while any value above that but less than 321 repr ...

javascriptjqueryhtml

Code for eliminating whitespace and displaying items in a list

I am currently in the process of developing a script that will take formatted text input (specifically a list copied and pasted from a Word document, usually bullet-pointed or numbered) in a text-box. During my research, I have experimented with using fun ...

phphtml

What could be causing my JSON product list to not load properly?

My list is not loading and I can't figure out why. I've included my json, jquery, and HTML below. The console isn't showing any errors, but the list is still blank. Any help would be greatly appreciated as I am new to working with json. Than ...

javascriptjqueryhtmljson