Diskuze: Skákání odkazů v navigačním baru

Petr Boháč

Člen

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=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.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">Kontakt</a></li>
<li><a href="index.html" id="home">Domů</a></li>
</ul>
<div id="date">
Datum: <script src="js/date.js"></script>
</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>Upozorně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="Hledat...">
<input type="submit" value="Hledat" name="submit">
</form>
<h1>Novinky</h1>
<div id="news">
<div class="novinka">
<label for="news">Testovací novinka</label>
<p>» Administrator | dd.mm yyyy</p>
<p>Gjdhfishfjhdskjfhjlkshfdluzhfnv sdfhn usdhf usdhfuhsdf jkshd fjsdhjkhfkj shkdjfsj hfdksjdhf jsdf sdfjs</p>
</div>
<div class="newssplit"></div>
<div class="novinka">
<label for="news">Testovací novinka</label>
<p>» Administrator | dd.mm yyyy</p>
<p>Gjdhfishfjhdskjfhjlkshfdluzhfnv sdfhn usdhf usdhfuhsdf jkshd fjsdhjkhfkj shkdjfsj hfdksjdhf jsdf sdfjs</p>
</div>
<div class="newssplit"></div>
<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"></div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12" id="footer">
<p>Copyright © <script src="js/copy_year_update.js"></script> Petr Boháč</p>
<p>Všechna práva vyhrazena</p>
</div>
</div>
</div>
</body>
</html>

CSS:
body {
background-image: url(../imgs/background.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

Junior programátor, plat 50.000 Kč/měsíc. Líbí? Od 0 Kč ho z tebe uděláme.

Zjistit více...

Junior programátor, plat 50.000 Kč/měsíc. Líbí? Od 0 Kč ho z tebe uděláme.

Rekvalifikovat se

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.