SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tab color when visited

    Hi all, am so glad to be a member of this forum, i hope my agony will be solved here. My problem is that i have a website i have created with tab menus/ Links for navigation horizontally. In normal mode the color of text is white, and the tab color is blue. I would like to change the color of text and tab background of the current tab/active tab page, but i cant find my way round this. the website is at stoptheworm dot org. please help me solve this problem so as to indicate to the user viewing it, the current active tab.

    Regards

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Give the body of each page a unique identifier for the body

    Code html4strict:
    <body id="whychildren">

    Then you can give each tab a similar unique identifier

    Code html4strict:
    ...
    <li id="aboutustab"><a href="aboutus.php" target="_parent">About us </a></li> 
    <li id="whychildrentab"><a href="whyschoolchildren.php" target="_parent">Why  Children </a></li> 
    <li id="partnershiptab"><a href="partnership.php" target="_parent">Partnership</a></li> 
    ...

    and use CSS to target the appropriate tab for each page

    Code css:
    body#aboutus #aboutustab,
    body#whychildren #whychildrentab,
    body#partnership #partnershiptab { color: black; }

    The benefit of using that technique is that it is then only the body identifier that needs to change, in order to change how the tabbed menu looks.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your quick reply. i understand that part about giving unique id to both the body and the links. But when it comes to the CSS part, i don't understand where i should put the css code because i have a <body> tag already in my css file. these are the first few lines of my css file, please help me locate where i should have the css code u provided:

    body {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #3366FF;
    background-color: #CCCCCC;
    font-style: normal;
    }

    a:link, a:visited { color: #FF0000; text-decoration: underline; font-weight: normal; }
    a:active, a:hover { color: #3300FF; text-decoration: none; }

    Regards

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The CSS code I provided should be placed in the area where the tabbed links are styled. They do not affect or replace the body definitions that you already have there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    /* menu */
    #mo_menu_wrapper {
    clear: both;
    width: 100%;
    height: 41px;
    margin: 0 auto;
    background: url(images/menu_bg.jpg) repeat-x;
    }

    #mo_menu {
    width: 980px;
    height: 41px;
    margin: 0 auto;
    }

    #mo_menu ul {
    margin: 0 0 0 28px;
    padding: 0px;
    list-style: none;
    }

    #mo_menu ul li {
    padding: 0px;
    margin: 0px;
    display: inline;
    }

    #mo_menu ul li a {
    float: left;
    display: block;
    height: 22px;
    width: 128px;
    padding: 13px 0 0 0;
    background: url(images/menu.jpg) bottom no-repeat;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    outline: none;
    }

    #mo_menu li a:hover, #templatemo_menu li .current {
    color: #000;
    background: ;
    }

    /* end of menu*/

    is it this part that is should use, coz am abit of a beginner. If u don mind please edit my code so as i could understand well, Thanks in advance.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Replace the last part relating to .current, with the example code from before.

    You will just need to expand the examples to cover all of the tabs in your menu.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    body#aboutus #aboutustab,
    body#whychildren #whychildrentab,
    body#partnership #partnershiptab li.current { color: black; }

    Should it be like that. the way i have replaced it above, i will appreciate if u consider an illustration, sorry for my inadequacy.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Get rid of the li.current part. That is completely redundant when using the body identifier technique. Removing the .current class also means that you can use the same menu template for all pages.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothing is changing, infact the way the menus used to swap color when i hoved over them is now not working. i dont seem to get it well. i dont know where i messed

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to the site? You can't yet post hyperlinks, but you can post as follows:

    www dot example dot com slash example dot html

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Max: stoptheworm dot org.

    depash: your css isn't working yet because it looks for the body id. Your pages still just have plain <body> tags.

    If you are going to use Paul's code:
    Code:
    body#aboutus #aboutustab,
    body#whychildren #whychildrentab,
    body#partnership #partnershiptab { color: black; }
    Then your HTML has to have different id's. On the Why Children page, the HTML needs to have
    <body id="whychildren">

    and then the whychildren tab needs
    <li id="whychildren"><a href="whyschoolchildren.php" target="_parent">Why Children </a></li>

    You could have kept the li.current in your CSS at the beginning, but then on the why children page the whychildren <li> would need the class of "current" added to it.

    So it looks like you started out just using a class of .current. Paul recommended "the body id technique" which is fine, but if you use Paul's code then it does not use the class of "current". Instead, every page has a different id on the <body> tag in the html and your menu has id's (or classes) on each <li>.

    So, every page, your menu HTML needs to be like this:
    Code:
        <div id="templatemo_menu">
            <ul>
                <li><a href="index.php" id="hometab">Home</a></li>
                <li><a href="aboutus.php" id="aboutustab">About us </a></li>
                <li><a href="whyschoolchildren.php" id="whychildren">Why  Children </a></li>
                <li><a href="partnership.php"  id="partnershiptab">Partnership</a></li>
                <li><a href="guestbook.php" id="volunteertab">Volunteer</a></li>
                <li><a href="photogallery.php" id="gallerytab">Photo Gallery </a></li>
                <li><a href="contact.php" class="last" id="contacttab">Contact</a></li>
            </ul>
    (I removed the target stuff because you are not using framesets)

    then only the home page has this HTML
    <body id="home">

    and the why children page has this HTML
    <body id="whychildren">

    and the volunteer page has this HTML
    <body id="volunteer">

    (and so do this for every page)


    so your CSS can be like this:
    #home #hometab,
    #whychildren #whychildrentab,
    #volunteer #volunteertab {
    current-tab styles here;
    }

    (the above code only has three pages, so you would add in all your other pages too)

    The reason to use the body id technique is when you have a backend language building your HTML for you. People who have PHP or some language calling an include with the menu will use the body id technique so that every page has exactly the same menu.

    If you are hand-writing these HTML pages without using includes then the class technique that you started with would have worked. On the whychildren page you would have had the class="current" only on the why children <li> and on the home page you would have had the class="current" only on the home <li>.

    So Paul is saying, remove the class="current" in the HTML and remove the li.current in the CSS because you do not use these classes with the body id technique.

  12. #12
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot Stomme for the good elaborate explanation you have provided, it has enlighten me alot. But cause am abit lost, i have decide to paste my entire css code here so as you can point to me where am making the mistake. I will appreciate anything you will provide Thanks again.
    CSS FILE:
    /*
    This is the work of Patrick Kiumbe of Dynamic Inc http://dynamiinc.net46.net
    */




    body {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #3366FF;
    background-color: #CCCCCC;
    font-style: normal;
    }

    a:link, a:visited { color: #FF0000; text-decoration: underline; font-weight: normal; }
    a:active, a:hover { color: #3300FF; text-decoration: none; }




    p {
    margin: 0px;
    padding: 0px;
    }

    img {
    margin: 0px;
    padding: 0px;
    border: none;
    }

    .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }

    .margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
    .margin_bottom_15 { clear: both; width: 100%; height: 15px; font-size: 1px; }
    .margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
    .margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
    .margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
    .margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
    .margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }

    .margin_right_40 { margin-right: 40px; }
    .margin_right_60 { margin-right: 60px; }

    .fl { float: left; }
    .fr { float: right; }

    .button_01 a{
    clear: both;
    display: block;
    width: 104px;
    height: 25px;
    padding-top: 5px;
    background: url(images/readmore_button.jpg) no-repeat;

    color: #000;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    }


    .header_01 {
    clear: both;
    padding-bottom: 30px;
    margin-bottom: 15px;
    font-size: 22px;
    letter-spacing: 2px;
    color: #000000;
    background: url(images/header_underline.jpg) left bottom no-repeat;
    }

    .header_02 {
    clear: both;
    font-size: 18px;
    letter-spacing: 2px;
    color: #CC0000;
    height: 20px;
    margin-bottom: 20px;
    text-align: center;
    background-repeat: repeat-x;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    background-image: url(images/side_header_bg.jpg);
    }

    .header_03 {
    clear: both;
    font-size: 18px;
    color: #dad021;
    font-weight: bold;
    padding: 0 0 10px 0;
    margin: 0 0 15px 0;
    background: url(images/banner_divider.jpg) bottom repeat-x;
    text-align: center;
    }

    .header_04 {
    clear: both;
    font-size: 14px;
    color: #c7bb10;
    font-weight: bold;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    background-image: url(images/footer_divider.jpg);
    background-repeat: repeat-x;
    }

    .header_05 {
    clear: both;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    }

    .header_05 a{
    clear: both;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    }

    #templatemo_header_wrapper {
    width: 100%;
    height: 160px;
    background-color: #111d28;
    background-repeat: repeat-x;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    }

    #templatemo_header {
    width: 980px;
    margin: 0 auto;
    }

    #templatemo_header #site_logo {
    float: left;
    width: 900px;
    height: 100px;
    font-size: 44px;
    color: #ffffff;
    background-color: #000033;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-image: url(images/logo_blank.jpg);
    background-repeat: repeat;
    padding-top: 20px;
    }

    /* end of header */

    /* menu */
    #templatemo_menu_wrapper {
    clear: both;
    width: 100%;
    height: 41px;
    margin: 0 auto;
    background: url(images/menu_bg.jpg) repeat-x;
    }

    #templatemo_menu {
    width: 980px;
    height: 41px;
    margin: 0 auto;
    }

    #templatemo_menu ul {
    margin: 0 0 0 28px;
    padding: 0px;
    list-style: none;
    }

    #templatemo_menu ul li {
    padding: 0px;
    margin: 0px;
    display: inline;
    }

    #templatemo_menu ul li a {
    float: left;
    display: block;
    height: 22px;
    width: 128px;
    padding: 13px 0 0 0;
    background: url(images/menu.jpg) bottom no-repeat;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    outline: none;
    }


    #whychildrentab
    {color:#FF0000;
    }

    /* end of menu*/

    /* content */

    #tempatemo_content_wrapper {
    clear: both;
    width: 980px;
    margin: 0 auto;
    background-color: #CC0000;
    }

    #templatemo_content {
    width: 900px;
    margin: 30px;
    padding: 9px;
    border: 1px solid #c3c4c5;
    background: #d8d7d7;
    }

    .recent_projects {
    float: left;
    width: 900px;
    height: 260px;
    margin-bottom: 10px;
    background: #215b8d;
    }

    .project_slideshow {
    float: left;
    width: 610px;
    height: 260px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
    background-position: right;
    background-image: url(images/slider_right_divider.jpg);
    background-repeat: repeat-y;
    }

    .project_content {
    float: left;
    width: 250px;
    height: 180px;
    overflow: hidden;
    background: #1d4b73;
    padding-top: 40px;
    padding-right: 5px;
    padding-bottom: 40px;
    padding-left: 5px;
    }

    .project_content p{
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    margin-bottom: 20px;
    }

    #content_panel {
    clear: both;
    width: 898px;
    border: 1px solid #c6c5c5;
    background: #eeeeee;
    }

    #column_w610 {
    float: left;
    width: 510px;
    padding: 40px 48px 20px 50px;
    background: #ffffff;
    }

    #column_w290 {
    float: left;
    width: 290px;
    padding: 40px 0 20px 0;
    background: #eeeeee url(images/content_right_column_bg.jpg) left repeat-y;
    }

    .news_section {
    clear: both;
    margin: 0 20px 20px 20px;
    }

    .news_section .news_date {
    float: left;
    width: 70px;
    height: 50px;
    padding: 20px 0 0 0;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    background: url(images/news_date_bg.jpg) no-repeat;
    }

    .news_section .news_date span {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: normal;
    }

    .news_section .news_content {
    float: right;
    width: 160px;
    }

    #column_w290 .inputfield {
    height: 16px;
    width: 235px;
    padding: 2px 5px;
    margin: 0 0 10px 0;
    font-size: 12px;
    font-variant: normal;
    line-height: normal;
    }

    #column_w290 .submitbutton {
    float: right;
    margin: 0px;
    padding: 2px 6px 4px 6px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    vertical-align: bottom;
    white-space: pre;
    }

    .column_w290_content {
    margin: 0 20px;
    }

    #column_w610 p {
    padding-bottom: 20px;
    }

    .section_01 {
    clear: both;
    position: relative;
    width: 430px;
    padding: 30px 40px 20px 40px;
    margin-bottom: 20px;
    background: url(images/section_middle.jpg) repeat-y;
    }

    .section_01 .top {
    position: absolute;
    width: 510px;
    height: 22px;
    top: 0px;
    left: 0px;
    background: url(images/section_top.jpg) top left no-repeat;
    }

    .section_01 .bottom {
    position: absolute;
    width: 510px;
    height: 22px;
    bottom: 0px;
    left: 0px;
    background: url(images/section_bottom.jpg) bottom left no-repeat;
    }

    .list_with_icon {
    margin: 0 0 0 30px;
    padding: 0px;
    list-style: none;
    }

    .list_with_icon li {
    margin: 0 0 10px 0;
    padding: 0 0 0 30px;
    background: url(images/list_icon.jpg) left top no-repeat;
    }

    /* end of content */

    /* footer */

    #templatemo_footer_wrapper {
    width: 100%;
    margin: 0 auto;
    background: #111d28;
    }

    #templatemo_footer {
    width: 920px;
    padding: 30px;
    margin: 0 auto;
    color: #828c96;
    background: url(images/footer_bg.jpg) bottom center no-repeat
    }

    .section_w920 {
    text-align: center;
    width: 920px;
    }

    .section_w184 {
    float: left;
    width: 144px;
    padding-top: 0;
    padding-right: 40px;
    padding-bottom: 0;
    padding-left: 180px;
    }

    .section_w368 {
    float: left;
    width: 328px;
    padding: 0 40px 0 0;
    }

    .footer_menu_list {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    .footer_menu_list li {
    margin: 0px;
    padding: 0px;
    }

    .footer_menu_list li a {
    color: #828c96;
    text-decoration: none;
    }
    /* end of footer */
    #column_mine {
    float: left;
    width: 878px;
    background: #ffffff;
    padding-top: 40px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    }
    .project_slideshowabout {
    float: left;
    width: 610px;
    height: 260px;
    overflow: hidden;
    text-align: center;
    background-color: #CC9999;
    background-position: right;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    }
    .project_slideshowwhy {

    float: left;
    width: 610px;
    height: 260px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
    background-color: #CCFFFF;
    background-position: right;
    }
    .project_slideshowguest {

    float: left;
    width: 610px;
    height: 260px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
    background-color: #99CCFF;
    background-position: right;
    }
    .project_slideshowphoto {
    float: left;
    width: 610px;
    height: 260px;
    overflow: hidden;
    text-align: center;
    background-color: #CCCCCC;
    background-position: right;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    }
    .project_slideshowcontact {
    float: left;
    width: 610px;
    height: 260px;
    overflow: hidden;
    text-align: center;
    background-color: #FFFFCC;
    background-position: right;
    padding: 0px;
    }
    #column_w620 {
    float: left;
    width: 770px;
    background: #ffffff;
    padding-top: 40px;
    padding-right: 48px;
    padding-bottom: 20px;
    padding-left: 50px;
    }

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    In order for this technique to work, you will need to be able to change the body tag on each page.

    For example:
    Code html4strict:
    <body id="whychildren">

    and

    Code html4strict:
    <body id="volunteer">

    It is only when you are able to do that, that the above-suggested tab technique will be of use for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pmw57, i ahve changed just one page i.e whyschoolchildren to <body id="whyschoolchildrentab">. Note that you suggested me to change to <body id="whyschoolchildren"> without the word tab at the end. does this affect anything on the css file?

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Yes it does affect things. You will want the body identifier to be "whyschoolchildren" and the appropriate menu tab on all pages to be "whyschoolchildrentab"

    Why? So that only on the "whyschoolchildren" page will you be affecting the "whyschoolchildrentab" element with the following css

    Code css:
    body#whyschoolchildren #whyschoolchildrentab { color: black; }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Enthusiast catrinatalents's Avatar
    Join Date
    Dec 2009
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great explanation by everyone. Hope the css problem has been solved now.


Tags for this Thread

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
  •