The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Tabbed layout

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #30709

    I’m very new to this and am trying to create a tabbed layout where the active tab doesnt have a line underneath it. Most of the versions I’ve been playing with work fine but in my case it doesn’t and I’m wondering if it’s because my links dont go to new pages, they only toggle a hidden div. Is it possible to tweak my CSS to get this to work properly? This is what I have currently:

    ul#tabnav { /* general settings */
    text-align: left; /* set to left, right or center */
    margin: 0 0 0 0; /* set margins as desired */
    border-bottom: 1px solid #000; /* set border COLOR as desired */
    list-style-type: none;
    padding: 1px 5px 4px 0px; /* THIRD number must change with respect to padding-top (X) below */

    ul#tabnav li {
    display: inline;

    body#tab1 li.tab1, body#tab2 li.tab2 {
    border-bottom: 1px solid #fff;
    background-color: #fff;

    body#tab1 li.tab1 a, body#tab2 li.tab2 a {
    background-color: #fff;
    color: #000;
    position: relative;
    top: 1px;
    padding-top: 4px;

    ul#tabnav li a { /* settings for all tab links */
    padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
    border: 1px solid #000; /* set border COLOR as desired; usually matches border color specified in #tabnav */
    background-color: #dbdbdb; /* set unselected tab background color as desired */
    color: #000; /* set unselected tab link color as desired */
    margin-right: 0;
    text-decoration: none;
    border-bottom: none;

    ul#tabnav a:hover { /* settings for hover effect */
    background: #fff; /* set desired hover color */

    then as my HTML I have:

    Hope someone can assist!


    please enclose your code with code tags so everybody can understand it better. thanks!


    I don’t know if your tabs are images or text but:

    body#id ul#tabnav li a.home {

    or assuming you’re using sprites for your tabs

    body#id ul#tabnav li a.home{
    background-position:0 -50px;

    I’m really tired, sorry for any code errors in there.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.