HTML + CSS | Issue with main content not overlapping with nav bar

Question

I have a main content area, which I want to be centered in the page both vertically and horizontally.

I added a css nav bar, but now the page has scroll bars both vertically and horizontally, and the main div is no longer centered. It appears to be moved to the right and down by the nav bar. I'm trying to have the main sit centrally, and then the nav "overlay" everything else so it doesn't affect the main div's positioning.

I think it has something to do with z-index but changing those values doesn't seem to achieve anything. Could anyone direct me to a resource to learn about the right way to fix this?

Thank you.

(It's all pretty scrappy as I'm just beginning to learn!)

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')

let state = {}

function startGame() {
    state = {};
    showTextNode(1);
}

function showTextNode(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
    textElement.innerText = textNode.text;
    while(optionButtonsElement.firstChild) {
        optionButtonsElement.removeChild(optionButtonsElement.firstChild);
    }

    document.getElementById('image').style.display = "block"
    textNode.imageLink ? document.getElementById('image').style.backgroundImage = `url(${textNode.imageLink})` : document.getElementById('image').style.display = "none";

    textNode.options.forEach(option => {
        if(showOption(option)) {
            const button = document.createElement('button');
            button.innerText = option.text;
            button.classList.add('btn')
            button.addEventListener('click', () => selectOption(option));
            optionButtonsElement.appendChild(button);
        }
    })
}

function showOption(){
    return true;
}

function selectOption(option) {
    const nextTextNodeId = option.nextText;
    state = Object.assign(state, option.setState)
    showTextNode(nextTextNodeId)
}

const textNodes = [
    {
        id: 1,
        text: 'Case Study: BioPharma Expansion',
        options: [
            {
                text: 'Start',
                setState: {},
                nextText: 2
            }
        ]
    },
    {
        id: 2,
        text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
        options: [
            {
                text: "I'd like to know more about BioPharma's revenue",
                setState: {},
                nextText: 3
            },
            {
                text: "I'd like to know more about BioPharma's cost structure",
                setState: {},
                nextText: 3
            }   
        ]
    },
    {
        id: 3,
        text: "BioPharma's revenue has increased year on year by 12% since 2014",
        options: [
            {
                text: "What about costs?",
                setState: {},
                nextText: 4
            }
        ]
    },
    {
        id: 4,
        text: "BioPharma's cost structure is shown below in Figure 1",
        imageLink: "figure1a.png",
        options: [
            {
                text: "Here is some stuff",
            }
        ]
    }
]

startGame();

*, *::before, *::after {
    box-sizing: border-box;
}   

.nav {
    z-index: 1;
}

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
}

.main {
    z-index: 0;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-family: 'Times New Roman', Times, serif;
}

#menuToggle {
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;

    z-index: 2;

    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a {
    text-decoration: none;
    color: white;
    
    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: tomato;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    z-index: 3;

    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: white;
    border-radius: 3px;

    z-index: 2;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}
  

 #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
  

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: none;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

.container {
    width: 1000px;
    height: 90%;
    max-width: 80%;
    background-color: white;
    border-radius: 7px;
    box-shadow: 0 0 10px 2px;
    display: grid;
    grid-template-rows: 60% 40%;
}

.container-lower {
    border-top: 10px solid rgba(0,0,0,1);
    position: relative;
}

.container-upper {
    position: relative;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.btn {
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px 10px;
    width: 400px;
    color: black;
    outline: none;
    font-size: 25px;
    font-family: 'Times New Roman', Times, serif;
}

.btn:hover {
    border-color: grey;
    color: grey;
}

#text {
    font-size: 30px;
    text-align: center;
}

#image {
    width: 650px;
    height: 150px;
    background-repeat: no-repeat;
    margin: 40px auto 0px auto;
    background-size: 650px 150px;
}

.wrapper {
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <script defer src="game.js"></script>
    <title>Case Study 1</title>
</head>

<body>
    <div class="nav">
        <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="#">
                    <li>Home</li>
                </a>
                <a href="#">
                    <li>About</li>
                </a>
                <a href="#">
                    <li>Info</li>
                </a>
                <a href="#">
                    <li>Contact</li>
                </a>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="container-upper">
                <div class="wrapper">
                    <div id="text" class="text">Text</div>
                    <div id="image"></div>
                </div>
            </div>
            <div class="container-lower">
                <div id="option-buttons" class="btn-grid">
                    <button class="btn">Option 1</button>
                    <button class="btn">Option 2</button>
                    <button class="btn">Option 3</button>
                </div>
            </div>
        </div>
    </div>
</body>

AndrewL64 · Answer 1 · 2020-06-21T15:34:45.403

The problem is not with your navbar but with the body of your webpage. Just add margin: 0 and padding: 0 to your body and the scrollbars should disappear.

Check and run the following Code Snippet or this CodePen for a practical example of your webpage with the margin: 0 property added:

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')

let state = {}

function startGame() {
    state = {};
    showTextNode(1);
}

function showTextNode(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
    textElement.innerText = textNode.text;
    while(optionButtonsElement.firstChild) {
        optionButtonsElement.removeChild(optionButtonsElement.firstChild);
    }

    document.getElementById('image').style.display = "block"
    textNode.imageLink ? document.getElementById('image').style.backgroundImage = `url(${textNode.imageLink})` : document.getElementById('image').style.display = "none";

    textNode.options.forEach(option => {
        if(showOption(option)) {
            const button = document.createElement('button');
            button.innerText = option.text;
            button.classList.add('btn')
            button.addEventListener('click', () => selectOption(option));
            optionButtonsElement.appendChild(button);
        }
    })
}

function showOption(){
    return true;
}

function selectOption(option) {
    const nextTextNodeId = option.nextText;
    state = Object.assign(state, option.setState)
    showTextNode(nextTextNodeId)
}

const textNodes = [
    {
        id: 1,
        text: 'Case Study: BioPharma Expansion',
        options: [
            {
                text: 'Start',
                setState: {},
                nextText: 2
            }
        ]
    },
    {
        id: 2,
        text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
        options: [
            {
                text: "I'd like to know more about BioPharma's revenue",
                setState: {},
                nextText: 3
            },
            {
                text: "I'd like to know more about BioPharma's cost structure",
                setState: {},
                nextText: 3
            }   
        ]
    },
    {
        id: 3,
        text: "BioPharma's revenue has increased year on year by 12% since 2014",
        options: [
            {
                text: "What about costs?",
                setState: {},
                nextText: 4
            }
        ]
    },
    {
        id: 4,
        text: "BioPharma's cost structure is shown below in Figure 1",
        imageLink: "figure1a.png",
        options: [
            {
                text: "Here is some stuff",
            }
        ]
    }
]

startGame();

*, *::before, *::after {
    box-sizing: border-box;
}   

.nav {
    
}

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
}

.main {
    z-index: 0;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-family: 'Times New Roman', Times, serif;
}

#menuToggle {
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;

    z-index: 2;

    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a {
    text-decoration: none;
    color: white;
    
    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: tomato;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    z-index: 3;

    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: white;
    border-radius: 3px;

    z-index: 2;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}
  

 #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
  

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: none;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

.container {
    width: 1000px;
    height: 90%;
    max-width: 80%;
    background-color: white;
    border-radius: 7px;
    box-shadow: 0 0 10px 2px;
    display: grid;
    grid-template-rows: 60% 40%;
}

.container-lower {
    border-top: 10px solid rgba(0,0,0,1);
    position: relative;
}

.container-upper {
    position: relative;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.btn {
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px 10px;
    width: 400px;
    color: black;
    outline: none;
    font-size: 25px;
    font-family: 'Times New Roman', Times, serif;
}

.btn:hover {
    border-color: grey;
    color: grey;
}

#text {
    font-size: 30px;
    text-align: center;
}

#image {
    width: 650px;
    height: 150px;
    background-repeat: no-repeat;
    margin: 40px auto 0px auto;
    background-size: 650px 150px;
}

.wrapper {
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

    <div class="nav">
        <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="#">
                    <li>Home</li>
                </a>
                <a href="#">
                    <li>About</li>
                </a>
                <a href="#">
                    <li>Info</li>
                </a>
                <a href="#">
                    <li>Contact</li>
                </a>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="container-upper">
                <div class="wrapper">
                    <div id="text" class="text">Text</div>
                    <div id="image"></div>
                </div>
            </div>
            <div class="container-lower">
                <div id="option-buttons" class="btn-grid">
                    <button class="btn">Option 1</button>
                    <button class="btn">Option 2</button>
                    <button class="btn">Option 3</button>
                </div>
            </div>
        </div>
    </div>

According to the accepted answer on this other SO thread, the reason why margin and padding are not 0 by default is because browsers have different default style-sheets.

Thank you for your answer! Super simple, bit embarrassing :) I asked the other posters this but maybe you can help, I'm wondering why padding/margin don't default to zero, and where they are getting their non-zero value from? — Eoin O'Kane, Jun 21 '20 at 15:22
@EoinO'Kane According to the accepted answer on this other [SO thread](https://stackoverflow.com/questions/5387576/css-margin-0-is-not-setting-to-0), the reason why `margin` and `padding` are not `0` by default is because browsers have different default style-sheets. — AndrewL64, Jun 21 '20 at 15:35
@EoinO'Kane As a matter of fact, let me add that to the answer. — AndrewL64, Jun 21 '20 at 15:35

score 2 · Accepted Answer · answered Jun 21 '20 at 14:47

2

you can set the body padding & margin to 0,

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0
}

this solves your current problem, but may get the same problem again in other divs, what I usually do is to set all paddings and margins to zero. like this

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

You need to learn how to debug your css: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

answered Jun 21 '20 at 14:47

Marik Ishtar

2,899
1
13
27

Ah of course that makes sense, kind of stupid to miss that if I'm honest. I've scanned the link you sent and you're right, I need to use the dev tools properly so I'll have a proper read about css debugging. Is there any particular reason why you have to set the body padding and margin to 0? Why do they not default to 0? Is it being inherited from somewhere? – Eoin O'Kane Jun 21 '20 at 15:20

score 1 · Answer 3 · answered Jun 21 '20 at 14:40

1

Change your css body attributes to the following:

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
    padding: 0px;
    margin: 0px;
}

By setting the padding and margin to 0px for the body, you'll get rid of the scrollbars both vertically and horizontally :)

answered Jun 21 '20 at 14:40

Eric Qvarnström

779
6
21

Hey, thank you so much that's a much simpler fix than I thought :) I am wondering though, why is it the case that padding and margin aren't defaulted to 0. Where are they getting their value from? Is it inherited from somewhere? – Eoin O'Kane Jun 21 '20 at 15:21
1

The padding & margin comes from the browser that you are using. Some browser defaults the padding & margin to 0 while some do not :) As a safe-card, I recommend to always set it to 0, unless you want it of course. Not sure why the browsers have this setting though, maybe something worth looking into :) Please mark the post as complete and upvote relevant answers :) Cheers mate! – Eric Qvarnström Jun 21 '20 at 15:27

HTML + CSS | Issue with main content not overlapping with nav bar

3 Answers3