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 17

Thread: Tabs Bar

  1. #1
    New Coder
    Join Date
    Nov 2011
    Location
    Dallas, Texas
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Tabs Bar

    Can someone please tell me how to fix my tabs bar? I want all the tabs lines up on a row....SAVING CENTER! all the way to Technology ALL in ONE row.

    Thank you!!!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mamarti,
    Is it float drop you are seeing? That's usually a width problem, what you put in a containing element has to fit in it.
    We'll need a link though, I'm sure you just forgot...
    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

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    and your website is?.......

    You float your list items to accomplish this, but without a link or your code we cant say much more.
    Teed

  • #4
    New Coder
    Join Date
    Nov 2011
    Location
    Dallas, Texas
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh....LOL A link would help!!

    frugalwallets.com

    I don't know how to fix validation errors. LOL
    Last edited by msmarti; 11-04-2011 at 04:19 AM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yes, a link does help

    Like I said before, what you put in a containing element needs to actually fit in it.
    At 990px width, your #subnav is too narrow for 1030px wide ul#menu-bottom-menu.

    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.
    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

  • #6
    New Coder
    Join Date
    Nov 2011
    Location
    Dallas, Texas
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Is this due to the images I have in my sidebar boxes?

    Can't I just adjust the width and height?

  • #7
    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 msmarti View Post
    Is this due to the images I have in my sidebar boxes?
    No.

    Can't I just adjust the width and height?
    You could adjust the width of your whole site to accomodate the menu.
    Or,
    You could reduce the padding on the anchors to narrow the menu till it fits...
    Try making these changes highlighted in red -

    Code:
    #subnav li a {
            color: #663300;
    	border-right: 1px solid #;
    	border-left: 1px solid #663300;
    	display: block;
    	/*padding: 9px 16px 8px 15px;*/
    	padding: 9px 12px 8px 12px;
    	position: relative;
    	text-decoration: none;
    }
    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

  • Users who have thanked Excavator for this post:

    msmarti (11-04-2011)

  • #8
    New Coder
    Join Date
    Nov 2011
    Location
    Dallas, Texas
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok I did that.....I don't really understand css, what is that suppose to change?

  • #9
    New Coder
    Join Date
    Nov 2011
    Location
    Dallas, Texas
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I see where it made my tabs line up, but it looks a little off now and at top.

  • #10
    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 msmarti View Post
    Ok I did that.....I don't really understand css, what is that suppose to change?
    Each anchor (link) is the width of the text plus the left and right padding you've put on it.
    That makes each li the same width as the anchor it contains.
    All the li's combined width is how wide your ul is.
    Width of the ul cannot exceed the width of the containing element you've put it in or it will drop an li to the next line to make room.
    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

  • #11
    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 msmarti View Post
    I see where it made my tabs line up, but it looks a little off now and at top.
    Yes, it's not a very good menu.
    Play with that padding a bit and see if you can adjust it more to your liking.
    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

  • #12
    New Coder
    Join Date
    Nov 2011
    Location
    Dallas, Texas
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

  • #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
    Push that #header down with a little bottom margin on #nav.
    Like this -
    Code:
    #nav {
        clear: both;
        color: #509AC9;
        font-family: 'Oswald',arial,serif;
        font-size: 11px;
        margin: 6px 0 0;
        overflow: hidden;
        width: 990px;
    }
    Last edited by Excavator; 11-04-2011 at 08:32 AM.
    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 2011
    Location
    Dallas, Texas
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Those bags are coded......If I move the header down it will mess up where the Icons on the bags are won't it?

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You could adjust it from the heights too. Try this -
    Code:
    
    #nav ul {
    height: 38px;
    background: #f00;
    	width: 100%;
    }
    #subnav ul {
    height: 38px;
    background: #f00;
    	width: 100%;
    }
    Background color just makes it easier to see what's going on.
    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


  •  
    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
    •