PDA

View Full Version : Multiple Banners on different pages.

danitar
Aug-26-2009, 04:56 PM
I'm having problems with getting the main banner not to show on my Wedding Photography Category and pages and having the second banner to show up. I found what looked like two different ways to add the CSS

CSS

#my_banner {
width: 760px;
height: 160px;
margin: 0 auto;
background: url(http://danitar.smugmug.com/photos/630403077_njXEa-L.jpg) no-repeat;
}
/* hide my_banner2 by default */
#my_banner2 {display:none;}
/* hide my_banner1 in the Wedding-Photography category */
.category_Wedding Photography #banner1 {display:none;}
/* show my_banner2 in the Wedding-Photography category */
.category_Wedding Photography #banner2 {display:block;}



Custom Header

<div id="my_banner"><a href="<A href="http://www.danitarogersphotography.com"><img">http://www.danitarogersphotography.com"><img src="/img/spacer.gif" width="760" height="160" border="0" /></a></div>
<div id="my_banner2">
<img src="http://danitar.smugmug.com/photos/630483599_pjZpx-L.jpg">
</div>


Can someone try to help me see what I have done wrong?

www.danitar.smugmug.com (http://www.danitar.smugmug.com)

I went ahead and removed the second banner that was showing up on all of my pages...so this isn't all of the code I had entered when both were showing up.

I tried this and must have done something wrong or have some setting(s) set wrong somewhere else. http://dgrin.smugmug.com/gallery/1932865

Thanks, Danita
jfriend
Aug-26-2009, 05:02 PM
The proper CSS class for the Wedding Photograph category is:

.category_Wedding_Photography

There are no spaces in CSS identifiers so your CSS with a space in it will never work. If you are ever stumped on this, you can just do a View Source in any browser, look at the page HTML, find the <body> tag and look at the actual classes in there. In this case, it looks like this:

<body class="category category_Wedding_Photography tempClass notLoggedIn bodyColor_Black">

Your HTML is also pretty messed up.

If you are displaying your banner image as a background image, you do not need two physical banners. You can just change the background image on different pages using HTML and CSS like this:

<div id="my_banner"><a href="http://www.danitarogersphotography.com"><img src="/img/spacer.gif" width="760" height="160" border="0" /></a></div>



#my_banner {
width: 760px;
height: 160px;
margin: 0 auto;
background: url(http://danitar.smugmug.com/photos/630403077_njXEa-L.jpg) no-repeat;
}

/* set different image in the Wedding Photography category */
.category_Wedding_Photography #my_banner {background-image: url(http://danitar.smugmug.com/photos/630483599_pjZpx-L.jpg);}

This alone will give you a clickable banner with an image that changes in the Wedding Photography category.
danitar
Aug-26-2009, 05:11 PM
The proper CSS class for the Wedding Photograph category is:

.category_Wedding_Photography

There are no spaces in CSS identifiers so your CSS with a space in it will never work. If you are ever stumped on this, you can just do a View Source in any browser, look at the page HTML, find the <body> tag and look at the actual classes in there. In this case, it looks like this:

<body class="category category_Wedding_Photography tempClass notLoggedIn bodyColor_Black">

Your HTML is also pretty messed up.

If you are displaying your banner image as a background image, you do not need two physical banners. You can just change the background image on different pages using HTML and CSS like this:

<div id="my_banner"><a href="http://www.danitarogersphotography.com"><img src="/img/spacer.gif" width="760" height="160" border="0" /></a></div>



#my_banner {
width: 760px;
height: 160px;
margin: 0 auto;
background: url(http://danitar.smugmug.com/photos/630403077_njXEa-L.jpg) no-repeat;
}

/* set different image in the Wedding Photography category */
.category_Wedding_Photography #my_banner {background-image: url(http://danitar.smugmug.com/photos/630483599_pjZpx-L.jpg);}

This alone will give you a clickable banner with an image that changes in the Wedding Photography category.


THANK YOU!!! Last night I tried Wedding-Photography and, of course, that didn't work. I guess I should have posted my question before I spent two hours on it, with no luck! Thank you again!