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;
    }


Log in to reply