CODEWITHSUNDEEP
htmlcss
Senoj
Senoj

Reputation: 51

HTML - Two navbars on one page

I am making a website which will consist of two main navbars, there will be one in the heading and the main navbar along the side. (please note that the website is no where near finished so ignore the design for the moment) anways.

I was hoping I could get some help, it appears that a div block I am trying to edit simply... doesn't edit in the CSS. It has really confused me which is why I am making this post.

JSFIDDLE

As you can tell in the above JSFiddle, when you edit the .info class on the jsfiddle, nothing changes the content in the heading. Even when I tell it to float: right, I get no result. A reason why this happens and a solution would be appreciated. Thank you!

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="homepage.css">
  <title>CSGOMarble</title>
</head>
<body> 
<div class="info">  
<ul>
  <li><a href="tos.html">Terms of Service</a></li>
  <li><a href="faq.html">FAQ</a></li>
</ul>   
</div>  
<div class="logo">
  <a href="homepage.html">
  <img src="logo.png" alt="LOGO" height="60px" width="200px">
  </a>
</div>

<hr>

<div class="navbar">
    <ul>
      <li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
      <li><a href="jackpot.html">JACKPOT</a></li>
      <li><a href="coinflip.html">COINFLIP</a></li>
      <li><a href="roulette.html">ROULETTE</a></li>
      <li><a href="giveaway.html">GIVEAWAY</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
</div>
<div class="container">
  <img src="logo.png" alt="logo">
  <br>
  <b><p style="font-size: 16.8px; color: grey; margin-top: 25px;">Welcome to CSGOMarble, the greatest CSGO gambling experience! CSGOMarble aims to be the best used, most trusted and respected of CSGO gambling. We all love to win, and we would like almost everyone to experience that. With CSGOMarble, not only will you be welcomed by a loving community, we will also be here to support you during your difficult times, that's why we have our, customer support and hard-working staff at your disposal. You'll be happy you decided to gamble with us!</p></b>
  <br>
  <a href="SIGNIN.HTML">
  <img src="LOGINMAIN.png" alt="SIGN IN WITH STEAM" style="margin-top: 5px;">
  </a>
</div>
</body>
</html>

CSS:

body {
font-family: Arial, Verdana, sans-serif;
background-color: #232a30;
}
.logo {
margin-left: 25px;
}
.navbar {
    margin-top: 50px;
    margin-left: 40px;
    padding: 0;
    font-size: 15px;
    float: left;
    display: inline-block;
    z-index: 2;
    position: fixed;
}

.container {
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 25px;
    display: inline-block;
    text-align: center;
    z-index: 1;
    margin-left: 450px;
}
.navbar a {
text-decoration: none;
color: black;
}
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
    background-color: #f1f1f1;
    border: 2px solid #b4b6bd;;
}

.navbar li a {
    display: block;
    color: #000;
    padding: 15px 0 15px 0;
    text-decoration: none;
}
.navbar li a:hover {
    background-color: #555;
    color: white;
}
.navbar li {
    text-align: center;
    border-bottom: 1px solid #555;
    font-size: 18px;
}

.navbar li:last-child {
    border-bottom: none;
}
.signin {
margin-left: 500px;
margin-top: -600px;
}
.info{
}

Upvotes: 0

Views: 2644

Answers (1)

divy3993
divy3993

Reputation: 5810

You must select a - Anchor Tag individually. Like following:

.info {
  float: right;
}
.info a{
  text-decoration: none;
  }

Check This : Fiddle

Upvotes: 1

Related Questions