I tried, I couldn’t figure it out.
#36B8F0 #61BE50 #595B60 #C9235C
Here’s the HTML and basic CSS.
You asked for HTML, so there it is.
I wanted the code to look something like this.
<div style="width: 12px; height: 12px; background-color:#36B8F0; ">Blue,</div>
<div style="width: 12px; height: 12px; background-color:#61BE50; ">Green,</div>
<div style="width: 12px; height: 12px; background-color:#C9235C; ">Pink,</div>
<div style="width: 12px; height: 12px; background-color:#595B60; ">Gray,</div>
NO! That’s not what I want.
I got up this far and now I’m stuck.
<div style="width: 12px; height: 12px; background-color:#36B8F0; ">Blue,</div>
<div style="margin: -12px 0px 10px 40px;width: 12px; height: 12px; background-color:#61BE50; ">Green,</div>
<div style="margin: -22px 0px 10px 90px;width: 12px; height: 12px; background-color:#C9235C; ">Pink,</div>
<div style="margin: -22px 0px 10px 135px;width: 12px; height: 12px; background-color:#595B60; ">Gray,</div>
Now I got up this far.
I’m stuck on moving the text infront of the color.
<div style="width: 12px; height: 12px; background-color:#36B8F0; ">Blue,</div>
<div style="margin: -12px 40px;width: 12px; height: 12px; background-color:#61BE50; ">Green,</div>
<div style="margin: -12px 90px;width: 12px; height: 12px; background-color:#C9235C; ">Pink,</div>
<div style="margin: -12px 130px;width: 12px; height: 12px; background-color:#595B60; ">Gray,</div>
Tonight he’s studying, trying to learn to spell JavaScript, so he’s only partly here.
There are 4 groups of code. Each group is only slightly different from the one above it… except the last group which uses CSS.
The first four lines of HTML are yours from post #3.
I was not sure which layout you wanted… colors before the words or colors after the words, colors and words in a row or colors and words vertically aligned, one pair on each row.
So here are my best guesses. You SHOULD be able to move the HTML around to achieve something different if your wish does not match one of these.
The code is very simple and logical.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>colors before words = asasass</title>
<!--
https://jsfiddle.net/ojojsec1/
-->
<style type="text/css">
.blue::before,
.green::before,
.pink::before,
.gray::before {
content:"";
display:inline-block;
width:.75em;
height:.75em;
margin-right:.5em;
}
.blue::before {
background-color:#36B8F0;
}
.green::before {
background-color:#61BE50;
}
.pink::before {
background-color:#C9235C;
}
.gray::before {
background-color:#595B60;
}
p {background-color:#def;}
</style>
</head>
<body>
<p>Your code is first.</p>
<div style="display:inline-block; width:12px; height:12px; background-color:#36B8F0;">Blue,</div>
<div style="display:inline-block; width:12px; height:12px; background-color:#61BE50;">Green,</div>
<div style="display:inline-block; width:12px; height:12px; background-color:#C9235C;">Pink,</div>
<div style="display:inline-block; width:12px; height:12px; background-color:#595B60;">Gray,</div>
<p>Vertically aligned colors before words</p>
<div><span style="display:inline-block; width:.75em; height:.75em; background-color:#36B8F0; margin-right:.5em"></span>Blue,</div>
<div><span style="display:inline-block; width:.75em; height:.75em; background-color:#61BE50; margin-right:.5em"></span>Green,</div>
<div><span style="display:inline-block; width:.75em; height:.75em; background-color:#C9235C; margin-right:.5em"></span>Pink,</div>
<div><span style="display:inline-block; width:.75em; height:.75em; background-color:#595B60; margin-right:.5em"></span>Gray,</div>
<p>A line of words before colors</p>
<span>Blue<span style="display:inline-block; width:.75em; height:.75em; background-color:#36B8F0; margin-left:.5em"></span>,</span>
<span>Green<span style="display:inline-block; width:.75em; height:.75em; background-color:#61BE50; margin-left:.5em"></span>,</span>
<span>Pink<span style="display:inline-block; width:.75em; height:.75em; background-color:#C9235C; margin-left:.5em"></span>,</span>
<span>Gray<span style="display:inline-block; width:.75em; height:.75em; background-color:#595B60; margin-left:.5em"></span></span>
<p>Vertically aligned colors using CSS</p>
<div class="blue">Blue</div>
<div class="green">Green</div>
<div class="pink">Pink</div>
<div class="gray">Gray</div>
</body>
</html>
Just for fun, copy this code to a file and give it an .html suffix and open it in Firefox. Then, using Firefox, Zoom the TEXT ONLY larger and tell me what happens. I expect you to see why I use ems instead of px for font sizes.
1 Like
I was thinking this, yours is way better.
<div style="width: 12px; height: 12px; background-color:#36B8F0; "></div>
<div style="margin: -12px 15px; font-style: normal;font-size: 12px;">Blue,</div>
<div style="margin: -12px 45px;width: 12px; height: 12px; background-color:#61BE50; "></div>
<div style="margin: -12px 60px; font-style: normal;font-size: 12px;">Green,</div>
<div style="margin: -12px 100px;width: 12px; height: 12px; background-color:#C9235C; "></div>
<div style="margin: -12px 115px; font-style: normal;font-size: 12px;">Pink,</div>
<div style="margin: -12px 150px;width: 12px; height: 12px; background-color:#595B60; "></div>
<div style="margin: -12px 165px; font-style: normal;font-size: 12px;">Gray,</div>
2 Likes
Study it. Take it apart. Change things. See what makes it work and what breaks it.
How would I move the box to the left of the words instead of the right?
<span>Blue<span style="display:inline-block; width:.75em; height:.75em; background-color:#36B8F0; margin-left:.5em"></span>,</span>
So it looks like this?
Do you see the comma in the text before the last <span>? Move the color word so it is just before that comma. Then change the CSS {margin-left:.5em} to {margin-right:.5em}.
Lke that?
<span>Blue</span>,</span>
I got it.
<span style="display:inline-block; width:.75em; height:.75em; background-color:#36B8F0; margin-right:.5em"></span>Blue,</span>
Sorry if I confused you. No, you had the color word placed correctly the first time.
Good, that looks correct!
Now do the zoom text-only thing using Firefox.
What border radius do you think this is? The boxes?