Dear Dreamweavers,
I have some trouble with my code and I can't seem to fix it. For some reason there is space between my 'blocks', but I can't seem to get rid of it. Below is my html and my css, I have also added a picture of how it shows. It's supposed to be a grid of 2 by 3, equally divided with 33.33% width and a autoscaling height.
Here is my code:
<!doctype html>
<html>
<head>
<title>RESTLESS</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<nav class="navbar">
<li class="nav">
<a class="nav-active">DASHBOARD</a>
</li>
<li class="nav">
<a class="nav-link" href="index.html">CREDENTIALS</a>
</li>
</nav>
<body class="body">
<div class="white-space"><!--white space--></div>
<div>
<ul class="container">
<li >
<a class="block" href="index.html">
<img class="img" src="images/CMS.jpg">
<span class="img-overlay"></span>
</a>
</li>
<li>
<a class="block" href="index.html">
<img class="img" src="images/HOSTING.jpg">
<span class="img-overlay"></span>
</a>
</li>
<li>
<a class="block" href="index.html">
<img class="img" src="images/CMS.jpg">
<span class="img-overlay"></span>
</a>
</li>
<li>
<a class="block" href="index.html">
<img class="img" src="images/HOSTING.jpg">
<span class="img-overlay"></span>
</a>
</li>
<li>
<a class="block" href="index.html">
<img class="img" src="images/CMS.jpg">
<span class="img-overlay"></span>
</a>
</li>
<li>
<a class="block" href="index.html">
<img class="img" src="images/HOSTING.jpg">
<span class="img-overlay"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
And here is my CSS:
a.nav-link {
display: inline;
font-family: 'Open Sans', sans-serif;
font-weight: 200;
color: #333333;
letter-spacing: 1px;
font-size: 18px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
.nav-icon {
display: inline;
padding-left: 5px;
padding-right: 5px;
width: 20px;
position: fixed;
right: 10px;
}
.nav {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
a.nav-active {
display: inline;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #EA3D3D;
letter-spacing: 1px;
font-size: 18px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
a.nav-link:link {
display: inline;
font-family: 'Open Sans', sans-serif;
font-weight: 200;
color: #333333;
letter-spacing: 1px;
font-size: 18px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
a.nav-link:hover {
display: inline;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #333333;
letter-spacing: 1px;
font-size: 18px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
.navbar {
background-color: white;
padding: 20px;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
}
.body {
background-color: #FFFFFF;
position: fixed;
padding: 0;
width: 100%;
margin: 0;
}
.white-space {
padding-bottom: 70px;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 0;
list-style: none;
background-color: #000;
}
.container li {
display: inline-block;
width: 33.33%;
vertical-align: middle;
box-sizing: border-box;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.block {
display: block;
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
}
.img {
display: block;
width: 100%;
height: auto;
border: none;
padding: 0;
margin: 0;
}
.img-overlay {
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: auto;
background: url(images/CMS-ROLL.jpg);
background-size: 100%;
opacity: 0;
transition: all 0.6s;
}
.container li:hover .img-overlay {
opacity: 1;
}
Can someone shine a light on my issue? Thank you very much in advance!
Moved from Adobe Creative Cloud to Dreamweaver support forum [Moderator]
1 Correct answer
Use flexbox, its the way to go these days AND its simple:
.container {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.container li {
width: 33.33%;
background-color: #ccc;
list-style: none;
}
@media screen and (max-width: 760px) {
.container li {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.container li {
width: 100%;
}
}
.container li a img {
display: block;
}
7
Replies
what I like better when using inline-block for removing the in-between pixel, is just to remove the white space in the HTML.. to better make it clear for newbie... just create a blank HTML document
paste this BODY's content
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
then in the HEAD add those styles CSS
<style>
* {margin:0;padding:0;}
.a {background-color:#F96;}
.b {background-color:#9C6;}
.c {background-color:#69C;}
div { display:inline-block; width:33.33%;height:100px;}
</style>
display the rendering page... you will see the bug's non sollicited margin around the DIV
now replace the HTML by the following one
<div class="a"></div><div class="b"></div><div class="c"></div>
which just remove the in between DIV white space...
now the rendering display what was expected in the first layout... the fake margin disappear...
Alright, thank you! We are one step further (see image)
The space is gone, but it still doesn't seem to fit 3 images horizontally. all of them are set to 33.33% width.
AdChoices