Jump to content
Killersites Community
Sign in to follow this  
midwestdv

Shark-Semester Navbar Question

Recommended Posts

So I'm done with the CSS videos.  I'm now trying to create a simple website before I move on hard to javascript videos.  I have a question: 

In your Shark-Semester HTML/CSS you have this: 

<div id="topdiv">
<span style="padding-left: 20px; font-size: 1em; letter-spacing: 2px;"><a href="#">home</a></span>
<span style="float: right; padding-right: 20px;"><a href="#">shark biscuits</a> | <a href="#">shark training leashes</a></span>
</div>

 I want to make a topdiv like this but I don't want to put the style="float:right" in the line.  I want to put that "style" in a style sheet.  How can I do that?  I've try this: 

<div id="topnav">
    
    <ul>
        <li><a href ="http://www.google.com">Home</a></li>
        <li><a href ="http://www.google.com">Our Brands</a></li>
        <li><a href ="http://www.google.com">Shopping Experience</a></li>
        <li class="rightmove"><a href ="http://www.google.com">Shopping History</a></li>
        
        
    </ul> 

 In my style sheet I have this: 

.rightmove {float: right;}

but it does not work.  I want the Home, Our Brands, Shopping Experience link on the left and the Shopping History on the right.  

 

Thanks!

Share this post


Link to post
Share on other sites

Think I figured it out.  in my css style sheet I put:

 #topnav .rightm {float: right;}.  

Then in the html page I put this: 

<div id="topnav" class="navupper">
    
    <ul>
        <li><a href ="http://www.google.com">Home</a></li>
        <li><a href ="http://www.google.com">Our Brands</a></li>
        <li><a href ="http://www.google.com">Shopping Experience</a></li>
        <li class="rightm"><a href="http://www.google.com">Shopping History</a></li>
    </ul>      
  </div>

 This floated the Home, Our Brands and Shopping Experience left and the Shopping History right.  The other class="navbar" is for making the font size a little bigger.  

Only took me all day from 11am to 3pm to figure it out.  lol.  Ugh.  

 

Share this post


Link to post
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
Sign in to follow this  

×