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 18

Thread: CSS tabs

  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS tabs

    Hi I am looking at changing some example css tabs I found on the web.




    I want the foremost tab not to have a line underneath it. The tab itself only has borders top right and left. Not bottom. The bottom line is (bear with me) the top of the main area below.

    I had the idea of enlarging the tab slightly in height (but so the top stays still and the bottom bit of the tab moves down). Then setting the z index value to higher than that of the main area; whilst also keeping the main area in the same place so the tab is slightly overlayed and in just the area where the tab is the main areas top border is dissapeared so you get the affect I want.

    Sorry for how confusing that is but I'm just typing whilst thinking i'm sure i'll read this back in a minute and find it makes no sense!


    Any ideas what exactly I have to change in my css? And if it's possible to get the main area to stay still whilst moving the tab down slightly.

    http://www.cwprint.co.uk/Pic/cwsite.css/



    Thanks in advance


    titaniumbean.

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    try doing this to your list items in tabs

    #tabs li {
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    }

    You've got so many border settings that it is hard to tell what is taking precedent. I would remove all your border settings on the tabs until your borders disappear then add those I just gave you. If that doesn't work post again. Should be able to figure this one out.
    Once I thought I was wrong but I was mistaken.

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried what you suggested, though I don't understand where you are trying to go with it.

    Below is what you get.



    The border settings you changed, I want to keep. And I want to overrule the border of the main section below but just so that it's only over ruled at the point where the foremost tabs bottom is, not for the rest. If you think of a filing system when you choose a certain tab it is flush and the rest are behind the page. That is exactly the look that I want to try and get.


    Any other ideas? Or anyone able to implement the idea I had?


    thanks in advance


    titaniumbean.

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Alright well I gotta say that the code is a little messy so I am sure I am missing something but try adding this to your hover attributes. You seem to have hover declared in more than one place though so you might want to fix that.

    Basically make your padding-bottom on hover a few pixels greater, this may push things down in which case we will try something else. Now if it doesn't overlap still you will need to use z-index.

    Z-index uses an integer value and 0 is the default. I'd probably just go with z-index: top; to make sure that it is on top of everything else but anything above 0 should technically work.

    I have tried to help but don't have time to go through all your code but be careful of things like this:
    Code:
    #tabs a:hover {background: #FFFFCC;
    position: relative;
    top: 0;
    padding: 5px 4px 6px 10px;
    margin-top: 0px;}
    #tabs a.active {
    position: relative;
    top: 0;
    margin: 0 2px 0 0;
    float: left;
    background: #FFF3B3;
    border-right: 1px solid #666;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    
    padding: 6px 4px 6px 10px;
    text-decoration: none;
    color: #333;}
    #tabs a.active:hover {
    position: relative;
    top: 0;
    margin: 0 2px 0 0;
    float: left;
    background: #FFFFCC;
    border-right: 1px solid #666;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    padding: 6px 4px 6px 10px;
    text-decoration: none;
    color: #333;}
    Once I thought I was wrong but I was mistaken.

  • #5
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Whose is that messy code?? Disugsting I tells ye.

    First things first, will print out my css code and tidy it up, i'd been just changing it constantly and haven't really overviewed it all so will do that and then look at what you were saying. Thanks very much.


    titaniumbean.

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah I hear you, I find when you run into a snag in CSS the tendancy is to just keep trying things and then a half hour later you can't remember what half the stuff is doing there anymore. heh.
    Once I thought I was wrong but I was mistaken.

  • #7
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    lol yup i've slimmed the code down now to :-

    Code:
    #tabs a
    {
    position: relative;
    top: 0;
    margin: 1px 2px 0 0;
    float: left;
    background: #EDEBE3;
    border-right: 1px solid #AAA;
    border-top: 1px solid #AAA;
    border-left: 1px solid #AAA;
    padding: 6px 4px 6px 10px;
    text-decoration: none;
    color: #333;
    }
    #tabs a:hover 
    {
    background: #FFFFCC;
    margin-top: 0px;
    }
    #tabs a.active 
    {
    margin: 0 2px 0 0;
    background: #FFF3B3;
    border-right: 1px solid #666;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    }

    I hope that's better. I'm going to go back and look at what you said; and try that and will come back to you.


    titaniumbean.
    As far as I can tell you're as guilty as a puppy sitting next to a pile of poo !!

  • #8
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did what you said and created the code below :-

    Code:
    #tabs a:hover 
    {
    background: #FFFFCC;
    margin-top: 0px;
    padding-bottom: 10px;
    z-index: top;
    }

    Even with it set to 10px, nothing changed/moved/morphed/dissapeared etc on the site.

    Any other ideas?

    titaniumbean.
    As far as I can tell you're as guilty as a puppy sitting next to a pile of poo !!

  • #9
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Try adding display: block; so that it is an actual block of that colour. That way it really should overlap that nasty little border. I don't think there is anyway to actually change the item's height per se so it will have to be done with padding and display block I think.
    Once I thought I was wrong but I was mistaken.

  • #10
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try adding a 1px line as background, then when the tab is selected use the background color for border-bottom :P
    CATdude about IE6: "All your box-model are belong to us"

  • #11
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Neither of those ideas work! This is so very annoying. I think i'm going to move on and leave it as a problem to come back and fix another time maybe when I know more about CSS and I can ask more people!!! :-p Keep your ideas coming though...
    or if you really fancy emailing me @ this address and I'll send you the stuff and you can always have a look at it yourself if you're into that sort of thing!

    thanks

    titaniumbean.
    As far as I can tell you're as guilty as a puppy sitting next to a pile of poo !!

  • #12
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah, I know it is possible and it must be something really stupid and simple but I'm at work right now. I'm suprised displaying as a block and then increasing the bottom-padding (which effectively changes the height when displaying as a block) did not work. Are you sure it isn't just that you have the link properties declared in the wrong order? Is there not a bug where hover and active and stuff don't always work properly if you do not state them in the correct order? I seem to recall that happening to me when I was just trying to change link colours and text-decoration.
    Once I thought I was wrong but I was mistaken.

  • #13
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Link properties declared in the wrong order eh? You know alot more than me so I really don't know.


    But as i've said all help whenever it comes is very appreciated.


    titaniumbean.
    As far as I can tell you're as guilty as a puppy sitting next to a pile of poo !!

  • #14
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wrong order:
    Code:
    a.test {color:red}
    a {color:black}
    all links will appear in black.

    good order:
    Code:
    a {color:black}
    a.test {color:red}
    CATdude about IE6: "All your box-model are belong to us"

  • #15
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    aaaah i c!

    thanks.


    oooh I have another question.

    I have two images, one above the other on the left hand side (LHS) of the page. I have one image on the RHS of the page. All done by css (same horizontal height). I want 2 more images one next to the other (so in other words : inline) in the middle of the page. What's the best way with css to do this. I was looking for some sort of
    Code:
    <div id="midbadges">position: inline</div>
    http://www.cwprint.co.uk/Pic/badges%20question.jpg
    For some reason the broken link is the badge I want to move (i've fixed the link but forgot to update the screenshot, and it's not actually important). I want it in the middle can someone help?

    I'm not exactly sure how to do this best though. can someone help?


    titaniumbean.
    Last edited by titaniumbean; 08-17-2005 at 06:23 PM.
    As far as I can tell you're as guilty as a puppy sitting next to a pile of poo !!


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