SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: CSS tabs

  1. #1
    Mlle. Ledoyen silver trophy seanf's Avatar
    Join Date
    Jan 2001
    Location
    UK
    Posts
    7,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS tabs

    Hello everyone,

    I am using the SimpleBits CSS tabs in a project. What I want to do is use a border instead of an image to create the line under the tabs, making it easier to provide different colour schemes. Can anyone help?

    Thanks

    Sean
    Harry Potter

    -- You lived inside my world so softly
    -- Protected only by the kindness of your nature

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Do you mean the small line under all the buttons?

    That is produced by this line?
    Code:
    background: url(../images/tab_bottom.gif) repeat-x bottom;
    If so remove the background property from it and add this to the file:
    Code:
    #tabnav {
    	   height: 20px;
    	   margin: 0;
    	   padding-left: 10px;
               border-bottom: 1px solid #eee;
    	}
    Hope it helps

    later
    Johnny

  3. #3
    Mlle. Ledoyen silver trophy seanf's Avatar
    Join Date
    Jan 2001
    Location
    UK
    Posts
    7,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, it's not that easy. If you just add a bottom border and adjust the height of the tabs it works in Firefox, but not in IE (spacing is off). Thanks for your help though

    Sean
    Harry Potter

    -- You lived inside my world so softly
    -- Protected only by the kindness of your nature

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Oops

    I did not think about that. Sorry.

    Later
    Johnny

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Sean,

    I did an example of some tabs here that doesn't use images that may be of use.

    http://www.pmob.co.uk/temp/tabmenu_mine.htm

    I'll have a look at the simple bits one in a minute or two and see what needs changing

    Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This should do it (unless i've missed something obvious ).
    Code:
    #tabnav
     {
      height: 20px;
      margin: 0;
      padding-left: 10px;
      border-bottom:1px solid #ccc;
     }
    #tabnav a {  
     position:relative;
     top:1px;
    } 
    
    Hope that helps.

    Paul

  7. #7
    Mlle. Ledoyen silver trophy seanf's Avatar
    Join Date
    Jan 2001
    Location
    UK
    Posts
    7,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll give it a go. Thanks Paul

    Sean
    Harry Potter

    -- You lived inside my world so softly
    -- Protected only by the kindness of your nature


Bookmarks

Posting Permissions

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