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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    410
    Thanks
    119
    Thanked 0 Times in 0 Posts

    Sizing and aligning CSS tabs

    i used this method (http://icant.co.uk/articles/flexible-css-menu/) to design the tabbed navigation on this page of my site: http://www.shirtsaboutnothing.com/studio_red_oak1.html

    however, for some reason the tabs aren't properly shrinking the original tab images so that the curved right side is fit within each tab. as you can see, the right side each tab just cuts off the image so that the side is straight. but i'd like the right side to have the curve just like the left.

    any idea how to fix? thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,686
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello sixrfan,
    I messed with this a bit and couldn't get it to work either.
    The right curve is there, it's just the tabs.gif on the anchor is still visible behind it.
    Best I came up with is a background color on the spanned tabs.gif.
    Like this -
    Code:
    ol#sku_tabs span {
    	background: #632908 url(template_pics/tabs.gif) 100% 0;
    	display: block;
    	line-height: 2em;
    	padding-right: 10px;
    }
    Here is a demo of the sliding doors method of doing tabs. It uses two images though...
    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:

    sixrfan (12-30-2009)

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    410
    Thanks
    119
    Thanked 0 Times in 0 Posts
    nothing wrong with that. seems to do the trick. thanks!

    also though, how do i get the tabs centered? i can't figure out where to put text-align: center;

    thanks!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,686
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    You can fake a center like this -
    Code:
    /* Studio Tabs */
    ol#sku_tabs {
    overflow: auto;
    	list-style: none;
    	margin: 0 0 0 110px;
    	padding: 0;
    }
    Otherwise, you would need to give your ol a width and center it with margin: 0 auto;

    Here is a third method that you might like.
    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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,686
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by sixrfan View Post
    nothing wrong with that. seems to do the trick. thanks!
    Glad it works for you. I'm still trying to figure out what the difference is between yours and the example you followed...
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,686
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    So, it's pretty obvious what's different when you look at the images. You're using a transparent gif that doesn't lend itself well to the way we're stacking these images.

    Look at the two differrent images here -


    Wow, I was stumped on that one way too long!
    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:

    sixrfan (12-30-2009)


  •  

    Posting Permissions

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