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;
}
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login