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