How do I fix the text so that it’s straight?
And am I required to set a margin for the first Div?
And am I using padding correctly to move the text?
Or, should I be using margin instead of padding?
<div style="width: 100px; height: 200px; background-color:#FF0092; "></div>
<div style="margin: -200px 0 0 100px; width: 100px; height: 200px; background-color:#FFCA1B;"></div>
<div style="margin: -200px 0 0 200px; width: 100px; height: 200px; background-color:#B6FF00;"></div>
<div style="margin: -200px 0 0 300px; width: 100px; height: 200px; background-color:#228DFF;"></div>
<div style="margin: -200px 0 0 400px; width: 100px; height: 200px; background-color:#BA01FF;"></div>
<div style='font-family: arial; font-size: 25px; color: #0059dd'> FF0092</div>
<div style='padding-left: 117px; margin-top: -24px; font-family: arial; font-size: 25px; color: #0059dd'> FF0092</div>
<div style='padding-left: 217px; margin-top: -24px; font-family: arial; font-size: 25px; color: #0059dd'> FF0092</div>
<div style='padding-left: 317px; margin-top: -24px; font-family: arial; font-size: 25px; color: #0059dd'> FF0092</div>
<div style='padding-left: 417px; margin-top: -28px; font-family: arial; font-size: 25px; color: #0059dd'> FF0092</div>
I just tried this:
<div style='font-family: arial; font-size: 25px; color: #0059dd'> FF0092</div>
<div style='margin: -30px 0 0 110px; font-family: arial; font-size: 25px; color: #0059dd'> FF0092</div>
<div style='margin: -30px 0 0 210px; font-family: arial; font-size: 25px; color: #0059dd'> FF0092</div>
<div style='margin: -30px 0 0 310px; font-family: arial; font-size: 25px; color: #0059dd'> FF0092</div>
<div style='margin: -30px 0 0 410px; font-family: arial; font-size: 25px; color: #0059dd'> FF0092</div>
ronpat
January 15, 2017, 3:01am
3
Have you ever considered taking a formal class in HTML and CSS coding? It’s a highly recommended first step. It leads to a much easier long run.
5 Likes
Still not straight, the text. I’m stuck on that.
<div style="width: 100px; height: 200px; background-color:#FF0092;"></div>
<div style="margin: -200px 0 0 100px; width: 100px; height: 200px; background-color:#FFCA1B;"></div>
<div style="margin: -200px 0 0 200px; width: 100px; height: 200px; background-color:#B6FF00;"></div>
<div style="margin: -200px 0 0 300px; width: 100px; height: 200px; background-color:#228DFF;"></div>
<div style="margin: -200px 0 0 400px; width: 100px; height: 200px; background-color:#BA01FF;"></div>
<div style='margin: 0 0 0 12px; font-family: arial; font-size: 20px; color: #0059dd'> FF0092</div>
<div style='margin: -25px 0 0 112px; font-family: arial; font-size: 20px; color: #0059dd'> FFCA1B</div>
<div style='margin: -25px 0 0 212px; font-family: arial; font-size: 20px; color: #0059dd'> B6FF00</div>
<div style='margin: -25px 0 0 312px; font-family: arial; font-size: 20px; color: #0059dd'> 228DFF</div>
<div style='margin: -25px 0 0 412px; font-family: arial; font-size: 20px; color: #0059dd'> BA01FF</div>
Am I doing something wrong?
I’m putting it on blogger and it’s showing the text all crooked.
Only on blogger it’s showing the text crooked.
ronpat
January 15, 2017, 4:51am
6
Where can you put the code that makes it look normal? Why is Blogger important?
I want to post them as blog posts, for color palettes I come across.
It happens when I use padding instead of margin also.
Because it’s text, I should be using p style, and not div style, right?
Still shows crooked on blogger still
<p style='margin: 0 0 0 12px; font-family: arial; font-size: 20px; color: #0059dd'> FF0092</p>
<p style='margin: -25px 0 0 112px; font-family: arial; font-size: 20px; color: #0059dd'> FFCA1B</p>
<p style='margin: -25px 0 0 212px; font-family: arial; font-size: 20px; color: #0059dd'> B6FF00</p>
<p style='margin: -25px 0 0 312px; font-family: arial; font-size: 20px; color: #0059dd'> 228DFF</p>
<p style='margin: -25px 0 0 412px; font-family: arial; font-size: 20px; color: #0059dd'> BA01FF</p>
Have you measured how many pixels each “crooked” is?
If you can determine that, it may help you to see what CSS is causing the issue.
PaulOB
January 15, 2017, 9:00am
11
It’s because you are trying to drag an element upwards by 25px yet that element has no dimensions that add up to 25px. A piece of text’s height is governed by its line-height/font-size and other properties such as margin and padding so you don’t really know what that height is unless you set it yourself.
Add a line-height and a specific height to your text and then you will be able to drag it up exactly (although setting height on text elements is generally a bad thing to do).
e.g.
<div style='margin: 0 0 0 12px;height:25px;line-height:25px; font-family: arial; font-size: 20px; color: #0059dd'> FF0092</div>
<div style='margin: -25px 0 0 112px; height:25px;line-height:25px;font-family: arial; font-size: 20px; color: #0059dd'> FFCA1B</div>
<div style='margin: -25px 0 0 212px;height:25px;line-height:25px; font-family: arial; font-size: 20px; color: #0059dd'> B6FF00</div>
<div style='margin: -25px 0 0 312px;height:25px;line-height:25px; font-family: arial; font-size: 20px; color: #0059dd'> 228DFF</div>
<div style='margin: -25px 0 0 412px;height:25px;line-height:25px; font-family: arial; font-size: 20px; color: #0059dd'> BA01FF</div>
Of course the code you are using is nonsense in terms of usable web design but we’ve been here before haven’t we
You don’t need magic numbers and you could just float the paired items next to each other and they would line up automatically.
3 Likes
asasass
January 15, 2017, 9:28am
12
Should I change div style, to p style there? Cause it’s text?
asasass
January 15, 2017, 9:39am
13
The code you suggested worked, but maybe someone else might have a better idea since you said, “setting height on text elements generally a bad thing to do.”
Paul already gave you a better idea:
Something like this:
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div><p>FF0092</p></div>
<div><p>FFCA1B</p></div>
<div><p>B6FF00</p></div>
<div><p>228DFF</p></div>
<div><p>BA01FF</p></div>
</div>
CSS
div {width: 100px;
height: 200px;
float: left;
}
.wrap {width: 500px;}
p {color: #0059dd;
text-align: center;
}
.one {background-color:#FF0092;}
.two {background-color:#FFCA1B;}
.three {background-color:#B6FF00;}
.four {background-color:#228DFF;}
.five {background-color:#BA01FF;}
You could remove the divs from around the <p>s in my example, and set the width and float directly on the <p> instead.
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<p>FF0092</p>
<p>FFCA1B</p>
<p>B6FF00</p>
<p>228DFF</p>
<p>BA01FF</p>
</div>
CSS
div {width: 100px;
height: 200px;
float: left;
}
.wrap {width: 500px;}
p {color: #0059dd;
text-align: center;
width: 100px;
float: left;
}
.one {background-color:#FF0092;}
.two {background-color:#FFCA1B;}
.three {background-color:#B6FF00;}
.four {background-color:#228DFF;}
.five {background-color:#BA01FF;}
asasass
January 15, 2017, 10:47am
16
Not going to work since I’m posting it as a blog post.
What do you mean “not going to work”?
If you want to reinsert the styles inline, go ahead. I’ve provided you with valid code which does what you want, but I’m not writing inline styles for you.
I would also venture to suggest that you look for a different blogging platform, as Blogger seems to be making it impossible for you to do anything you wish to do correctly.
2 Likes
PaulOB
January 15, 2017, 11:19am
19
Yes you could do it more semantically and simply like this:
<ul style="list-style:none;margin:0;padding:0;font-size:0;">
<li style="display:inline-block;border-top:200px solid #ff0092;color:#ff0092;font-size:20px;width:100px;text-align:center;">FF0092</li>
<li style="display:inline-block;border-top:200px solid #ffca1b;color:#ffca1b;font-size:20px;width:100px;text-align:center;">FFCA1B</li>
<li style="display:inline-block;border-top:200px solid #b6ff00;color:#b6ff00;font-size:20px;width:100px;text-align:center;">B6FF00</li>
<li style="display:inline-block;border-top:200px solid #228dff;color:#228dff;font-size:20px;width:100px;text-align:center;">228DFF</li>
<li style="display:inline-block;border-top:200px solid #ba01ff;color:#ba01ff;font-size:20px;width:100px;text-align:center;">BA01FF</li>
</ul>
No magic numbers necessary.
AS Technobear said if you can find a way to use external css in blogger the above could be reduced to a few simple classes.
4 Likes
asasass
January 15, 2017, 10:58pm
20
If I wanted to put these colors as a linear-gradient, how would I set that up?
100px width per color
I’m stuck.
<div style="width: 500px;height:200px;background-image: linear-gradient( to right, #ff0092 100px, #ffca1b 100px );"></div>
