CSS Сетка Навбар! Как выровнять 2 деления рядом с серединой и иметь 1 столбец далеко влево и вправо, которые растягиваются на участке сайта? - PullRequest
Новая
       5

CSS Сетка Навбар! Как выровнять 2 деления рядом с серединой и иметь 1 столбец далеко влево и вправо, которые растягиваются на участке сайта?

0 голосов
/ 31 марта 2020

Я довольно новичок в веб-разработке, но мне очень весело. Я просто пытаюсь понять, как я должен сделать это эффективно. Я пытаюсь создать адаптивную навигационную панель, используя сетку CSS, хотя до сих пор я не дошел до адаптивного бита. У меня сейчас 2 деления, navbar (мои навигационные ссылки) и настройки (не совсем уверен, что я Я делаю с этим еще, будет включать такие опции, как выбор темы), мне нужно, чтобы эти 2 div были центрированы и иметь столбец слева и справа, который расширяется, когда окно растянуто достаточно далеко.

Если возможно, я бы также хотел немного помочь с оформлением моих навигационных ссылок, я изо всех сил стараюсь избавиться от подчеркивания, хотя я добавил text-ornament: none; . Это также мой первый раз в StackOverflow, поэтому, пожалуйста, сообщите мне, если я делаю что-то здесь не так.

HTML

<head>
    <title>EminaReads</title>
    <link id="theme" rel="stylesheet" />
</head>

<body onload="CheckTheme()">
    <div hidden id="loading-wrapper">
        <header>

            <nav>
                <ul>
                    <li>
                        <a class="active" href="#">Homepage</a>
                    </li>
                    <li>
                        <a href="#">Follow</a>
                    </li>
                    <li>
                        <a href="#">Info</a>
                    </li>
                </ul>
            </nav>

            <div class="settings">
                <select id="theme-select">
                    <option hidden>Select Theme</option>
                    <option onclick="SwapTheme('./styles/Dark.css')" value="Dark">
                        Dark
                    </option>
                    <option onclick="SwapTheme('./styles/Light.css')" value="Light">
                        Light
                    </option>
                </select>
            </div>

        </header>
        <main>
            <div class="blog">
                <h2>Blog update1</h2>
                <h2>Blog update2</h2>
            </div>
            <aside>
                <p>Discord Link</p>
                <p>Music Player</p>
            </aside>
        </main>
        <footer>
            <p>Testing Footer</p>
        </footer>
    </div>
    <p id="js-alert">JAVASCRIPT</p>
</body>
</html>

CSS

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(119, 119, 119);
}

/* Navigation System */
header {
    position: sticky;
    top: 0px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;

    background-color: rgb(59, 59, 59);
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.25);
}

nav {
    margin: 0;
    padding: 0;
    grid-area: 1 / 2 / 2 / 4;
}

nav li {
    display: inline;
}

nav li a.active {
    background-color: #4caf50;
}
nav li a:hover:not(.active) {
    background-color: #111;
}

/* Settings */
.settings {
    grid-area: 1 / 4 / 2 / 6;
}

/* Content */
main {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
}
.blog {
    grid-area: 2 / 2 / 8 / 7;
}
aside {
    grid-area: 2 / 7 / 8 / 9;
}
footer {
    margin-top: 1000px;
    background-color: grey;
}

Javascript

function CheckTheme() {
    if (localStorage.savedtheme !== null) {
        document
            .getElementById("theme")
            .setAttribute("href", localStorage.savedtheme);
        console.log("if");
    } else {
        document.getElementById("theme").setAttribute("href", "./styles/Dark.css");
        console.log("else");
    }
    console.log("other");
    document.getElementById("loading-wrapper").removeAttribute("hidden");
    document.getElementById("js-alert").style.display = "none";
}

function SwapTheme(style) {
    document.getElementById("theme").setAttribute("href", style);
    localStorage.setItem("savedtheme", style);
}
См. Перо EminaReads от SakuraYagami ( @ SakuraYagami ) на CodePen .

Ответы [ 2 ]

0 голосов
/ 01 апреля 2020

Значение CSS для оформления текста должно выглядеть следующим образом: 

nav li a {
  text-decoration: unset;
}

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

header {
  grid-template-columns: 1fr minmax(100px, 200px) minmax(100px, 200px) 1fr;
}

nav {
  grid-area: 1 / 2 / 2 / 3;
}

.settings {
  grid-area: 1 / 3 / 2 / 4;
}

Я удалил дополнительный столбец, чтобы упростить вещи. minmax означает довольно просто, что элементы в этих ячейках уменьшатся до минимального размера и вырастут до максимального размера. Таким образом, в этом примере, когда ширина страницы составляет менее 400 пикселей, они занимают весь экран, после чего боковые панели входят и заполняют остальную часть экрана в равной степени.

0 голосов
/ 01 апреля 2020

Мне нужно, чтобы эти 2 деления были отцентрированы и чтобы столбик находился в крайнем левом и правом углу, который расширяется, когда окно достаточно растянуто.

Чтобы сделать это, вы Вам нужно будет добавить еще 2 элемента, а затем дать им некоторые размеры, используя grid-area. Помните, что grid может использоваться только с прямыми дочерними элементами элемента, в котором объявлено display: grid.

Что касается удаления подчеркивания, то CSS является правильным, просто убедитесь, что вы указали c достаточно, чтобы вы выбрали именно правильный элемент, используя что-то вроде: 

    nav ul li a {
      text-decoration: none;
    }

Надеюсь, это поможет!

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

Похожие темы

...