2 navbars using html and CSS
-
I am a bit desperate , i just can’t seem to get the hang of it. I will enlist my code, could anyone please help me ?
I want to have two sets of links on one page , one is a horizontal navbar and one should be a list of links for news items of my band.Any help will be much appreciated. Thank you.
HTML:
<!DOCTYPE html>
<html lang=nl>
<head>
<link rel=“stylesheet” href=“index.css”>
<link rel=“stylesheet” href=“nieuws.css”><meta charset=utf-8>
<meta name=description content=“De Limburgse Koempelrock Band”>
<meta name=keywords content=“boerenrock, koempelrock, rockband, ivoknubben, pietjefender, rock’nroll, limburgstalig, muziek, podiumkunst, tentfeesten, stage, mooiwark, micheljagers, limburg”>
<title>De Rockduvels Nieuws</title>
</head><body>
<div class=“nav”>
<ul>
<li><a href=“home.html”>Home</a></li>
<li id=“huidig”><a href=“nieuws.html”>Nieuws</a></li>
<li><a href=“bio.html”>Bio</a></li>
<li><a href=“leden.html”>Leden</a></li>
<li><a href=“fotos.html”>Foto’s</a></li>
<li><a href=“muziek.html”>Muziek</a></li>
<li><a href=“tourdata.html”>Tourdata</a></li>
<li><a href=“contact.html”>Contact</a></li>
<li><a href=“gastenboek.html”>Gastenboek</a></li>
</ul>
</div>
<h2>News</h2>
<div class=“menu”>
<ul style=“list-style-image: url(duveldot1.png)”>
<li><a href=“oog.html”><h3>De Rockduvels en Het Oog op Heerlen</h3></a></li>
<li><a href=“mooiwark.html”><h3>De Rockduvels spelen voor Mooi Wark</h3></a></li>
<li><a href=“bienobis.html”><h3>De Rockduvels openen Rockfestival: Bie Nobis op 9/11</h3></a></li>
<li><a href=“eerstealbum.html”><h3>2016: Het jaar van het eerste album</h3></a></li>
</ul>
</div><div align=“right”>
<img src=“duveldot.png” alt=“groëteduuvel”>
</div>
</body>
</html>CSS (index):
@charset “utf-8”;
/* CSS Document */<style type=“text/css”>
#body {
background-image:url(spotlight.jpg);
background-repeat: no-repeat;
}
</style>#nav ul
{
list-style: none;
text-align: center;
}#nav li {
display: inline;
padding-left: 10px0px;
padding-right: 10px ;
margin: 45px;}
#nav a {
font-family: Trajan;
font-size: 150%;
font-weight: bold;
color: #B22222;
text-decoration: none;
font-style: italic;
}#nav a:link, a:visited{
background: transparent;
border-top: 2px dotted #FFD700;
border-bottom: 2px dotted #FFD700;
color: #B22222;}
#nav a:hover, a:active{
background: transparent;
border-top: 3px solid #B22222;
border-bottom: 3px solid #B22222;
color:#FFD700;
}CSS (nieuws):
/* CSS Document */
h2 {color: #FFD700;
text-align: center;
word-spacing: 0em; letter-spacing: 0em;
font-family: Trajan;
font-size: 800%;
font-weight: bold;
font-style: normal;
text-indent: 35px;
}
h2 {text-shadow: 0.2em 0.1em 0.2em #B22222}
h2 {text-shadow: 0.2em 0.1em 0.2em #B22222, 0 0 0.2em #B22222}
h2 {text-shadow: 0.2em 0.1em 0.2em #B22222, 0 0 0.2em #B22222,
0 0 0.2em #B22222}h3 { color: #FFD700;
font-family: Trajan;
font-weight: bold;
font-size: 150%;
text-indent: 5px;
font-style: oblique;
}
h3 {text-shadow: 0.2em 0.1em 0.2em #B22222}
h3 {text-shadow: 0.2em 0.1em 0.2em #B22222, 0 0 0.2em #B22222}
h3 {text-shadow: 0.2em 0.1em 0.2em #B22222, 0 0 0.2em #B22222,
0 0 0.2em #B22222}#menu ul {
}
#menu ul li {
display: inline;
margin: none;
padding: none;
text-indent: 150px;
list-style-image: url(‘duveldot1.png’);
}#menu a:link, a:visited{
background: transparent;
border-top: 3px solid #000000;
border-bottom: 3px solid #000000;
color: #B22222;}
#menu a:hover, a:active{
background: transparent;
border-top: 3px solid #B22222;
border-bottom: 3px solid #B22222;
color:#FFD700;
}