Community

    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    2 navbars using html and CSS

    Help wanted · · · – – – · · ·
    navigation css html
    1
    1
    8430
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Ivo Knubben
      Ivo Knubben last edited by

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

      1 Reply Last reply Reply Quote 0
      • First post
        Last post
      Copyright © 2014 NodeBB Forums | Contributors