Saudademaru Posted December 7, 2015 Share Posted December 7, 2015 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 More sharing options...
dsonesuk Posted December 7, 2015 Share Posted December 7, 2015 (edited) 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 December 7, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Saudademaru Posted December 8, 2015 Author Share Posted December 8, 2015 I did get this to work in a way, though it showed the last two buttons under the 'about' button instead of on the right. Thanks for the reply though. Link to comment Share on other sites More sharing options...
Saudademaru Posted December 21, 2015 Author Share Posted December 21, 2015 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 More sharing options...
dsonesuk Posted December 22, 2015 Share Posted December 22, 2015 (edited) 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 December 22, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now