I´m using absolute position and I know it's not the best but when I used something else it was just worse. Don´t look at the result of the code but on the image. I am trying to think about it but I don't see results.
* {
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;
}
.menu-bar {
text-align: center;
}
.menu-bar ul li {
width: 120px;
margin: 15px;
padding: 15px;
}
.menu-bar ul li a {
text-decoration: none;
color: black;
}
.menu-bar ul li:hover {
background: rgb(192, 192, 192);
border-radius: 3px;
}
i {
margin-right: 25px;
}
.sub-menu {
display: none;
}
.menu-bar ul li:hover .sub-menu {
display: block;
position: absolute;
background: rgb(192, 192, 192);
border-radius: 5px;
}
.menu-bar ul li:hover .sub-menu ul li a:hover {
color: white;
}
a {
text-decoration: none;
color: black;
}
.zápatí {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
background-color: black;
text-align: center;
}
.center {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 2px;
}
.copyright {
text-align: center;
color: white;
margin-bottom: 14px;
}
.text_úvod {
text-align: block;
margin-left: 50px;
margin-right: 50px;
text-indent: 15px;
}
.hlavní_nadpis {
margin-top: 17px;
}
.druhý_nadpis {
text-align: center;
color: black;
margin-top: -35px;
}
.součástka {
width: 300px;
height: 300px;
border: 7px solid rgb(87, 87, 87);
border-radius: 5px;
margin-left: 75.5%;
position: relative;
}
.rezistor_text {
text-align: block;
margin: 30px;
margin-right: 370px;
margin-top: -300px;
text-indent: 25px;
font-size: 23px;
}
.kondenzátor_text {
text-align: block;
margin: 30px;
margin-right: 370px;
margin-top: -300px;
text-indent: 25px;
font-size: 23px;
}
.dioda_text {
text-align: block;
margin: 30px;
margin-right: 370px;
margin-top: -300px;
text-indent: 25px;
font-size: 23px;
}
.tranzistor_text {
text-align: block;
margin: 30px;
margin-right: 370px;
margin-top: -300px;
text-indent: 25px;
font-size: 23px;
}
.tyristor_text {
text-align: block;
margin: 30px;
margin-right: 370px;
margin-top: -300px;
text-indent: 25px;
font-size: 23px;
}
.odborný_nadpis {
text-align: center;
font-size: 32px;
}<!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>
<i class="fas fa-bars"></i>
<a href=""> Menu </a>
<div class="sub-menu">
<ul>
<li align="left">
<a href="Rezistory.html"> Rezistory </a>
<br>
<a href="Kondenzátory.html"> Kondenzátory </a>
<br>
<a href="Diody.html"> Diody </a>
<br>
<a href="Tranzistory.html"> Tranzistory </a>
<br>
<a href="Tyristory.html"> Tyristory </a>
<br>
</li>
</ul>
</div>
</li>
</ul>
</div>
<br>
<h2 class="odborný_nadpis"> Diody</h2>
<br>
<br>
<img class="součástka" src="dioda.jpg">
<p class="dioda_text"> Dioda je elektrotechnická součástka se dvěma elektrodami, označovanými jako anoda a katoda, která se vyznačuje velmi odlišným tvarem voltampérové charakteristiky v závislosti na polaritě přiloženého napětí. Po připojení anody na kladnější napětí, nežli
je na katodě, klade dioda jen malý odpor průchodu elektrického proudu, zatímco při opačném zapojení je dioda téměř nevodivá. Pro vytvoření diody lze použít více fyzikálních principů, dříve se obvykle používala vakuová dioda (elektronka), nyní jsou
používány polovodičové diody využívající usměrňovací efekt na P-N přechodu nebo styku kov-polovodič (Schottkyho dioda). Propustný směr – na anodě je kladnější napětí než na katodě – dioda zpočátku, až do určitého prahového napětí (pro běžnou křemíkovou
diodu je to asi 0,7 V) téměř nevede, pak ale začne proud se zvyšujícím se napětím prudce růst a pokud není omezen dalšími obvodovými prvky, brzy dosáhne maximálního propustného proudu (pro obvyklé usměrňovací diody jsou to jednotky ampér, ale existují
i výkonové diody běžně snášející proudy tisíců ampér) a dojde k tepelné destrukci diody. Závěrný směr – na anodě je zápornější napětí než na katodě – diodou protéká jen minimální proud (pro běžnou křemíkovou usměrňovací diodu jde o proud v řádech
mikroampér) prakticky bez ohledu na napětí až do dosažení závěrného napětí (což mohou být řádově volty pro LED nebo tisíce voltů pro speciální diody) při kterém začne proud opět prudce růst a pokud není omezen ostatními prvky obvodu dojde k destrukci
diody (pokud je ovšem proud omezen na přípustnou hodnotu, je tento proces vratný a dioda v této oblasti může pracovat, toho využívají Zenerovy a lavinové diody).
</p>
<div class="zápatí">
<table cellspacing="10px" class="center">
<tr>
<td>Kontakty:</td>
<td> Telefon:</td>
<td> xxx xxx xxx</td>
</tr>
<tr>
<td> </td>
<td>E-mail:</td>
<td>vanecek.jaroslav23@spscv.cz</td>
</tr>
</table>
<p class="copyright"> ©Jaroslav Vaněček
</p>
</div>
</body>
</html>
