I have a question if someone can help me with this.
Should wrap be on all these classes, or should links be on all of them?
or Should both be used?
Which would you say to use, and why?
On the other code:
nav was placed only on these:
<div class="wrape">
<div class="covere" title="OPEN"></div>
<ul class="nave">
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
float: left;
}
Would this div class be the equivalent of nav?
Which is how @PaulOB had originally set it up. #182
<div class="linkse">
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<div class="linkse">
.linkse {
margin: 0;
padding: 0;
}
.linkse a {
float: left;
}
If this would be the case, then this would point to the 3rd Way I listed on here.
1st Way
<div class="wrape">
<div class="covere" title="OPEN"></div>
<div class="linkse">
.wrape {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
}
.linkse a {
float: left;
width: 50px;
height: 50px;
margin: 0 4px 12px 0;
color: transparent;
background: rgba(0, 0, 0, .2);
border: 3px solid #0059dd;
box-sizing: border-box;
}
.linkse a:hover {
border: 3px solid red;
}
.linkse a:nth-of-type(5n) {
margin-right: 0;
}
.linkse a:nth-of-type(8) {
opacity: 0;
border: none;
background: none;
}
.linkse a:nth-of-type(15) {
position: relative;
height: 50px;
width: 50px;
background: none;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.linkse {
margin: 0;
padding: 0;
}
.linkse a {
float: left;
}
2nd Way:
https://jsfiddle.net/jq18evLs/81/
<div class="wrape">
<div class="covere" title="OPEN"></div>
<div class="linkse">
.wrape {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
}
.wrape a {
float: left;
width: 50px;
height: 50px;
margin: 0 4px 12px 0;
color: transparent;
background: rgba(0, 0, 0, .2);
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrape a:hover {
border: 3px solid red;
}
.wrape a:nth-of-type(5n) {
margin-right: 0;
}
.wrape a:nth-of-type(8) {
opacity: 0;
border: none;
background: none;
}
.wrape a:nth-of-type(15) {
position: relative;
height: 50px;
width: 50px;
background: none;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrape {
margin: 0;
padding: 0;
}
.wrape a {
float: left;
}
3rd Way Uses Both
https://jsfiddle.net/jq18evLs/85/
<div class="wrape">
<div class="covere" title="OPEN"></div>
<div class="linkse">
.wrape {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
}
.wrape a {
float: left;
width: 50px;
height: 50px;
margin: 0 4px 12px 0;
color: transparent;
background: rgba(0, 0, 0, .2);
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrape a:hover {
border: 3px solid red;
}
.wrape a:nth-of-type(5n) {
margin-right: 0;
}
.wrape a:nth-of-type(8) {
opacity: 0;
border: none;
background: none;
}
.wrape a:nth-of-type(15) {
position: relative;
height: 50px;
width: 50px;
background: none;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.linkse {
margin: 0;
padding: 0;
}
.linkse a {
float: left;
}
In the code here I just changed links to nav.
https://jsfiddle.net/jq18evLs/104/
<div class="wrape">
<div class="covere" title="OPEN"></div>
<div class="nav">
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
.wrape {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
}
.wrape a {
float: left;
width: 50px;
height: 50px;
margin: 0 4px 12px 0;
color: transparent;
background: rgba(0, 0, 0, .2);
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrape a:hover {
border: 3px solid red;
}
.wrape a:nth-of-type(5n) {
margin-right: 0;
}
.wrape a:nth-of-type(8) {
opacity: 0;
border: none;
background: none;
}
.wrape a:nth-of-type(15) {
position: relative;
height: 50px;
width: 50px;
background: none;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.nav {
margin: 0;
padding: 0;
}
.nav a {
float: left;
}