Forums

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

Home Forums Other Simple css tabs

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #31273
    Spearfrost
    Member

    Hey guys,

    I am building a website piece by piece trying to understand how and where everything is place and supposed to be placed. I think I am getting the hang of it… but of all things to get snagged on… are my silly little css tabs.

    Just follow the link and you will see what I mean. (The only linked elements that works.) Please help me if you can. I would truly appreciate it.

    LINK: http://www.spearfrost-studio.com/user.html

    This is the mockup (link below) of what I intended for it to look like:

    LINK: http://www.spearfrost-studio.com/USERPROFILE_fourthtest.html

    Here is the css

    /* begin css tabs */

    ul#tabnav {
    text-align: right;
    font: bold 11px verdana, arial, sans-serif;
    border-bottom: 1px solid #da5e21;
    list-style-type: none;
    padding: 20px 11px 4px 11px;
    }

    ul#tabnav li {
    display: inline;
    }

    body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4, body#tab5 li.tab5, body#tab6 li.tab6 {
    margin: 0 4px 0 0;
    padding: 7px 6px 4px 6px;
    color: #CCCCCC;
    border-top: 1px solid #da5e21;
    border-left: 1px solid #da5e21;
    border-right: 1px solid #da5e21;
    border-bottom: 1px solid #333131;
    background-color: #333131;

    }

    body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a, body#tab5 li.tab5 a, body#tab6 li.tab6 a {
    background-color: #333131;
    color: #999999;
    position: relative;
    top: 1px;
    padding-top: 5px;
    }

    ul#tabnav li a {
    padding: 4px 5px;
    border: 1px solid #da5e21;
    background-color: #da5e21;
    color: #ffffff;
    margin-right: 5px;
    text-decoration: none;
    border-bottom: none;
    }

    ul#tabnav a:hover {
    background: #f58149;
    }

    /* end css tabs */
    #65637
    dhechler
    Member

    Hey Spearfrost,
    Looks like you are putting all of your styling on

    #tab1 li.tab1 a

    Which will style the actual link element rather than the list element, which would just be

    #tab1 li.tab1

    it seems like your code could be condensed in this way when styling the links

    #tabnav li a

    and

    #tabnav li

    That will target all of the links of list elements in the unordered list #tabnav

    as far as solving your problem of disappearing tabs, you don’t have a link to the current page on the current page tab. So if you are on the profile page, your profile page tab code looks like this

  • profile
  • Whereas all of the other tabs look like this

  • gallery
  • and your css to make the tab button is targeting the link. Therefore your profile tab is left out.

    try this code instead.


    ul#tabnav li {
    padding: 4px 5px;
    border: 1px solid #DA5E21;
    background-color: #DA5E21;
    color: white;
    margin-right: 5px;
    text-decoration: none;
    border-bottom: none;
    }

    ul#tabnav li a {
    color: white;
    text-decoration: none;
    }
    #65638
    dhechler
    Member

    That code I wrote will break your :hover you have set up. So to solve that, just use this

    ul#tabnav li:hover {
    background: whatever your hover background color is;
    }

    instead of

    ul#tabnav li a:hover {

    }
    #65568
    Spearfrost
    Member

    Thanks alot for the help dhechler… but I seem to have snagged myself into another glitch. Now part of the selected tab shows up behind the unselected tab. I have tweaked, edited and redid the entire css.. and nothing helps. Please help. I would truly appreciate it.

    > I changed the html codes as suggested for the actual listing. (no problem)

    Normal tabs work fine now.. but another issue arise… I know it’s there… staring at my face but I can’t see the damn sailboat. (kudos to those who get the reference)

    Still hoping for a solution.

    LINK to site: http://www.spearfrost-studio.com/selling.html

    /* begin css tabs */

    ul#tabnav { /* ALL TABS */
    text-align: right;
    font: bold 11px verdana, arial, sans-serif;
    border-bottom: 1px solid #da5e21;
    list-style-type: none;
    padding: 20px 8px 4px 8px;
    }

    ul#tabnav li {
    display: inline;
    padding: 4px 5px;
    border: 1px solid #DA5E21;
    background-color: #333131;
    color: white;
    margin-right: 5px;
    text-decoration: none;
    border-bottom: none;
    }

    body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4, body#tab5 li.tab5, body#tab6 li.tab6 {
    margin: 0 4px 0 0;
    padding: 7px 6px 4px 6px;
    color: #CCCCCC;
    border-top: 1px solid #da5e21;
    border-left: 1px solid #da5e21;
    border-right: 1px solid #da5e21;
    border-bottom: 1px solid #333131;
    background-color: #333131;
    }

    body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a, body#tab5 li.tab5 a, body#tab6 li.tab6 a {
    background-color: #333131;
    color: #999999;
    position: relative;
    top: 1px;
    padding-top: 5px;
    }

    ul#tabnav li a {
    padding: 4px 5px;
    border: 1px solid #da5e21;
    background-color: #da5e21;
    color: #ffffff;
    margin-right: 5px;
    text-decoration: none;
    border-bottom: none;
    }

    ul#tabnav a:hover {
    background: #f58149;
    }

    /* end css tabs */
    #65569
    dhechler
    Member

    Ok. Here’s my suggestion. On the page that corresponds with the tab (so user.html = the profile tab and so on) I would suggest putting a class of “active” on the tab whose page is displaying at the time. Then your code and css might look something like this



    /* this could also be written as just ul .tab (see code above) instead of ul#tabnav li */
    ul#tabnav li {
    display: inline;
    color: white;
    margin-right: 5px;
    text-decoration: none;
    border-bottom: none;
    }

    /* this could also be written as just ul .tab a (see code above) instead of ul#tabnav li a*/
    ul#tabnav li a {
    padding: 4px 5px;
    border: 1px solid #DA5E21;
    background-color: #DA5E21;
    color: white;
    text-decoration: none;
    border-bottom: none;
    }

    /* this could also be written as just ul .active (see code above) instead of ul#tabnav li.active */
    ul#tabnav li.active {
    padding: 4px 5px;
    border: 1px solid #DA5E21;
    background-color: Whatever background color you want for the active tab;
    color: white;
    text-decoration: none;
    border-bottom: none;
    }
    #65554
    Spearfrost
    Member

    Works like a dream now. ^^ Thank you so much dhechler I truly, TRULY appreciate the help.

    #65817
    dhechler
    Member

    Anytime.

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