• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak ustawić wysokość dla elementu nav?

VPS Starter Arubacloud
0 głosów
157 wizyt
pytanie zadane 28 stycznia 2023 w HTML i CSS przez Yorweth Obywatel (1,310 p.)

Cześć,

Mam drobny problem ponieważ nie wiem w jaki sposób ustawić wysokość dla moich elementów nawigacyjnych.

Teoretycznie mógłbym wypełnić to polo poprzez padding, ale moim zdaniem to nie rozwiązuje sprawy, szukam rozwiązania troszkę bardziej skalowalnego.

Nie rozumiem też dlaczego <header> zakrył całość miejsca, a <nav> o wiele mniej. Chodzi o dzieci wewnątrz? 

Da się to jakoś ładnie zrobić, aby skalowanie działało sprawnie?

Ogółem również prosiłbym o porady jakie metody potem użyć, aby strona lepiej się skalowała do wielkości ekranu :) 

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> 
<!-- ikona home -->





<link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="main-content">
        <section class="test">
            <header>
                <h1 class="dwa">Tytuł główny strony</h1>
                <p class="logo-subtext">Moja strona</p>
            </header>
            <nav class="site_nav">
                <ul class="navigation">
                    <li class="nav_item">
                        <a href="Index.html" class="a_item">
                            <i class="material-symbols-outlined">
                                home
                            </i>
                            Home
                        </a>
                    </li>
                    <li class="nav_item">
                        <a href="Index.html" class="a_item">
                            <i class="material-symbols-outlined">
                                home
                            </i>
                            Home
                        </a>
                    </li>
                    <li class="nav_item">
                        <a href="Index.html" class="a_item">
                            <i class="material-symbols-outlined">
                                home
                            </i>
                            Home
                        </a>
                    </li>
                    <li class="nav_item">
                        <a href="Index.html" class="a_item">
                            <i class="material-symbols-outlined">
                                home
                            </i>
                            Home
                        </a>
                    </li>
                    <li class="nav_item">
                        <a href="Index.html" class="a_item">
                            <i class="material-symbols-outlined">
                                home
                            </i>
                            Home
                        </a>
                    </li>
                </ul>
            </nav>
        </section>
        <section class="content">
                
        </section>
    </div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Cairo+Play:wght@800&display=swap');
:root{
    --bg_purple:rgb(51, 0, 51);
    --bg_blue:rgb(9, 0, 73);
    --bg_red:rgb(107, 7, 7);
    --bg_grey:rgba(32,32,46, 0.8);
    --main_color:rgb(123, 58, 190);
}
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    width:100vw;
    height: 100vh;
    background: 
    linear-gradient(215deg, var(--bg_purple), rgba(0, 0, 0, 0.4) 75%),
    linear-gradient(135deg, var(--bg_blue), rgba(0, 0, 0, 0.4) 75%),
    linear-gradient(360deg, var(--bg_red), rgba(0, 0, 0, 0.4) 75%);
    display: flex;
	justify-content: center;
	align-items: center;
    overflow: hidden;
    color: white;
}
.main-content{
    display: grid;
    grid-template-rows: [panel] 15% [content] auto;
    width:70%;
    height: 80%;
    background: var(--bg_grey);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4rem 1px;
    border-radius:2rem;
    padding: 0rem 2rem 1rem 2rem;
    backdrop-filter: blur(5px);
}
.test{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid white;
}
.dwa{
    font-family: 'Cairo Play', cursive;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 5px 5px 5px var(--main_color);
}
.logo-subtext{
    font-size: 1.3rem;
    color: var(--main_color);
    font-family: 'Courier New';
    font-weight: bold;
    padding-left:65px;
    margin-top:-20px;
}

.material-symbols-outlined { 
    font-size: 2rem; 
}

.navigation{
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    gap:10px;
}
.nav_item a{
    text-decoration: none;
    display: block;
    color: white;
    padding: 0 20px;
}
.nav_item a:hover{
    background-color: red;
    border-top: 1px solid var(--main_color);
}
.content{
    display: grid;
}

 

1
komentarz 28 stycznia 2023 przez VBService Ekspert (250,450 p.)

Używasz w css zapisu

grid-template-rows: [panel] 15% [content] auto;

a gdzie w kodzie html masz użyty "panel" jest tylko "content"

<section class="content">
komentarz 28 stycznia 2023 przez Yorweth Obywatel (1,310 p.)
edycja 28 stycznia 2023 przez Yorweth

Poprawiłem ile mogłem, ale zatrzymałem się na jednej rzeczy, która mi trochę psuje moją stylizację i rozumowanie. 

W jaki sposób mogę obniżyć napisy w tych obiektach? Tzn dać je na środek lub niżej.

Używając marginesu mimo, że mam box-sizing rozjeżdża mi się, używając paddingu, marginu itd wpływam przy okazji na toggle button który zrobiłem i jest obok. 

Nie wiem szczerze od czego zacząć, a wypróbowałem wszelkie sposoby jakie znalazłem w Internecie.

Proszę o pomoc

@import url('https://fonts.googleapis.com/css2?family=Cairo+Play:wght@800&display=swap');
:root{
    --bg_purple:rgb(51, 0, 51);
    --bg_blue:rgb(9, 0, 73);
    --bg_red:rgb(107, 7, 7);
    --bg_grey:rgba(32,32,46, 0.8);
    --main_color:rgb(123, 58, 190);
}
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    width:100vw;
    height: 100vh;
    background: 
    linear-gradient(215deg, var(--bg_purple), rgba(0, 0, 0, 0.4) 75%),
    linear-gradient(135deg, var(--bg_blue), rgba(0, 0, 0, 0.4) 75%),
    linear-gradient(360deg, var(--bg_red), rgba(0, 0, 0, 0.4) 75%);
    display: flex;
	justify-content: center;
	align-items: center;
    overflow: hidden;
    color: white;
    text-align: center;
}
.main-content{
    display: grid;
    grid-template-rows: [panel] 17% [content] auto;
    width:70%;
    height: 80%;
    background: var(--bg_grey);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4rem 1px;
    border-radius:2rem;
    padding: 0rem 2rem 1rem 2rem;
    backdrop-filter: blur(5px);
}
.panel{
    display: grid;
    grid-template-columns: [header] 25% [site_nav]auto [toggle]10%;
    padding: 1rem 0;
}
.header{
    border-right: 1px solid rgb(46, 46, 46);
}
.dwa{
    margin-top: -1.5rem;
    margin-left:-2rem;
    font-family: 'Cairo Play', cursive;
    font-size: 3.5rem;
    font-weight: bold;
    text-shadow: 5px 5px 5px var(--main_color);
}
.logo-subtext{
    font-size: 1.5rem;
    color: var(--main_color);
    font-family: 'Courier New';
    font-weight: bold;
    padding-left:60px;
    margin-top:-25px;
}
.site_nav{
}

.navigation{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    list-style: none;
    gap:15px;
}
.a_item{
    display: block;
    margin-top:-1rem;
    font-size:1.5rem;
    text-decoration: none;
    color: white;
    padding:30px 20px;
    transition:0.1s;
}
.a_item:hover{
    border-top: 5px solid var(--main_color);
    color: var(--main_color);
}

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
}
input[type="checkbox"].toggle{
    display:none;
}
input[type="checkbox"].toggle + label{
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}
input[type="checkbox"].toggle + label::after{
    position: absolute;
    content: "";
    left: 0.2em;
    width: 1.4em;
    height: 1.4em;
    background-color: var(--main_color);
    border-radius: 1.4em;
    transition: 200ms ease-in-out;
    
}
input[type="checkbox"].toggle + label::before{
    content: "";
    width: 3.4em;
    height: 1.7em;
    background-color: rgb(0, 0, 0);
    border-radius: 1.7em;
    transition: 200ms ease-in-out;
}

input[type="checkbox"].toggle:checked + label::after{
    transform: translateX(120%);
    background-color: var(--main_color);
}
input[type="checkbox"].toggle:checked + label::before{ 
    background-color: white;
}

.content{
    display: grid;
    grid-template-columns: [ext_nav] 25% [main_content]auto ;
    border-top: 2px solid rgb(46, 46, 46) ;
    padding: 1rem 0;
}
.ext_nav{
    border-right: 1px solid rgb(46, 46, 46) ;
}
.main_content{
    
}
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- ikona home -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> 


<link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="main-content">
        <section class="panel">
            <header class="header">
                <h1 class="dwa">Tytuł1</h1>
                <p class="logo-subtext">Tytuł2</p>
            </header>
            <nav class="site_nav">
                <ul class="navigation">
                    <li class="nav_item">
                        <a href="Index.html" class="a_item">
                            
                            Home
                        </a>
                    </li>
                    <li class="nav_item">
                        <a href="Index.html" class="a_item">
                            
                            Home
                        </a>
                    </li>
                    <li class="nav_item">
                        <a href="Index.html" class="a_item">
                            
                            Home
                        </a>
                    </li>
                    <li class="nav_item">
                        <a href="Index.html" class="a_item">
                            
                            Home
                        </a>
                    </li>
                    <li class="nav_item">
                        <a href="Index.html" class="a_item">
                            
                            Home
                        </a>
                    </li>
                </ul>
            </nav>
            <section class="btn">
                <input type="checkbox" id="check" class="toggle">
                <label for="check"></label>
            </section>
        </section>
        <section class="content">
            <aside class="ext_nav">
                <header>
                    <h2>
                        Dzień dobry 
                    </h2>
                </header>
            </aside>
            <main class="main_content">

            </main>
        </section>
    </div>
</body>
</html>

 

1 odpowiedź

0 głosów
odpowiedź 28 stycznia 2023 przez VBService Ekspert (250,450 p.)
edycja 28 stycznia 2023 przez VBService

Nie możesz zrobić

<input type="checkbox" id="check" class="toggle">
<label for="check"></label>

jako kolejny

<li class="nav_item btn">                            
  <input type="checkbox" id="check" class="toggle">
  <label for="check"></label>
</li>
.panel{
  display: grid;
  grid-template-columns: [header] 25% [site_nav] auto;
  padding: 1rem 0;
}

 


jak chcesz, żeby nie "skakały"

            <li class="nav_item">
              <a href="Index.html" class="a_item">                             
                Home
              </a>
            </li>

przy

.a_item:hover{
    border-top: 5px solid var(--main_color);
    color: var(--main_color);
}

dodaj np. taki sam border-top, ale ustaw kolor: transparent

.a_item{
    ...
    border-top: 5px solid transparent;
}
.a_item:hover{
    border-top: 5px solid var(--main_color);
    color: var(--main_color);
}

[ on-line ]

Podobne pytania

0 głosów
3 odpowiedzi 387 wizyt
0 głosów
3 odpowiedzi 336 wizyt
0 głosów
2 odpowiedzi 295 wizyt
pytanie zadane 27 marca 2020 w HTML i CSS przez poldeeek Mądrala (5,980 p.)

92,417 zapytań

141,222 odpowiedzi

318,984 komentarzy

61,831 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...