Jump to content

Shark-Semester Navbar Question


midwestdv

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!

Link to comment
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.  

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...