HTML + CSS | Проблема с основным контентом, не перекрывающим панель навигации - PullRequest
Новая
       23

HTML + CSS | Проблема с основным контентом, не перекрывающим панель навигации

2 голосов
/ 21 июня 2020

У меня есть основная область содержимого, которую я хочу расположить по центру страницы как по вертикали, так и по горизонтали.

Я добавил css панель навигации, но теперь на странице есть полосы прокрутки как по вертикали, так и по горизонтали , а основной div больше не центрируется. Кажется, он перемещается вправо и вниз панелью навигации. Я пытаюсь расположить основной элемент по центру, а затем навигация «перекрывает» все остальное, чтобы это не влияло на расположение основного div.

Я думаю, что это как-то связано с z-index, но меняется эти ценности, похоже, ничего не достигают. Может ли кто-нибудь направить меня к ресурсу, чтобы узнать о правильном способе исправить это?

Спасибо.

(Это все довольно скучно, поскольку я только начинаю учиться!) 

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>

Ответы [ 3 ]

2 голосов
/ 21 июня 2020

Проблема не в вашем navbar, а в body вашей веб-страницы. Просто добавьте margin: 0 и padding: 0 к своему телу, и полосы прокрутки должны исчезнуть.

Проверьте и запустите следующий фрагмент кода или этот CodePen для практического примера. вашей веб-страницы с добавленным свойством margin: 0: 

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>

Согласно принятому ответу на этот другой поток SO , причина, по которой margin и padding не являются 0 по умолчанию - это потому, что браузеры имеют разные таблицы стилей по умолчанию.

2 голосов
/ 21 июня 2020

вы можете установить заполнение и поле тела равным 0, 

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

это решает вашу текущую проблему, но может снова получить ту же проблему в других div, что я обычно делаю, это устанавливаю все отступы и поля равны нулю. вот так 

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

Вам нужно научиться отлаживать свой css: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

1 голос
/ 21 июня 2020

Измените атрибуты css body на следующие: 

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

Установив отступ и поле на 0 пикселей для тела, вы избавитесь от полос прокрутки как по вертикали, так и по горизонтали:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...