How come:
margin: 45px 0 0;
Is better than:?
margin-top: 45px;
Why is writing it one way better or more preferred over the other?
Because in my example the wrapper is a ul which comes with default top,.bottom and left margins (in some browsers). Therefore I needed to reset all the margins to zero along with the padding which some browsers use for the bullet indentation.
Also shorthand is often less code but you just have to make sure you don’t overwrite something when you didn’t mean to
2 Likes
Thanks a lot.
Is height allowed to be removed on this one?
But then what would get added to it instead?
.wraph {
/*height: 606px;*/
}
Yes we’ve done this one about 5 times now:)
It’s the bottom margin on the last 3 items.
.wraph li:nth-of-type(n+7) a {margin-bottom:0}
We went through this on the initial thread. 
1 Like
If I were to remove the background property from one of these, which would I remove it from?
i.e., which property should it stay on?
.wraph a {
float: left;
width: 198px;
height: 198px;
margin: 0 0 3px 0;
color: transparent;
background: rgba(0, 0, 0, 0.2);
}
.wraph svg {
cursor: pointer;
fill: transparent;
background: rgba(0, 0, 0, 0.2);
}
I think you can remove it from either as they both seem to work. Of course you will need to double the opacity if only using one as it will appear lighter.
1 Like
How come this one is darker
Only:
.wraph a {
float: left;
width: 198px;
height: 198px;
margin: 0 0 3px 0;
color: transparent;
background: rgba(0, 0, 0, 0.2);
}
Than this one?
Only
.
wraph svg {
cursor: pointer;
fill: transparent;
background: rgba(0, 0, 0, 0.2);
}
In order for the background to be equal to each other they both would need to be given it, or double it up on one of then like you said.
Yes exactly as I said.
Double the opacity from 0.2 to 0.4
.wraph svg {
background: rgba(0, 0, 0, 0.4);
}
I don’t think I could have been any clearer.
(Note your second demo is badly broken and the items are going vertically down the page because you missed some important styling out.)
1 Like
Those weren’t my final codes, I saved the good ones.
Would I be able to remove any, or all of these margins?
Same code, videos instead of links.
It may not be possible to do in this situation.
.wrap .playa,
.playinga {
margin: 0;
}
.wrap .playb,
.playingb {
margin: 0 201px 0;
}
.wrap .playc,
.playingc {
margin: 0 402px 0;
}
.wrap .playd,
.playingd {
margin: 201px 0 0;
}
.wrap .playe,
.playinge {
margin: 201px 201px 0;
}
.wrap .playf,
.playingf {
margin: 201px 402px 0;
}
.wrap .playg,
.playingg {
margin: 402px 0 0;
}
.wrap .playh,
.playingh {
margin: 402px 201px 0;
}
.wrap .playi,
.playingi {
margin: 402px 402px 0;
}
.wrap .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
fill: transparent;
}
<div class="wrap">
<svg class="playa" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
</svg>
<div class="hide">
<!--<iframe class="js-playera .playinga" src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&autoplay=0&controls=1&iv_load_policy=3&cc_load_policy=0&fs=0&disablekb=1&enablejsapi=1" frameborder="0" allow="encrypted-media"></iframe>-->
<div class="video playinga" data-id="M7lc1UVf-VE"></div>
</div>
<svg class="playb" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
</svg>
<div class="hide">
<div class="video playingb" data-id="M7lc1UVf-VE"></div>
</div>
<svg class="playc" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
</svg>
<div class="hide">
<div class="video playingc" data-id="M7lc1UVf-VE"></div>
</div>
<svg class="playd" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
</svg>
<div class="hide">
<div class="video playingd" data-id="M7lc1UVf-VE"></div>
</div>
<svg class="playe" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
</svg>
<div class="hide">
<div class="video playinge" data-id="M7lc1UVf-VE"></div>
</div>
<svg class="playf" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
</svg>
<div class="hide">
<div class="video playingf" data-id="M7lc1UVf-VE"></div>
</div>
<svg class="playg" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
</svg>
<div class="hide">
<div class="video playingg" data-id="M7lc1UVf-VE"></div>
</div>
<svg class="playh" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
</svg>
<div class="hide">
<div class="video playingh" data-id="M7lc1UVf-VE"></div>
</div>
<svg class="playi" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
</svg>
<div class="hide">
<div class="video playingi" data-id="M7lc1UVf-VE"></div>
</div>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
Ask yourself what role these margins are playing. Then consider what would happen if you removed them. If you can’t work it out, comment out the margins in the code, one rule at a time, and see what happens.
Why do you want to remove the margins?
That’s how it was done here, but this was using only links:
A totally different setup than using videos.
<div class="wraph ">
<ul class="nav">
<li> <a href="" target="_blank">
<svg class=" playa" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg></a></li>
<li> <a href="" target="_blank">
<svg class="playb" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg></a></li>
<li><a href="" target="_blank">
<svg class="playc" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg></a></li>
<li> <a href="" target="_blank">
<svg class="playd" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg></a></li>
<li> <a href="" target="_blank">
<svg class="playe" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg></a></li>
<li> <a href="" target="_blank">
<svg class="playf" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg></a></li>
<li> <a href="" target="_blank">
<svg class="playg" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg></a></li>
<li> <a href="" target="_blank">
<svg class="playh" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg></a></li>
<li> <a href="" target="_blank">
<svg class="playi" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg></a></li>
</ul>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
Yes, it has a different HTML structure.
You cannot simply pick and mix CSS. The rules are closely tied to the structure of your HTML, so what works in one situation will not work in another. You need to understand your code, so you know what each rule does and how they interact.
You haven’t explained why you want to remove the margins.
I removed the a tags here and put in the videos.
Margins removed.
But only the first box is opening for some reason.
Compared to the working version:
<div class="wraph">
<ul class="nav">
<li>
<svg class="playa" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playinga" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playb" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingb" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playc" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingc" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playd" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingd" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playe" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playinge" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playf" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingf" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playg" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingg" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playh" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingh" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playi" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingi" data-id="M7lc1UVf-VE"></div>
</div>
</li>
</ul>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
It works here like this, but now margin is added back in.
.wraph .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
fill: transparent;
}
.wraph .playa,
.playinga {
margin: 0;
}
.wraph .playb,
.playingb {
margin: 0 201px 0;
}
.wraph .playc,
.playingc {
margin: 0 402px 0;
}
.wraph .playd,
.playingd {
margin: 201px 0 0;
}
.wraph .playe,
.playinge {
margin: 201px 201px 0;
}
.wraph .playf,
.playingf {
margin: 201px 402px 0;
}
.wraph .playg,
.playingg {
margin: 402px 0 0;
}
.wraph .playh,
.playingh {
margin: 402px 201px 0;
}
.wraph .playi,
.playingi {
margin: 402px 402px 0;
}
<div class="wraph">
<ul class="nav">
<li>
<svg class="playa" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playinga" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playb" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingb" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playc" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingc" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playd" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingd" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playe" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playinge" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playf" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingf" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playg" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingg" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playh" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingh" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playi" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingi" data-id="M7lc1UVf-VE"></div>
</div>
</li>
</ul>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
Unless you can explain clearly what you are trying to achieve, it is unlikely anybody will be able to assist you.
As we’ve explained many, many times, there are generally multiple ways to code the same thing. Which you choose will usually depend on the larger picture - what else is going on in your page.
You have several working code examples. Good.
Why are you trying to combine elements from one into another? What do you want to achieve with this? If you can tell us what the end goal is, we can probably help you, but you can’t simply pick and mix elements from different set-ups and expect them to work together.
Removing the need for this:
.wraph .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
fill: transparent;
}
.wraph .playa,
.playinga {
margin: 0;
}
.wraph .playb,
.playingb {
margin: 0 201px 0;
}
.wraph .playc,
.playingc {
margin: 0 402px 0;
}
.wraph .playd,
.playingd {
margin: 201px 0 0;
}
.wraph .playe,
.playinge {
margin: 201px 201px 0;
}
.wraph .playf,
.playingf {
margin: 201px 402px 0;
}
.wraph .playg,
.playingg {
margin: 402px 0 0;
}
.wraph .playh,
.playingh {
margin: 402px 201px 0;
}
.wraph .playi,
.playingi {
margin: 402px 402px 0;
}
I was able to get this far:
Now only these margins are left to be removed.
Is this possible to do?
I don’t think it is.
.wraph .playinga {
margin: 0;
}
.wraph .playingb {
margin: 0 201px 0;
}
.wraph .playingc {
margin: 0 402px 0;
}
.wraph .playingd {
margin: 201px 0 0;
}
.wraph .playinge {
margin: 201px 201px 0;
}
.wraph .playingf {
margin: 201px 402px 0;
}
.wraph .playingg {
margin: 402px 0 0;
}
.wraph .playingh {
margin: 402px 201px 0;
}
.wraph .playingi {
margin: 402px 402px 0;
}
<div class="wraph">
<ul class="nav">
<li>
<svg class="playa" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playinga" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playb" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingb" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playc" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingc" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playd" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingd" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playe" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playinge" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playf" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingf" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playg" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingg" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playh" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingh" data-id="M7lc1UVf-VE"></div>
</div>
</li>
<li>
<svg class="playi" height="198" viewbox="8.5 -12.2 7 48.49" width="198">
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="hide">
<div class="video playingi" data-id="M7lc1UVf-VE"></div>
</div>
</li>
</ul>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.