Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    Hello,

    I'm having some problem to redesign a webpage content. Some sub-links are displayed as Tabs inside the main page (pic#1). The main idea is the Tabs having a 1 px black line in the bottom until the end of page. Another problem is, some pages have 2 or more rows of Tabs (pic#2), with make my work more difficult, as I have to find a way for the "bottom line" follow always the last row of Tabs.

    This is a grossly made diagram of my idea for the Tabs:
    Code:
    _______________\main page\______________
    |                                       |
    |[tab 1][tab 2][tab 3]__________________|
    |                                       |
    |              Content                  |
    |_______________________________________|
    I want the bottom line following the Tabs row going until the end of the page, and with 2 rows of Tabs, like this:
    Code:
    _____________\main page\____________
    |                                   |
    |[tab 1][tab 2][tab 3][tab 4][tab 5]|
    |[ tab 6 ][ tab 7 ]_________________|
    |                                   |
    |               Content             |
    |___________________________________|
    Any ideas?

    Thanks in advance!
    Attached Images Attached Images

  2.  

  3. #2
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    please someone?

  4. #3
    ljm
    ljm is offline
    Senior Member ljm's Avatar
    Join Date
    Aug 2006
    Location
    Manchester, England
    Posts
    284
    Member #
    13684
    Liked
    1 times
    Take the border off the individual tabs and shove them all in a div. Use CSS to style the div and give it a border on the bottom:

    The HTML:
    Code:
    <div class='tabs'> <!-- existing tab HTML goes here -->
    The CSS:
    Code:
    .tabs { border-bottom: 1px solid #000000; }
    You may need to add more to the CSS to style it exactly how you want.

  5. #4
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    Hello!

    Thank you very much, it's working now!

    But now I have another problem: it's working perfect in IE 6 but in Firefox 2.0 the bottom line only shows in the 1st row of tabs...

    Here is the CSS for a possible fix:

    HTML Code:
    #tabs { 
            padding-top: 8px; 
            width: 503px;
            height: 18px; 
            //height: auto; 
            background: #FEF5FE; 
            font-size: 0.8em;
            margin-left: 5px;
     }
            
    #tabs .item { 
            float: left; 
            width: auto; 
            height: 18px; 
            border-width: 1px; 
            padding: 0 0px 0 0px; 
            margin-right: 0px; 
     }
     
    #border_tabs {
            border-bottom: 1px solid #999;
    }
    And here in the html:
    HTML Code:
    <div id="border_tabs">
              [% tabs %]
              </div>
    What I did wrong?

    Thanks in advance!
    Attached Images Attached Images


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com