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 10 of 10
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post

    Navigation alignment problem CSS

    I am new to this and have gotten myself stumped again.
    I want three navigation links spread equally across my container.
    Can only get two, what am I doing wrong.

    CSS
    Code:
    #navigation
    {
    list-style-type: none;
    margin: 0 auto;
    padding: 0 auto;
    }
    
    #navigation li a
    {
    display: block;
    width: 5em;
    color: #FFFFFF;
    background-color: #000099;
    padding: .3em 0;
    text-align: center;
    }
    
    #navigation li a:hover
    {
    color: #FFFFFF;
    background-color: #660099;
    }
    
    #navigation .left { float: left; }
    #navigation .right { float: right; }
    #navigation .center { float: center; }
    HTML
    Code:
    <div class="container">
    
    <ul id="navigation">
    
    <li class="left"><a href="pic6.html">Back</a></li>
    
    <li class="right"><a href="pic2.html">Next</a></li>
    
    <li class="center"><a href="javascript: self.close ()">Close</a></li>
     
    </ul>
    </div>
    Dedicate some time to Educate your mind

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Hi radamsii,

    There is not a "float:center", there is left or right.

    Try this :
    Code:
    #navigation
    {
    list-style-type: none;
    margin: 0 auto;
    padding: 0 auto;
    
    }
    
    #navigation li a
    {
    display: block;
    width: 5em;
    color: #FFFFFF;
    background-color: #000099;
    padding: .3em 0;
    text-align: center;
    float:left;
    }
    
    #navigation li a:hover
    {
    color: #FFFFFF;
    background-color: #660099;
    }
    HTML
    Code:
    <div class="container">
    
    <ul id="navigation">
    
    <li class="left"><a href="pic6.html">Back</a></li>
    
    <li class="left"><a href="pic2.html">Next</a></li>
    
    <li class="left"><a href="javascript: self.close ()">Close</a></li>
     
    </ul>
    Here is a test of the changes I made just for reference: http://drewsdesigns.com/codingforums...nks_radam.html

    Regards,

    Drew
    Last edited by FWDrew; 05-07-2008 at 11:32 PM. Reason: URL

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post
    Thank you for your help but one more question. Perfect in everything except IE, is there a fix for that?
    Dedicate some time to Educate your mind

  • #4
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Quote Originally Posted by radamsiii View Post
    Thank you for your help but one more question. Perfect in everything except IE, is there a fix for that?
    I dont have IE so you will have to help me out. What is wrong in IE (and I am assuming IE 6)? A screen shot helps too if you can

    Drew

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post
    IE7 actually and sorry but I could not copy the screenshot so I am attaching it as a .doc. they are being displaied as a step rather than the one right one center and one left effect I was hoping for. Sorry but I am about 4 weeks old in this so I have a very long way to go. Thank you for helping.
    Attached Thumbnails Attached Thumbnails Navigation alignment problem CSS-clip_image002.jpg  
    Dedicate some time to Educate your mind

  • #6
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Delete this line from your CSS and see if that works

    Code:
    display: block;

    Drew

    EDIT-I just tested that and used a browser shot and it still has the error.
    Last edited by FWDrew; 05-08-2008 at 12:39 AM.

  • #7
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Replace the highlighted:
    Code:
    #navigation li a {
    display: inline;
    width: 5em;
    color: #ffffff;
    background-color: #000099;
    padding: 0.3em 0;
    text-align: center;
    float: left;
    }
    ...with display:block;

    and add this in your CSS:
    Code:
    #navigation li{float:left;}
    See if it helps
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    radamsiii (05-08-2008)

  • #8
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Nice work Rangana, I should have seen that You are the master

    Tested it with a browser shot and it works in IE 7 now radam thanks to Rangana.

    -Drew

  • Users who have thanked FWDrew for this post:

    radamsiii (05-08-2008)

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post
    Thank you so much I am sure you already know that that worked perfectly, donít laugh at this next question, can there be a resizable spacing between them. I tried margin 20 px and that set a small space but didnít allow resize, or would it be easier to push ti the center and leave that way probably look better like that anyway.
    Dedicate some time to Educate your mind

  • #10
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Add it here:
    Code:
    #navigation li{float:left;margin:20px;}
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Posting Permissions

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