Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Moving nav bar using float

    (Sorry if this is a dumb question, I'm new to this)

    Hello,

    I have a navigation bar that I am trying to position at the top-right corner of my webpage. The navigation bar is in its own div container. I have two other divs on my page: one for my banner and one that makes up the content background for my page. Here's a picture to illustrate it better:



    So I have succeeded in floating the nav bar to the right side of the screen, but I need it to be in the top right corner of the screen, so that it looks like this:



    I can't figure out why the nav bar div is not floating to the corner. Is the banner (the red box on the top left) blocking the nav bar from moving to the top right corner?

    ===

    (Also, this is another problem I'm having... it's less urgent, but I would be very grateful if someone could help me with it too. It seems that my links on the nav bar are showing up in reverse order. On my html page, I have had to change the order into reverse order so that the link items will show up in the correct order when displayed in the browser.

    In other words, this is what my html looks like:

    Code:
    <div id="navigation">
    <ul>
    <li><a href="sfzero.html">SF0</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="resume.html">Resume</a></li>
    <li><a href="index.html">Home</a></li>
    </div>
    ... in order to make it displayed like this: Home | Resume | Portfolio | SF0.

    Why is displaying in the reverse order?

    Here is my css code if you need it:

    Code:
    #navigation ul {
    	list-style-type: none;
    	margin-right: 5%;
    	}
    
    #navigation ul li {
    	float: right;
    	border-right: 1px solid #333;
    	}
    
    #navigation ul li a:link, a:visited {
    	display: block;
    	padding: 20px 40px;
    	text-decoration: none;
    	font-family: "Trebuchet MS";
    	}
    	
    #navigation ul li a:hover {
    	background-color: #f2f2f2;
    	color: #000;
    	}
    ======

    I would greatly appreciate any help. Thank you.

    Edit: I'm very sorry for the large images... Not sure how to resize them now :/
    Last edited by teacupbunny; 02-27-2012 at 05:17 AM.

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    Finland
    Posts
    59
    Thanks
    3
    Thanked 9 Times in 9 Posts
    I need longer version of your CSS and HTML or link to your site, to see if something is blocking the float: right; and if it's not about that then to find out what is causing this.

    -Riku

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your willingness to help, I was able to find a solution though! (:

    If anyone else has the same problem and is wondering what fixes it, I changed my banner (the red box)'s position to relative and then set its height to 0px.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •