Utilizing absolute positioning may not be the ideal solution, but other methods yielded even poorer results. Instead of focusing on the code output, consider the image while pondering this issue. I am grappling with the problem and awaiting some tangible outcomes.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url("bg.jpg");
background-repeat: repeat;
background-position: center;
background-size: 100%;
background-attachment: fixed;
margin-bottom: 0px;
min-height: 100%;
max-width: 1600px;
}
h1 {
text-align: center;
font-size: 40px;
color: black;
}
ul {
list-style: none;
font-size: 18px;
... (the rest of the CSS code is omitted for brevity)
<!DOCTYPE html>
<html lang='cs'>
<head>
<title>Diody
</title>
<meta charset='utf-8'>
<link rel="stylesheet" href="styl.css" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<h1 class="hlavní_nadpis"> Výukové stránky elektronických součástek </h1>
</head>
<body>
<div class="menu-bar">
<ul>
<div class="uvod">
<li>
<i class="fas fa-home"></i>
<a href="web_vanecek.html">Úvod</a>
</li>
</div>
<li>
... (the rest of the HTML code is omitted for brevity)