Jump to content

Saudademaru

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

Saudademaru's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Saudademaru
    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.
  2. Saudademaru
    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.
  3. Saudademaru
    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>
×
×
  • Create New...