NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Avatar
Petr Boháč
Člen
Avatar
Petr Boháč:7.3.2018 16:44

Zdravím,
mám problém s odkazy v navigačním menu. Mám pro <i>a:hover</i> nastaveno <i>font-weight: bold;</i>. Když přes odkaz přejedu, odkazy tak divně skáčou. Zkoušel jsem různě měnit odsazení, ale na nic nemohu přijít. Použil jsem bootstrap.

HTML:
<!DOCTYPE html>
<html>
<head>
<title>ŘEMESLO V KOSTCE | Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=de­vice-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/boot­strap.css">
<link rel="stylesheet" type="text/css" href="css/sty­le.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12" id="header"></div>
</div>
<div class="row">
<div class="col-12" id="nav">
<ul>
<li><a href="katalog­.html">Katalog</a></li>
<li><a href="about.html">O firmě</a></li>
<li><a href="kontakt­.html">Kontak­t</a></li>
<li><a href="index.html" id="home">Domů</a></li>
</ul>
<div id="date">
Datum: <script src="js/date.js"></scrip­t>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-9" id="content">
<h1>DOMŮ</h1>
<div style="position: static;" class="alert alert-danger">
<strong>Upozor­nění!</strong> Web je v rané fázi, omluvte tedy jakékoliv chyby.
</div>
<p>Vítejte na stránkách firmy ŘEMESLO V KOSTCE!</p>
</div>
<div class="col-3" id="news_search">
<h1>Hledat</h1>
<form id="search" action="">
<input type="search" name="search" placeholder="Hle­dat...">
<input type="submit" value="Hledat" name="submit">
</form>
<h1>Novinky</h1>
<div id="news">
<div class="novinka">
<label for="news">Tes­tovací novinka</label>
<p>» Administrator | dd.mm yyyy</p>
<p>Gjdhfishfj­hdskjfhjlkshfdluz­hfnv sdfhn usdhf usdhfuhsdf jkshd fjsdhjkhfkj shkdjfsj hfdksjdhf jsdf sdfjs</p>
</div>
<div class="newssplit"></di­v>
<div class="novinka">
<label for="news">Tes­tovací novinka</label>
<p>» Administrator | dd.mm yyyy</p>
<p>Gjdhfishfj­hdskjfhjlkshfdluz­hfnv sdfhn usdhf usdhfuhsdf jkshd fjsdhjkhfkj shkdjfsj hfdksjdhf jsdf sdfjs</p>
</div>
<div class="newssplit"></di­v>
<div class="novinka">
<label for="news">Web spuštěn!</label>
<p>» Administrator | dd.mm yyyy</p>
<p>Dobrý den,<br>dnes, 6.3 2018, jsme oficiálně spustili novou verzi webových stránek firmy ŘEMESLO V KOSTCE.</p>
</div>
<div class="newssplit"></di­v>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12" id="footer">
<p>Copyright © <script src="js/copy_y­ear_update.js"></scrip­t> Petr Boháč</p>
<p>Všechna práva vyhrazena</p>
</div>
</div>
</div>
</body>
</html>

CSS:
body {
background-image: url(../imgs/bac­kground.jpg);
}
h1 {
border-bottom: 3px solid black;
}
#home {
background-color: greenyellow;
padding: 10px;
font-weight: bold;
}
#nav ul li a#home {
color: #00cccc;
}
#nav ul li a.active {
color: #00cccc;
font-weight: bold;
}
#header {
height: 30px;
}
#nav {
background-color: #ff3333;
height: 30px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#nav ul {
float: right;
}
#nav ul li {
list-style: none;
display: inline-block;
}
#nav ul li a {
color: white;
text-decoration: none;
margin: 5px;
}
#nav ul li a:hover {
font-weight: bold;
color: #00cccc;
}
#content {
min-height: 500px;
height: auto;
background-color: white;
position: static;
}
#news_search {
min-height: 500px;
height: auto;
background-color: lightgray;
position: static;
}
#footer {
background-color: #ff3333;
text-align: center;
color: white;
}
#footer p {
margin: 0;
}
#date {
color: white;
font-weight: bold;
}
.item {
height: 120px;
width:180px;
display: inline-block;
margin: 10px;
}
.novinka {
height: auto;
background-color: white;
border-radius: 10px;
padding: 10px;
}
.newssplit {
padding: 5px 0;
}
.novinka label[for=news] {
font-weight: bold;
}
.item {
text-align: center;
}

Děkuji

 
Odpovědět
7.3.2018 16:44
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.