Highlighted

Unknown padding?

New Here ,
Mar 23, 2018

Copy link to clipboard

Copied

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!WEB.PNG

Moved from Adobe Creative Cloud to Dreamweaver support forum [Moderator]

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;

}

Views

337

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Unknown padding?

New Here ,
Mar 23, 2018

Copy link to clipboard

Copied

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!WEB.PNG

Moved from Adobe Creative Cloud to Dreamweaver support forum [Moderator]

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;

}

Views

338

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 23, 2018 0
Adobe Community Professional ,
Mar 23, 2018

Copy link to clipboard

Copied

.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;

}


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 23, 2018 0
New Here ,
Mar 23, 2018

Copy link to clipboard

Copied

If I do that, the blocks al stack up vertically.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 23, 2018 0
Adobe Community Professional ,
Mar 23, 2018

Copy link to clipboard

Copied

Put the inline-block back again

.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;

}

and add

.container li a {

    margin-left: -4px; 

}

Sorry, I had forgotten about the 4px jump when using inline-block.

Having said that, you are taking a brave step to use inline-block as a layout method. I do not disagree with it, but there are better ways. If we ignore CSS-Grid at this stage, have a look at CSS Layout Methods and Fundamentals Guide | Build Awesome Websites


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 23, 2018 0
Adobe Community Professional ,
Mar 23, 2018

Copy link to clipboard

Copied

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

margin.png

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...

no-margin.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 23, 2018 0
New Here ,
Mar 23, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 23, 2018 0
LEGEND ,
Mar 23, 2018

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 23, 2018 0
New Here ,
Mar 23, 2018

Copy link to clipboard

Copied

You are the man, thank you! It works perfectly now!

Cheers!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 23, 2018 0