Jump to content

CSS Nav bar not coming out correctly.


Saudademaru

Recommended Posts

I'm refreshing my web development skills and trying to make a certain type of nav bar in HTML and CSS. I want it to be fixed, have border dividers, and have a couple of things aligned to the right. I can get these working separately and by mixing and matching two of them but not mixing all three features. Currently I have changed it from the CSS tutorial because of the validator says the UL tag cannot be nested inside of another UL tag, so I made it look more like the nested HTML example....that gives me no error in the validator but it doesn't align my two buttons to the right. Could someone tell me what is wrong with it? (Line 44-54)

<!DOCTYPE html>
<html>
<head>
<title>WIP Site</title>
<style>
body {margin:0;}

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

li {
    float: left;
	border-right:1px solid #bbb;
}

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

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

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <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>
   <ul style="float:right;list-style-type:none;">
    <li><a href="#test">test</a></li>
    <li><a href="#login">login</a></li>
  </ul>
  </li>
</ul>


<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top 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>
Link to comment
Share on other sites

Because 'test' and 'login' are submenus of parent 'About' which is float left which causes it to shrink down to 'about' text and padding used, these submenus will never be able to float right.

 

but! what is wrong with

            <ul>
                <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>
            <ul style="float:right;list-style-type:none;">
                <li><a href="#test">test</a></li>
                <li><a href="#login">login</a></li>
            </ul>

But then place these within nav element which should be the element using position: fixed

        <nav class="fixed_menu">
            <ul>
                <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>
            <ul style="float:right;list-style-type:none;">
                <li><a href="#test">test</a></li>
                <li><a href="#login">login</a></li>
            </ul>
        </nav>

with

            body {margin:0;}
            nav.fixed_menu {                position: fixed;
                                            top: 0;
                                            left:0;
                                            width: 100%;
                                            background-color: #333;
            }
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                /*overflow: hidden;*/
                background-color: #333;
                float: left;

            }

            li {
                float: left;
                border-right:1px solid #bbb;
            }

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

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

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

It may not be exactly right, but! its closer i think.

Edited by dsonesuk
Link to comment
Share on other sites

  • 2 weeks later...

I finally figured out a way to get it to work as intended. I had to separate the UL specs. I did this by giving one a different ID. Example.

ul#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;

Then for the nested UL that showed up on the right, I just simply referred to it as UL but kept my style code above. Just thought I'd post back here in case anyone else tries such a thing.

Link to comment
Share on other sites

Mine did exactly what you wanted, there was no buttons showing under the about button, me thinks you did not separate into individual ul siblings like i showed

 

Yours with login under 'About' make no sense hierarchy structure wise.

 

As html provided in #2, with removed inline styling and added css selector to target that sibling ul

            nav.fixed_menu {                position: fixed;
                                            top: 0;
                                            left:0;
                                            width: 100%;
                                            background-color: #333;
            }
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #333;
                float: left;

            }

            li {
                float: left;
                border-right:1px solid #bbb;
            }

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

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

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

            .fixed_menu ul + ul {float: right; border-left: 1px solid #bbb;}
Edited by dsonesuk
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
×
×
  • Create New...