Can’t hide footer on non-home pages

2 Views

I’m trying to hide the footer from non-home pages. Below is what I have tried, This is the website 

.home #first  {
    width:950px;
    margin-top:20px ;
    border-top: 1px dotted #9bacd4;
    background:#ff0000;
}


.home #first img {
    margin:5px;
}

.home #first h3
{
   font-size:16px;
   font-weight:bold;
   margin:5px 0px 15px 15px;    
}

#first {
    display:none;
}
Post Views: 2

Related posts

Leave a Reply

4 comments

  1. Both of your CSS rules .home #first and #first are used. If you have overlapping properties, the most specific wins. So in this case add display:block to .home #first selector and it will override the display:none, as .home #first is more specific.

  2. You should set it to hidden first and then display it on a specific condition, for example on the homepage:

    /* hide for all pages */
#first {
    display: none;
}

/* but display it on the homepage */
.home #first {
    display: block;
}

  3. I would put a class in the tag of your home page that says something like .

    Assuming your footer block has something like or you could then use CSS to specify that the footer is only visible on the Home Page.

    .footer {display:none;}
.home .footer {display:block;}

    Should work!