I want to place chevron-up and chevron-down icons very close to a number, I just can't do it correctly, please help.
This is what I have:
▲
5 Read Post
▼
I want the arrows to be closer to the number (very close). I've arrived to a partial solution, but the problem comes when the number is bigger, I want the arrows to be in the middle of the number, but I get something like this:
▲
534 Read Post
▼
The "partial solution" I have is available in this fiddle.
Also, I can't align a text "Read Post" to the vote's number, you will see in the fiddle.
I'm a backend developer and for now, terrible at CSS, I'd appreciate it if someone can explain me a little about what am I doing wrong.
You could do something like this: http://codepen.io/pageaffairs/pen/aGcyE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<style>
p {
width: 340px;
height: 50px;
font-weight: bold;
}
a, span {display: inline-block; vertical-align: middle;}
span {position: relative; padding: 20px 0;}
span::before, span::after {
position: absolute;
display: block;
width: 100%;
text-align: center;
font-family:'FontAwesome';
}
span::before {
content: "\f077";
top: 0;
}
span::after {
content: "\f078";
bottom: 0;
}
</style>
</head>
<body>
<p><span>255</span> Read Post</p>
</body>
</html>
Using the <p> tag is probably what is forcing your text on to the next line, I would suggest to use divs with float:left, text-align:center and auto margins.
Based on your fiddle, I changed it to this as a starting point, hopefully you can adjust it from here:
HTML:
<a class = "link_wrapper">
<span class = "votes_post">
<i class = "up fa fa-chevron-up"></i>
<div>
255
</div>
<i class = "down fa fa-chevron-down"></i>
</span>
<div class = "text">Read Post.</div>
</a>
CSS:
.link_wrapper{
width: 340px;
height: 50px;
font-weight: bold;
}
.votes_post{
height: 40px;
width: 40px;
float: left;
text-align: center;
}
.votes_post i {
font-weight: lighter;
}
.votes_post div {
margin-left: auto;
margin-right: auto;
}
.text{
width: 300px;
height: 40px;
margin-top: 17px;
margin-left: 5px;
font-weight: bold;
float: left;
}
Related
I am a beginner level at web programming. I am trying to make a clone of the google search page. I achieved to build the structure of the clone website.
First Problem
However, I have trouble with the positioning of the divs. I am using form class to search written text, and I want to add the picture of the google logo above this form with a specific margin. I used divs to divide the page to achieve this. However, when I change the google frame div position all divs are changing with this change. For example, when I change #oneGoogleBar margin, form and #otherlinks is changing. I could achieve to change #otherlinks by changing its margin value but it is not the solid solution (every time do I need to change it, for example (if I have multiple divs this approach will be very tedious).
Second Problem
When I resize (make webpage smaller) the #otherlinks starts to move down. I also did not understand that reason.
I have asked these questions in the same question due to the fact that probably these are beginner-level problems. You can find the code below.
HTML
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="index_css.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<div id="oneGoogleBar">
<iframe id="backgroundImage" frameBorder = "0"
src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</iframe>
</div>
<div id="form_div">
<form action="https://google.com/search" class="form">
<input type ="text" name="q"> <br><br>
<input type ="submit" value="Google Search">
<input type ="submit" value ="I'm Feeling Lucky">
</form>
</div>
<div id = "other_links">
<a href="googleImage.html" class=google_image_page>Google Image Search</a>
<a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
.form{
text-align: center;
padding-top:150px;
}
input[type=submit]{
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
border-radius:inhterit;
color: #3c4043;
font-family: arial,sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
padding-left: 25px;
outline:none;
}
input[type=text]:hover{
border-color:#9DD9F3;
}
input[type=text]{
width : 385px;
height: 25px;
border-radius: 15px;
outline:none;
}
.google_image_page{
font-family: arial,sans-serif;
color:black;
text-decoration:none;
font-size:13px;
}
.google_advanced_page{
font-family: arial,sans-serif;
color:black;
text-decoration:none;
font-size:13px;
}
#other_links{
margin-top : -40%;
margin-left : 80%;
margin-bottom: -85%
}
#oneGoogleBar{
position: relative;
margin-left : 42%;
margin-top: 15%;
max-width:10%;
max-height: 10%
}
Edited:
List of changes:
I couldn't find any 'Google Image Search' in the google.com, so I just assumed that you want it as header. So I placed it on the top.
I changed the name 'index_css.css' to 'style.css'
I changed the name 'oneGoogleBar' to 'one-google-bar'
I changed the name 'form_div' to 'form-div'
I changed the name 'other_links' to 'other-links'
I answer your questions in the same order you asked them:
1- The first element in your Html, is 'one-google-bar'. In Html, first element is above second element, second is above third and... . Basically I mean elements appear on the page, based on their place in your code.\
Your Html Structure:
1) one-google-bar
2) form-div
3) other-links
If you change the place of 'one-google-bar', the place of those below it, also changes.
Solution:
You have to work in order. Start from the top elements, then move down.
List of changes:
I placed 'other-links' above 'one-google-bar', because like I said before, I don't know exactly where you wanted to put it. I assume you want it in the top part of the page.
I removed the 'other-links' from your css. Because this element is already in the top part.
I made some changes in your 'one-google-bar' css file. The changes are as follows:
I removed 'position: relative'. because what is it that you want it to get relative to?
I assume you first gave it 'margin-left: 50%' and since it didn't get placed in the middle (because the image takes some place too) you changed it to 'margin-left: 42%'.
Well there is a neat trick to put the element in the middle:
margin: 0 auto;
With this, you set the top and bottom margin to 0. And browser automatically sets the right and left margin in a way that the element is placed in the middle.
Now below that, change the top and bottom margin as you please.
I also changed 'max-width: 10%' to:
width: fit-content;
Not the right way to use max-width.
2- You said that you don't realize why all elements move when you resize the page.
In your 'one-google-bar', you have:
margin-top: 150px;
That % is the reason this happens. This means add 15% of the current width to the top margin, and since you change the width, it also changes. Thus the whole page moves (because elements are placed in order...).
Solution:
Simply use px instead of %.
List of changes:
I changed 'margin-top: 15%' to:
margin-top: 15%;
Index.html:
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<div id = "other-links">
<a href="googleImage.html" class=google_image_page>Google Image Search</a>
<a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
</div>
<div id="one-google-bar">
<iframe id="backgroundImage" frameBorder = "0"
src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</iframe>
</div>
<div id="form-div">
<form action="https://google.com/search" class="form">
<input type ="text" name="q"> <br><br>
<input type ="submit" value="Google Search">
<input type ="submit" value ="I'm Feeling Lucky">
</form>
</div>
</body>
</html>
style.css:
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
text-align: center;
padding-top: 150px;
}
input[type="submit"] {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
border-radius: inhterit;
color: #3c4043;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
padding-left: 25px;
outline: none;
}
input[type="text"]:hover {
border-color: #9dd9f3;
}
input[type="text"] {
width: 385px;
height: 25px;
border-radius: 15px;
outline: none;
}
.google_image_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
.google_advanced_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
/* #other-links { //REMOVED
margin-top: -40%; //REMOVED
margin-left: 80%; //REMOVED
margin-bottom: -85%; //REMOVED
} */
#one-google-bar {
/* position: relative; //REMOVED
margin-left: 42%; //REMOVED
margin-top: 15%; //REMOVED
max-width: 10%; //REMOVED
max-height: 10%; //REMOVED
*/
width: fit-content; /*ADDED*/
margin: 0 auto; /*ADDED*/
/* margin-top: 15%; //REMOVED*/
margin-top: 150px; /*ADDED*/
}
You have made your html document very complex which is not required. instead of <iframe> you could simply use <img> tag. and in your CSS you have used % for margin property, which is making the alignment messy.
Take a look at this.
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav>
<ul>
<li>Gmail</li>
<li>Images</li>
</ul>
</nav>
<main>
<img
class="logo"
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt=""
/>
<form action="">
<input type="text" /> <br />
<br />
<input type="submit" value="Google Search" />
<input type="submit" value="I'm Felling Lucky" />
</form>
</main>
</body>
</html>
CSS File
body {
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
display: flex;
flex-direction: row-reverse;
}
nav ul li {
margin: 20px;
}
main {
align-items: center;
}
.logo {
display: block;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
form {
text-align: center;
}
input[type="text"] {
margin-top: 20px;
width: 385px;
height: 25px;
border-radius: 15px;
outline: none;
}
You are basically applying margin to each div, so it gets to the place you want it to be. Well that is not a very good practice.
Instead of doing this, simply use a
display: flex, ...
to achieve what you want.
And basically in Html, elements are displayed based on their place in your code. Meaning, if you want to have a header that has 'Google Image Search' in it, Just write it first.
The reason that the place of your elements changes when you resize the page is, well you are using margin allover the place. It is only natural that it happens.
I would avoid using iframe, because there is no reason to use it. Just use a simple img tag in your html.
Index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<main>
<img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google-img" />
<div class="form-div">
<form action="https://google.com/search" class="form">
<input type ="text" id="search-field">
<div>
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</form>
</div>
</main>
</body>
</html>
Style.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
}
main {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
margin-top: 200px;
}
header {
display: flex;
width: 100%;
align-items: right;
justify-content: right;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.form-div {
width: 100%;
margin-top: 35px;
}
.form div {
margin-top: 20px;
}
.form div button {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
}
.form div button:hover {
cursor: pointer;
}
#search-field {
width: 80%;
height: 44px;
border-radius: 24px;
border: 1px solid #dfe1e5;
padding-left: 30px;
}
#search-field:focus {
outline: none;
}
Just some notes:
In Html and css, you don't use camelCaseNaming, you simply put a - between different parts. So oneGoogleBar should be one-google-bar
Don't use iframe.
You shouldn't use <br> for aligning iteams. See how I did it using flex box.
Name your css file, Style.css. There is no rule, but usually that 's the way people usually write their code.
And if you want to build a page that already exists, it's a very good practice to inspect the page. You can learn a ton from it.
And the last but the most important thing: Keep up the good work.
Edited:
List of changes:
I couldn't find any 'Google Image Search' in the google.com, so I just assumed that you want it as header. So I placed it on the top.
I changed the name 'index_css.css' to 'style.css'
I changed the name 'oneGoogleBar' to 'one-google-bar'
I changed the name 'form_div' to 'form-div'
I changed the name 'other_links' to 'other-links'
I answer your questions in the same order you asked them:
1- The first element in your Html, is 'one-google-bar'. In Html, first element is above second element, second is above third and... . Basically I mean elements appear on the page, based on their place in your code.\
Your Html Structure:
1) one-google-bar
2) form-div
3) other-links
If you change the place of 'one-google-bar', the place of those below it, also changes.
Solution:
You have to work in order. Start from the top elements, then move down.
List of changes:
I placed 'other-links' above 'one-google-bar', because like I said before, I don't know exactly where you wanted to put it. I assume you want it in the top part of the page.
I removed the 'other-links' from your css. Because this element is already in the top part.
I made some changes in your 'one-google-bar' css file. The changes are as follows:
I removed 'position: relative'. because what is it that you want it to get relative to?
I assume you first gave it 'margin-left: 50%' and since it didn't get placed in the middle (because the image takes some place too) you changed it to 'margin-left: 42%'.
Well there is a neat trick to put the element in the middle:
margin: 0 auto;
With this, you set the top and bottom margin to 0. And browser automatically sets the right and left margin in a way that the element is placed in the middle.
Now below that, change the top and bottom margin as you please.
I also changed 'max-width: 10%' to:
width: fit-content;
Not the right way to use max-width.
2- You said that you don't realize why all elements move when you resize the page.
In your 'one-google-bar', you have:
margin-top: 150px;
That % is the reason this happens. This means add 15% of the current width to the top margin, and since you change the width, it also changes. Thus the whole page moves (because elements are placed in order...).
Solution:
Simply use px instead of %.
List of changes:
I changed 'margin-top: 15%' to:
margin-top: 15%;
Index.html:
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<div id = "other-links">
<a href="googleImage.html" class=google_image_page>Google Image Search</a>
<a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
</div>
<div id="one-google-bar">
<iframe id="backgroundImage" frameBorder = "0"
src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</iframe>
</div>
<div id="form-div">
<form action="https://google.com/search" class="form">
<input type ="text" name="q"> <br><br>
<input type ="submit" value="Google Search">
<input type ="submit" value ="I'm Feeling Lucky">
</form>
</div>
</body>
</html>
style.css:
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
text-align: center;
padding-top: 150px;
}
input[type="submit"] {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
border-radius: inhterit;
color: #3c4043;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
padding-left: 25px;
outline: none;
}
input[type="text"]:hover {
border-color: #9dd9f3;
}
input[type="text"] {
width: 385px;
height: 25px;
border-radius: 15px;
outline: none;
}
.google_image_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
.google_advanced_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
/* #other-links { //REMOVED
margin-top: -40%; //REMOVED
margin-left: 80%; //REMOVED
margin-bottom: -85%; //REMOVED
} */
#one-google-bar {
/* position: relative; //REMOVED
margin-left: 42%; //REMOVED
margin-top: 15%; //REMOVED
max-width: 10%; //REMOVED
max-height: 10%; //REMOVED
*/
width: fit-content; /*ADDED*/
margin: 0 auto; /*ADDED*/
/* margin-top: 15%; //REMOVED*/
margin-top: 150px; /*ADDED*/
}
I'm trying to make a basic FAQ of sorts using a simple click on element to reveal the answer to the FAQ. Spoiler..
I have found a really handy piece of coding, but everything I try I cannot prevent the mouse hover from making the answer disappear.
I need the answer to remain on the page until the user is ready to click the next FAQ.
I hope someone can help, thank you very much.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p><b>This is an FAQ</b><br />
<p>This is also FAQ click below for the answer</p>
<div class=spoiler><div>
My hidden text
</div></div>
</body>
</html>
.spoiler { display: relative; cursor: pointer; margin-bottom: 10px; margin-top: 10px; }
.spoiler:before { content: "Answer:"; position:absolute; cursor: pointer; font-weight: bold; color: #2C3635; }
.spoiler > div { cursor: default; top: 0px; display: none; position: relative; right: 10px; top: 20px; border: #A6B2A6 1px solid; background: darkgrey; padding: 0px 10px 15px 10px; border-radius: 4px; }
.spoiler > div:before { content: ""; display: block; width: 100%; height: 20px; margin-top: -20px; }
.spoiler:active > div { display: block; }
.spoiler > div:hover { display: block; }
https://jsfiddle.net/g9b3ugzh/
The HTML details and summary elements are perfect for this. The basics without any CSS required are as follows:
<details>
<summary>Answer:</summary>
<p>My hidden text</p>
</details>
JSFiddle demo
You could give the code, it is a JavaScript solution, in the JSFiddle a go.
var spoiler = document.getElementsByClassName('spoiler');
var showSpoiler = function() {
this.classList.add("show-spoiler");
}
for (var i = 0; i < spoiler.length; i++) {
spoiler[i].addEventListener("mouseover", showSpoiler);
}
Had to disable and amend some CSS too though, to make it work:
Took off position: absolute; from .spoiler:before
Took off top declarations from .spoiler > div
Removed the :hover and :active states on .spoiler
Update: I've updated my code (thanks to, Kodos Johnson). But I have another problem with the padding for the background image.
When I tried adding a background image inside my button, the text inside it moves outside the button. Can someone please help me? My code is below:
<div>
<button type="button" id="secondBarButton">See How It Works</button>
</div>
---Update 2: I want to add padding or margin for the image.
#secondBarButton {
float: right;
padding: 5px;
margin: 10px;
background-image: url(images/button.png);
}
I cannot make the text move back inside the button and center.
Forget about using a background image for a simple icon. Use icons from FontAwesome, the particular one used on this button is:
fa-play-circle
SNIPPET
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Button</title>
<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<style>
#btn1 {
position: relative;
width: 300px;
height: 50px;
border-radius: 25px;
background-color: white;
border: 1px solid #0070BA;
font-weight: bold;
font-size: 0.8em;
color: #0070BA;
line-height: 1;
cursor: pointer;
}
.fa {
position: absolute;
left: 2px;
top: -2px;
}
#btn1:hover {
background-color: #0070BA;
border: 1px solid #fff;
color: #fff;
}
</style>
</head>
<body>
<button id="btn1">
<i class='fa fa-4x fa-play-circle'></i> See How It Works
</button>
</body>
</html>
Showing the HTML would help a lot. Looks like your image is forcing a line break. Have u tried sectioning the image and text with col? That might be a quick and dirty fix to your problem
So, I'm generating hundreds and hundreds of seperate divs, all that are styled with:
.box {
width: 1px;
height: 1px;
background-color: #000;
display: inline-block;
vertical-align: top;
line-height: 0;
letter-spacing: 0;
font-size: 1px;
}
However, I get a strange issue I can't seem to fix. As there are hundreds of these divs, they wrap onto a new line (which I want to happen), however it leaves a big gap before creating the new line.
Visit https://jsbin.com/rofihu/1 to see the issue yourself, resize your browser to get the divs to wrap.
If I change the width and height of these divs to something bigger like 50x50, this problem disappears.
Thanks in advance.
You have to put line-height: 0px; in your container and not in .box
if you have no container, use
body {
line-height: 0px;
}
https://jsfiddle.net/ahsv5mxb/
Add line-height:1px; to your .container element.
The line height within the box doesn't matter, but the parent sets the distance between lines of text (think of it like a paragraph with a span; if you reduce the size of the span text, it doesn't affect the distance between the lines in the paragraph.)
boxesToCreate = 0;
boxesMarkup = '';
viewportW = window.innerWidth;
viewportH = window.innerHeight;
function createBoxes(num) {
boxesToCreate = num;
if (boxesToCreate >= 1) {
boxesToCreate -= 1;
boxesMarkup += '<div class="box"></div>';
createBoxes(boxesToCreate);
} else {
$('.container').append(boxesMarkup);
colourBoxes();
}
}
function colourBoxes() {
$('.box').each(function() {
$(this).css('background-color', '#' + Math.floor(Math.random() * 16777215).toString(16));
});
}
createBoxes(200);
.container {
position: relative;
line-height: 1px;
}
.box {
width: 10px;
height: 10px;
background-color: #000;
display: inline-block;
vertical-align: top;
line-height: 1px;
letter-spacing: 0;
font-size: 1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coloured Boxes</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
</div>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</body>
</html>
Use float:left; instead of display:inline-block;
.box {
width: 5px;
height: 5px;
background-color: #000;
float: left;
vertical-align: top;
}
Maybe a margin or padding issue?
If you "inspect" the element, what are the "box properties"?
Or maybe you have some content (even only spaces) inside the div, which might trigger this behavior
.box {
width: 5px;
height: 5px;
background-color: #000;
float: left;
vertical-align: top;
}
I've a question about star-symbols for rating showing. I have code
<style>
.goldstardiv { color: gold; }
.goldgraystardiv { color: khaki; }
.graystardiv { color: gray; }
</style>
<div class="goldstardiv">★</div>
<div class="goldgraystardiv">★</div>
<div class="graystardiv">★</div>
How to show with css a star having a gray left site and yellow right site?
Thank you
Put a div with a half grayed star (width 50% overflow hidden) over the colored one.
Html:
<div class="goldstardiv">
★
<div class="halfstar">★</div>
</div>
Css:
.goldstardiv { color: gold; position: relative; }
.halfstar {
position: absolute;
top: 0;
left: 0;
width: 8px;
color: #666;
overflow: hidden;
}
Half star with is given in pixels, but fiddle around with it to get it in % if you want.
Example:
http://jsfiddle.net/LV7SS/2/
The only way to do this with pure CSS is with a nasty hack like this, which isn't really ideal. This uses a negative margin(margin-left: -104px;) to position the grey div over the gold one.
You would be better off using images and sprites
You can do it by using the content:after property in CSS to display a second gold star over the gray one like this:
<style type="text/css">
.star {
display: inline-block;
width: 20px;
text-align: center;
}
.star.gold { color: gold; }
.star.gold-gray { color: gray; }
.star.gold-gray:after {
display: inline-block;
color: gold;
content: '\2605';
position: absolute;
margin-left: -16px;
width: 8px;
overflow: hidden;
}
.star.gray { color: gray; }
</style>
<div class="star gold">★</div>
<div class="star gold-gray">★</div>
<div class="star gray">★</div>
You do need to be specific about sizes for this to work properly, so that you can correctly set the negative margin on the half-star, and crop it at half-width using overflow:hidden, but it does what you're after.
(I haven't specified font-size in the example, you may want to do that also)
Up-side to this technique is that you don't need additional markup in your html for the half-star, just the correct class.
EDIT
Somehow I pasted the wrong link to my jsFiddle, from a previous version I was still hacking the solution, rather than the working one... Probably deserved the downvote for that, but it does work!
See it working here.
EDIT 2
cimmanon mentioned the stars 'not really being content', which is quite true, but since the question asked for a CSS solution to the problem, I made one that doesn't require a sprite-map with all possible combinations.
Not because I've got anything against sprite maps - I don't - just because I wanted to have a go at it :)
Still including <span> elements for each star (hard to avoid) but aside from that it's all good markup and I assume would work pretty well for a screenreader.
Check it out here.
<style type="text/css">
.stars .label {
width: 1px;
color: transparent;
overflow: hidden;
position: absolute;
}
.star {
display: inline-block;
width: 20px;
text-align: center;
}
.star:before {
display: inline-block;
content: '\2605';
}
.star.on { color: gold; }
.star.half { color: gray; }
.star.half:after {
display: inline-block;
color: gold;
content: '\2605';
position: absolute;
margin-left: -16px;
width: 8px;
overflow: hidden;
}
.star.off { color: gray; }
</style>
<div class="stars">
<span class="label">One and a half start (out of three)</span>
<span class="star on"></span>
<span class="star half"></span>
<span class="star off"></span>
</div>