There’s 3 in here:
I instead added manually positioned borders to the blocks.
There’s 3 in here:
I instead added manually positioned borders to the blocks.
Didn’t you say that you want to use only 1?
That was a different code, the one with 3, that’s the one where I added positioned borders to it, which enabled me to remove -3 margin from it. Why you added padding:0 to it, I don’t know what the reason was for that.
I think that I recall that padding having come from some of your earlier code.
To prevent it from wrapping, all I do is change:
.playButton { display: inline-block; }
to
.playButton { display: table-cell; }
Only once, right?
Wait, adding table-cell, increases it’s size, how come?
It’s not a table with tabular data. Stop doing that.
What would you add to it to prevent it from wrapping?
Something like this?
white-space : nowrap; overflow : hidden;
What is wrapping?
This:
I can’t help unless you link to the code, and I must depart soon when my ride arrives.
The longer you take, the worse it gets.
Here:
Move the slider to the right and you’ll see it wraps.
Do you want them to be inaccessible off the screen, when there’s not enough space?
If so, put a div around all of the buttons
<div class="preventWrapping">
...
</div>
And make that div prevent wrapping.
.preventWrapping { white-space: nowrap; }
Simple.
There will be enough space for where it’s going.
Thanks, I didn’t know that’s all that’s required.
<aside>
Are the .playButtons inside a parent container (box)? Is the parent container of the playButtons assigned {display:table;}? If not, the .playButtons should not be assigned {display:table-cell}. The behavior of a {table-cell} depends on its parent being assigned {display:table}. In other words, you cannot make the .playButtons {display:table-cell}s unless they are the first children in a parent box that is {display:table;}.
Remember that a row of table-cells will not wrap.
That behavior should be easy to remember because it is the same as the behavior of an unstyled HTML table.
The CSS table/table-cell properties do not impart an expectation of content.
</aside>
How would I set it up so that only the inner part of the border is clickable? Just the boxes themselves, nothing else.
How it works on below code.
If you put your mouse on both the inner left and right border, they are not clickable, none of them are.
How can I implement that on the 1st code?
My other question is:
If I want each of the play buttons to have a different starting color other than white, how would I set that up? Like, if I wanted one to be blue, another red, orange, etc, etc.
<style>
.playButton { display: inline-block; }
.playButton svg { fill: white; }
.playButton.fm1980s.clicked svg { fill: #1ed760; }
.playButton.adagio.clicked svg { fill: #d7601e; }
.playButton.soundtracks.clicked svg { fill: #d71e95; }
.preventWrapping { white-space: nowrap; }
</style>
The clickable area is defined by the size of the svg box, and the borders in that code example aren’t actually borders, they are a gradient effect that you have applied to the parent. So, make the svg box wider?
There is a name that lets you target one of them and not the others. For example:
.playButton.fm1980s svg { fill: blue; }