Advanced Search

Results 1 to 9 of 9

Thread: How do you center CSS tabs

  1. #1
    Join Date
    Aug 2007
    Location
    Ontario, Canada
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How do you center CSS tabs

    How do you center these CSS tabs, I tried everything I could think of..
    http://www.dynamicdrive.com/style/cs...ing-tabs-menu/

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Try putting the tabs and the paragraph within a div with a set width, and centering that div:

    Code:
    <div style="width:50%; margin-left:auto; margin-right:auto;">
    
    <div id="glowingtabs">.....
    ...<p class="iepara">Paragraph that follows...</p>
    
    </div>

  3. #3
    Join Date
    Aug 2007
    Location
    Ontario, Canada
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok, i will try that, also, it changes all my text color to blue, which code is doing that

  4. #4
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    To change the color of the text change here:
    Code:
    #glowingtabs a span{
    ...
    color:blue;
    }
    If you want to change the color of the selected tab, do it here:
    Code:
    #glowingtabs #current a span{ /*Selected Tab style*/
    ...
    color: black;
    }
    Also, for IE6, you'll need to add another div to my first suggestion:
    Code:
    <div style="text-align:center">  <!--this centers in IE, then add text-align:left in div below -->
    <div style="border:1px solid black; width:500px; margin-left:auto; margin-right:auto; text-align:left;">
    ...
    </div>
    </div>

  5. #5
    Join Date
    Aug 2007
    Location
    Ontario, Canada
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Veronica View Post
    To change the color of the text change here:
    Code:
    #glowingtabs a span{
    ...
    color:blue;
    }
    i change this to black, but the rest of my text is still blue, here is my CSS code..

    Code:
    <style type='text/css'>.acttbl { width:100&#37;; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; } .sellerdetails { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#000000; } .table1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; width:100%; } .table2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; width:100%; }
        
    #glowingtabs{
    float:left;
    width:100%;
    font-size:90%;
    line-height:normal;
    border-bottom: 1px solid #7e9fff; /*Add border strip to bottom of menu*/
    }
    
    #glowingtabs ul{
    list-style-type: none;
    margin:0;
    margin-left: 5px; /*Left offset of entire tab menu relative to page*/
    padding:0;
    }
    
    #glowingtabs li{
    display:inline;
    margin:0;
    padding:0;
    }
    
    #glowingtabs a{
    float:left;
    background:url(media/glowtab-left.gif) no-repeat left top;
    margin:0;
    margin-right: 5px; /*spacing between each tab*/
    padding:0 0 0 9px;
    text-decoration:none;
    }
    
    #glowingtabs a span{
    float:left;
    display:block;
    background:url(media/glowtab.gif) no-repeat right top;
    padding: 4px 12px 2px 3px;
    font-weight:bold;
    color:Black;
    align:center;
    }
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #glowingtabs a span {float:none;}
    /* End IE5-Mac hack */
    
    #glowingtabs a:hover span {
    color: black;
    }
    
    #glowingtabs #current a{ /*Selected Tab style*/
    background-position:0 -82px; /*Shift background image up to start of 2nd tab image*/
    }
    
    #glowingtabs #current a span{ /*Selected Tab style*/
    background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
    color: black;
    }
    
    #glowingtabs a:hover{ /*onMouseover style*/
    background-position:0% -82px; /*Shift background image up to start of 2nd tab image*/
    }
    
    #glowingtabs a:hover span{ /*onMouseover style*/
    background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
    }
    
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
    padding-top: 1em;
    }
    </style>
    <![endif]-->
    and here is the code that references to the tabs..
    Code:
    <div id="glowingtabs">
    <ul>
    <li>
    <a href="#payment" title="Payment"><span>Payment</span></a></li>
    <li><a href="#shipping" title="Shipping"><span>Shipping</span></a></li>
    <li><a href="#warranty" title="Warranty"><span>Warranty</span></a></li>
    <li><a href="#ebaystore" title="ebay Store"><span>ebay Store</span></a></li>
    <li><a href="#contact" title="Contact Us"><span>Contact Us</span></a></li>
    </ul>
    </div>
    <br style="clear: left;" />

  6. #6
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hmmm... I'm looking at it with your code, and the text all seems to be black, which is what the css is telling it to be. Do you have any other styles on the page that are perhaps over-riding this? Are all the links on your page blue or just the tabs?

  7. #7
    Join Date
    Aug 2007
    Location
    Ontario, Canada
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    here is my other styles in the same style sheet..
    Code:
    <style type='text/css'>.acttbl { width:100%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; } .sellerdetails { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#000000; } .table1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; width:100%; } .table2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; width:100%; }
    and right below this is where the glowing tabs styles start

    all my text changed to blue from black, my current links are blue, which is the same

  8. #8
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That shouldn't affect the tabs.

    What color do you want the tabs to be? And what color do you want the rest of the links on your page to be? And what color do you want your text to be? ALso, can you post the link to your page?
    Last edited by Veronica; 08-10-2007 at 06:26 PM.

  9. #9
    Join Date
    Aug 2007
    Location
    Ontario, Canada
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i was able to fix the blue text problem, something in my code was causing all my text to be blue

    i will be using a different menu than the one i mentioned, i will be using this one instead..
    http://www.dynamicdrive.com/style/cs...id-block-menu/

    i tried centering it with code u gave me, but it didn't work

    also, where are u suppose to put that IE6 code u provided

    thanks

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
  •