Like this?
How would I nest the group of div tags to the li element?
How exactly would this be done?
I’m stuck on this.
<li class="grade"><a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a></li>
</ul>
<div class="content">
<div class="left-background"></div>
<div class="left-border"></div>
<div class="middle-background"></div>
<div class="right-border"></div>
<div class="right-background"></div>
</div>
I almost got it working here:
<li class="grade">
<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
<div class="content">
<div class="left-background"></div>
<div class="left-border"></div>
<div class="middle-background"></div>
<div class="right-border"></div>
<div class="right-background"></div>
</div>
</a>
</li>
</ul>
I think I did it correctly here:
.content {
position: relative;
top: -3px;
left: -3px;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 3px solid #0059dd;
}
<li>
<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
<div class="content">
<div class="left-background"></div>
<div class="left-border"></div>
<div class="middle-background"></div>
<div class="right-border"></div>
<div class="right-background"></div>
</div>
</a>
</li>
</ul>
I don’t understand why
top: -3px;
left: -3px;
Need to be in this code.
.content {
position: relative;
top: -3px;
left: -3px;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 3px solid #0059dd;
}
The code that uses linear-gradient doesn’t use those positions at all.
.wrape .grade a {
position: relative;
border: 3px solid #0059dd;
background-image: linear-gradient( to right, transparent 0, transparent 12px, transparent 12px, transparent 15px, rgba(255, 255, 255, 0.5) 15px, rgba(255, 255, 255, 0.5) 29px, transparent 29px, transparent 32px, transparent 32px, transparent 44px);
}
Did I set this up right? @Ray.H
I think I may have just figured it out.
.wrape .grade a {
position: relative;
border: 3px solid #0059dd;
background:none;
}
.content {
width: 50px;
height: 50px;
}
.left-background {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100%;
background: rgba(0, 255, 255, 0.5);
}
.left-border {
position: absolute;
top: 0;
left: 12px;
width: 3px;
height: 100%;
background: #0059dd;
}
.middle-background {
position: absolute;
top: 0;
left: 15px;
width: 14px;
height: 100%;
background: rgb(50, 139, 77, 0.5);
}
.right-border {
position: absolute;
top: 0;
left: 29px;
width: 3px;
height: 100%;
background: #0059dd;
}
.right-background {
position: absolute;
top: 0;
left: 32px;
width: 12px;
height: 100%;
background: rgba(255, 0, 255, 0.5);
}
<li class="grade">
<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
<div class="content">
<div class="left-background"></div>
<div class="left-border"></div>
<div class="middle-background"></div>
<div class="right-border"></div>
<div class="right-background"></div>
</div>
</a>
</li>
</ul>
Yes, that does work.
Your 50px / 50px dimensions are already set on your anchors so there is no need to restate that.
Your .content div fills it’s parent’s width since it is a block element. Then set it’s height to 100%.
That way if you ever change anchor dimensions your code still works the same.
.wrape .grade a {
border: 3px solid #0059dd;
background:none;
}
.content {
/*display:block;/* by default - same as width 100%*/
height: 100%;
position: relative; /*containing block*/
}
You do realize that you have enough divs in there to build a website with 
All for what, three color stripes that were done with linear gradients earlier.
What if I deleted/removed content?
What are your thoughts on this?
.content {
/*display:block;/* by default - same as width 100%*/
height: 100%;
position: relative; /*containing block*/
}
As I understand it,
The relative from this rule-set is passed down to the lower div tags, which are its children.
.wrape .grade a {
position: relative;
Therefore, .content is no-longer needed, or necessary.
Right?
With .content removed:
.wrape .grade a {
position: relative;
border: 3px solid #0059dd;
background: none;
}
.left-background {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100%;
background: rgba(0, 255, 255, 0.5);
}
.left-border {
position: absolute;
top: 0;
left: 12px;
width: 3px;
height: 100%;
background: #0059dd;
}
.middle-background {
position: absolute;
top: 0;
left: 15px;
width: 14px;
height: 100%;
background: rgb(50, 139, 77, 0.5);
}
.right-border {
position: absolute;
top: 0;
left: 29px;
width: 3px;
height: 100%;
background: #0059dd;
}
.right-background {
position: absolute;
top: 0;
left: 32px;
width: 12px;
height: 100%;
background: rgba(255, 0, 255, 0.5);
}
<li class="grade">
<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
<div class="left-background"></div>
<div class="left-border"></div>
<div class="middle-background"></div>
<div class="right-border"></div>
<div class="right-background"></div>
</a>
</li>
</ul>
No, it’s not inherited by children. Besides that the children are now absolute by your instructions.
Yeah, you can do that too. All you needed was a relative parent with the correct dimensions 50 x 50 and your anchor does that.
But still, you have five empty divs trashing your html for no real good reason. You’ve already seen how this can be done very cleanly with linear-gradients.
What do you mean?
relative removed:
.wrape .grade a {
border: 3px solid #0059dd;
background: none;
}
relative added:
.wrape .grade a {
position: relative;
border: 3px solid #0059dd;
background: none;
}
Just because you added or removed it has nothing to do with children inheriting position:relative.
The absolute children NEED it to establish their containing block. That has nothing to do with inheritance.
That was discussed miles ago in your other threads.
If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
Then this would be the right way then?
Removing relative from this rule-set
.wrape .grade a {
border: 3px solid #0059dd;
background: none;
}
And keeping it on this rule set.
.content {
position: relative;
height: 100%;
}
<li class="grade">
<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
<div class="content">
<div class="left-background"></div>
<div class="left-border"></div>
<div class="middle-background"></div>
<div class="right-border"></div>
<div class="right-background"></div>
</div>
</a>
</li>
</ul>
<div class="content">
Relative:
These would be the contents children
Absolute:
<div class="left-background"></div>
<div class="left-border"></div>
<div class="middle-background"></div>
<div class="right-border"></div>
<div class="right-background"></div>
Which is exactly how you showed me how to do it here.
#86
Yes, I know.
Just finding, figuring out different ways to do it.
It turns out there is not just one way.
And I never knew how to do this before, and so I ended up learning something new in the process.
<li class="grade">
<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
<div class="content">
<div class="left-background"></div>
<div class="left-border"></div>
<div class="middle-background"></div>
<div class="right-border"></div>
<div class="right-background"></div>
</div>
</a>
</li>
</ul>
No, you can do it the way you pointed out in post # 87
That eliminates the content div
This is: Which is wrong you said:
#87
This is: This would be right?
#91
The content div is still there, what are you seeing?
.wrape .grade a {
border: 3px solid #0059dd;
background: none;
}
.content {
position: relative;
height: 100%;
}
.left-background {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100%;
background: rgba(0, 255, 255, 0.5);
}
<li class="grade">
<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
<div class="content">
<div class="left-background"></div>
<div class="left-border"></div>
<div class="middle-background"></div>
<div class="right-border"></div>
<div class="right-background"></div>
</div>
</a>
</li>
</ul>
Wait a second, I think I misread what you wrote.
What you mean is, it can be done either way, and that there is no right way.
First Way:
Yeah, you can do that too. All you needed was a relative parent with the correct dimensions 50 x 50 and your anchor does that.
Meaning:
The a element carries with it a dimension of 50 x 50.
Therefore, making the .content not needed.
The a is the anchor you’re referring to.
Do I have the understanding right now?
.wrape .grade a {
position: relative;
border: 3px solid #0059dd;
background: none;
}
.left-background {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100%;
background: rgba(0, 255, 255, 0.5);
}
Second Way:
.wrape .grade a {
border: 3px solid #0059dd;
background: none;
}
.content {
position: relative;
height: 100%;
}
.left-background {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100%;
background: rgba(0, 255, 255, 0.5);
}
Here I can remove width:
And put height to
100%
Right?
.covere {
width: 266px;
height: 174px;
background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
to this:
.covere {
height: 100%;
background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
Yes, because your dimensions are already set on the main parent
.wrape { position: relative; width: 266px; height: 174px; margin-top: 8px; overflow: hidden; }
I just noticed something in this code.
The 2 lines going down are overlapping the border.
How would I adjust the code so that does not happen?
So it looks like this instead.
So the lines are not sitting on top of the border.
Make the lines the correct length.
Your container is 174px high, including a 3px border top and bottom. If you don’t want the lines to overlap the border, then they need to be the correct length to fit inside it.
Were you able to that?
And it worked for you?