Hey guys so my current objective is to make a grid of clickable DIVs that have text within them and link to another website when clicked. Currently, the problem I'm having is that the last DIV in the 2nd row (and the last DIV, overall) is raised slightly above the others in the row, and I'm not quite sure why, nor have I figured out a way to fix it. As a side note, I've also been having trouble centering the set of DIVs within the page. The technique doesn't seem to be working.
Here's a link to the webpage in question: http://thefloodplains.com/TheFloodSharkMain.html
Here's the CSS I'm working with:
div {
color: #00A5D1;
padding-top: 14px;
}
h12 {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
text-decoration-color: #FF8B6F;
}
a {
Text-decoration: none;
border-bottom: dashed 1px;
text-decoration-color: #FF8B6F;
}
a:hover {
Color: #FF8B6F;
border-bottom: solid 1px;
}
.Row
{
display: table;
width: 100%; /*Optional*/
max-width: 960px;
table-layout: fixed; /* Optional*/
border-spacing: 10px; /* Optional */
margin-left: auto;
margin-right: auto;
}
.blockx {
display: inline-block;
width: 290px;
height: 290px;
background-color: #00A5D1;
background-image: url('DownloadMusic2.png');
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
.blocky {
display: inline-block;
width: 290px;
height: 290px;
background-color: #00A5D1;
background-image: url('EPKIcon2.png');
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
.blockz {
display: inline-block;
width: 290px;
height: 290px;
background-color: #00A5D1;
background-image: url('StreamAudio.png');
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
.blocka {
display: inline-block;
width: 290px;
height: 290px;
background-color: #00A5D1;
background-image: url('VideoStream.png');
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
.blockb {
display: inline-block;
width: 290px;
height: 290px;
background-color: #00A5D1;
background-image: url('ContactIcon.png');
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
.blockc {
display: inline-block;
width: 290px;
height: 290px;
background-color: #00A5D1;
background-image: url('Handshake2.png');
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
The following is the HTML I have been using for the DIVs:
<center><div class="container">
<div class="row">
<a href="TheFloodSharkDownloads.html" title="Downloads"><div class="blockx"><a href="TheFloodSharkDownloads.html"><h12>Downloads</h12></a></div></a>
<a href="EPK.html" title="Eletronic Press Kit (EPK)"><div class="blocky"><a href="EPK.html"><h12>EPK</h12></a></div></a>
<a href="http://hyperurl.co/sentimentalshark" title="Stream Audio"><div class="blockz"><a href=""><h12>Stream Audio</h12></a></div></a>
</div>
<div class="row">
<a href="https://www.youtube.com/channel/UCrcvj6Q-V4S-xad_Y_gPTFw/videos" title="Stream Video"><div class="blocka"><a href="https://www.youtube.com/channel/UCrcvj6Q-V4S-xad_Y_gPTFw/videos"><h12>Stream Video</h12></a></div></a>
<a href="Contact-Social.html" title="Contact"><div class="blockb"><a href="Contact-Social.html"><h12>Contact</h12></a></div></a>
<a href="Contribute-Support.html" title="Contribute / Support"><div class="blockc"><a href="Contribute-Support.html"><h12>Contribute / Support</h12></a></div></a>
</div>
</div></center>
Like I said, the last DIV box seems to rise up above the plane/axis of the others. I just need a simple fix (if there is one) to make sure it's even with the others. Hopefully this can be done with ease! Thanks and have a great day / night.
I have fixed your code removed unnecessary css and fixed a bit of html markup as well. I used flexbox to align those 6 divs.
flex-container {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 100%;
}
Here is the working example. Try not to repeat code.