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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Centering and standardizing a horizontal menu...

    Good evening,

    I'm trying to center a horizontal menu on a website, and I can't seem to get the right code tags in the write places. I'd like to get the links on the menu to center on the page, and perhaps to display in a consistent width text box. My menu bar is 900px, and there are 10 links, so for instance I would like to reduce these boxes containing the links to a consistent 90px. Any thoughts?

    website - http://www.squadron282.com

    CSS Code:
    Code:
    .nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;} 
    .nav2 ul {float: left; width: 900px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold; white-space:nowrap}
    .nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;} 
    .nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;} 
    .nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;} 
    .buffer {clear: both; width: 900px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}
    HTML Code:
    Code:
    <div class="nav2">			  
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="missions.html" class="selected">CAP Missions</a></li>
    <li><a href="sqinfo.html">Squadron Info</a></li>
    <li><a href="commanderscorner.html">Commander's Corner</a></li>
    <li><a href="resources.html">Member Resources</a></li>
    <li><a href="pics.html">Photo Gallery</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="sitemap.html">Sitemap</a></li>
    </ul>
    </div>
    Last edited by cvecchi; 11-20-2009 at 05:35 AM. Reason: Update Code

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You could remove all display:block/floats and use something like
    Code:
    .nav2 ul {/*style_screen.css (line 48)*/
    background-color:#7FA2CA;
    border-bottom:1px solid #365397;
    border-top:1px solid #365397;
    /*float:left;*/
    font-weight:bold;
    margin:0;
    padding:0;
    text-align:center;
    width:900px;
    }
    .nav2 li {/*style_screen.css (line 49)*/
    display:inline;
    line-height:2.5;
    list-style:none;
    margin:0;
    padding:0;
    }
    .nav2 li a {/*style_screen.css (line 50)*/
    border-right:1px solid #365397;
    color:#FFFFFF;
    /*display:block;
    float:left;*/
    font-size:100%;
    margin:0;
    padding:5px 10px;
    text-decoration:none;
    text-transform:uppercase;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Gave that a shot, and it ended up dropping my horizontal formatting for some reason. Now all navigation links are stacked on top of each other!

    Here's what the code looked like:

    Code:
    .nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.00em; width: 900;}
    .nav2 ul {/*style_screen.css (line 48)*/
    background-color:#7FA2CA;
    border-bottom:1px solid #365397;
    border-top:1px solid #365397;
    /*float:left;*/
    font-weight:bold;
    margin:0;
    padding:0;
    text-align:center;
    width:900px;
    }
    .nav2 li {/*style_screen.css (line 49)*/
    display:inline;
    line-height:2.5;
    list-style:none;
    margin:0;
    padding:0;
    }
    .nav2 li a {/*style_screen.css (line 50)*/
    border-right:1px solid #365397;
    color:#FFFFFF;
    /*display:block;
    float:left;*/
    font-size:100%;
    margin:0;
    padding:5px 10px;
    text-decoration:none;
    text-transform:uppercase;
    }
    .nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
    .buffer {clear: both; width: 900px; height: 10px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}
    Did I do something wrong?

    Thanks!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    That works for me in FF2. Could you please update your link?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Absolutely...here's the page - http://www.squadron282.com/index2.html

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    It looks fine to me in IE7 and FF3. What browser are you seeing the problem in (and have you cleared your cache and retried the page)?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New Coder
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK, I figured out the css issue, and have the menu bar centered. It's created a couple additional issues....

    1. The vertical "pipe" separators shown, created by the snippet below leave me without a border on the left side, but with one on the right. The plain border snippet leaves spacing between everything. Any ideas on fixing this?
    Code:
    border-right: solid 1px rgb(54,83,151);
    2. I would really like the ability to wrap the text on each navigation link, for instance it would be "Squadron" on the top line and "Information" on the second line. The goal here is to condense the menu somewhat and allow the addition of two more links to the menu bar.

    Thanks!
    Chris

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by cvecchi View Post

    1. The vertical "pipe" separators shown, created by the snippet below leave me without a border on the left side, but with one on the right. The plain border snippet leaves spacing between everything. Any ideas on fixing this?
    Code:
    border-right: solid 1px rgb(54,83,151);
    Hello cvecchi,
    Either add an id or class to your first li a so you can add a left border from your CSS, or a bit of inline styling like this - <li><a href="index.html" style="border-left: solid 1px rgb(54,83,151)" class="selected">Home</a></li>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Awesome! Thanks Excavator for the info on the line issue. I have that resolved using the inline styling you mentioned. Now....if only I can gain some insight on the text wrapping, I'd be good to go! Any takers?

    I appreciate all the assistance so far!!

    Chris

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I can't think of any good way to make that happen with inline styling in the navigation.

    This is what inline-block display was designed for but it's not supported by all browsers (won't work in IE5.5 - not that it matters, but it also won't work in FF2, IE6, IE7, or IE8 as IE7).

    See here for details about browser support for this display type:
    http://www.quirksmode.org/css/display.html

    If nothing else you could make the menu image-based. It's not ideal but it would work just fine as-is by replacing text with an image. If you do this just be sure to include alt and title attributes for the images to maintain accessibility.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    New Coder
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm not overly excited about the image based option, that's what I migrated away from when I went to this design. I could create another class if needed for the line on the left of the menu bar. I'd much rather have the ability to to do a two-line, text based menu that I can keep centered up on the page. I'd also like to keep the rollover effect and the "class=selected" formatting.

    Is there a way to essentially create 10 text boxes at 90px each, stack two lines of text within, then align them left to right to fill the 900px ".nav2 ul" space?

    Thoughts? Thanks!
    Last edited by cvecchi; 11-20-2009 at 05:43 PM.

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I know what you mean. I avoid image-based menus like the plague.

    You'll probably have to live with incomplete browser support and use display:inline-block; for the <a> tags then. That should mostly only leave FF2 users out of the loop.

    Try something like this:
    Code:
    .nav2 li a {margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;display:inline-block;max-width:80px;line-height:12px;}
    You're going to have problems with your vertical divider lines though, so be prepared to struggle with that.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by cvecchi View Post
    I'm not overly excited about the image based option, that's what I migrated away from when I went to this design. I could create another class if needed for the line on the left of the menu bar. I'd much rather have the ability to to do a two-line, text based menu that I can keep centered up on the page. I'd also like to keep the rollover effect and the "class=selected" formatting.

    Is there a way to essentially create 10 text boxes at 90px each, stack two lines of text within, then align them left to right to fill the 900px ".nav2 ul" space?

    Thoughts? Thanks!
    Here's a good start for you. You will need to make a class so you can add padding-bottom to the li's that only have one line of text and then add your own styling too.

    /edit - I deleted this one
    Last edited by Excavator; 11-20-2009 at 06:13 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That works when uploaded to web...somehow though Dreamweaver doesn't render it the same way the browser does. It's making it tough to edit, but in form it does work.

    http://www.squadron282.com/test/

    Thanks!

  • #15
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I haven't read Excavator's code yet but I came up with something that seems to work for FF3 at least.

    Try this CSS for the nav2 section:
    Code:
    /*----------------------------*/
    /* 2.4 - Navigation - Level 2 */
    /*----------------------------*/
    .nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
    .nav2 ul {width: 900px; margin: 0px; padding: 0px; text-align: center; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold;}	
    .nav2 li {display: inline; /*line-height: 2.5;*/ list-style: none; margin: 0px; padding: 0px;font-size:34px;border-right:1px solid #365397;}
    .nav2 li a {margin: 0px 0px 0px 0px; padding: 5px; /*border-right: solid 1px rgb(54,83,151);*/ color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;display:inline-block;font-size:10px;}
    .nav2 li a.multi_line {width:90px;line-height:12px;}
    .nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
    .buffer {clear: both; width: 900px; height: 10px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}
    Then add class="multi_line" to any <a> tags that you want to have wrapped on 2 lines.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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