Jump to content

Menu List not working when using a stylesheet

helpneeded22

By helpneeded22
in CSS

 Share

Recommended Posts

helpneeded22 Newbie

helpneeded22

Posted
Posted (edited)

I am trying to convert the example given here, to a stylesheet:

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_fixed2

(By does not work, I mean = does not position at bottom, bullets are displayed when they shouldn't be, backgrounds are not as set, etc.)
 

When I do, it does not work.  Can someone please tell me what I am doing wrong.  Here is the code I am using.

HTML sheet: 

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
</style>
<link type="text/css" rel="stylesheet" href="menutest.css">
</head>
<body>

<ul class="menus">
  <li class="menus"><a class="active" href="#home">Home</a></li>
  <li class="menus"><a href="#news">News</a></li>
  <li class="menus"><a href="#contact">Contact</a></li>
  <li class="menus"><a href="#about">About</a></li>
</ul>

<div style="padding:20px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Bottom Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the bottom of the page while scrolling</h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>

 

And here is the stylesheet: 

.menus ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.menus li {
    float: left;
}

.menus li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menus li a:hover:not(.active) {
    background-color: #111;
}

.menus:active {
    background-color: #4CAF50;
}

 

Edited by helpneeded22
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited) 
.menus ul

Refers to an parent element that surrounds the ul element, of which UL is a child element. Any space after a selector means it transversing down its child or children, as in    

ul li {...}

What you should have is class applied to ul element only 

ul.menus {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100 %;
}

Remove all classes of "menus" from li elements, and it should now follow the style rules you currently have. 

<ul class="menus">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

This is wrong also 

.menus:active {
    background-color: #4CAF50;
}

:hover, :active, :link only target anchor elements. So this either needs to be 

.menus li a:active {
background-color: #4CAF50;
}

OR possibly 

.menus li a.active {
background-color: #4CAF50;
}

 

 

Edited by dsonesuk
Link to comment
Share on other sites
Funce Invested Member

Funce

Posted
Posted

Your alternative is to directly link menus to elements by referencing them correctly.

 

Your code refers to situations such as 

<div class="menus">
  <ul>
    <li>Stuff to write</li>
    <li>More stuff</li>
  </ul>
</div>

If you change it to this you'll find that your code mostly works except for your last css block which should change to
  

.menus a.active {
  background-color: #4CAF50;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...