CMS Made Simple Forums

Hey guys

i got help here weeks ago about how to go about have different pages in a site with different header images.

My site is here : link to site

as you can see if you click on the "sports" section the header changes.

If you then click in the "armagh stars" drop down in sports you should see another different image.

and that image should show in alll sub pages under armagh stars.

This does work in ie 7 etc but  older versions it doesnt. this is currently how im making it work.

#header.league-archive{ background-image:  url(uploads/images/footyheader2.jpg); background-repeat: no-repeat;

}

#header.armagh-stars{ background-image:  url(uploads/images/armaghstars/header.jpg); background-repeat: no-repeat;

}

#header.goalie-coaching{ background-image:  url(uploads/images/armaghstars/header.jpg); background-repeat: no-repeat;

}




div#main {
  margin-left: 2%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
  margin-right: 10%; /* and some air on the right */
}

anyone any ideas how i can make this work over all platforms?

nobody got any ideas on this?

Just use background: url.........

I have done this for this page link

but in ie 6 it still shows the wrong header

in an earlier post i made about asking for help with this show here http://forum.cmsmadesimple.org/index.php/topic,24256.0.html

sven said this

This is so easy to do with the sectionimage tag.
I've done this on a site I've made http://www.slsshowtechniek.be/cmsms11/
You can easily configure this tag (for example the levels you want new header etc.)
The sectionimage tag is not installed by default. You shoudl download it and add it.
http://dev.cmsmadesimple.org/projects/sectionimage

regards,

Sven

i think maybe this mite work well and might work better for my site as it is getting bigger and bigger every day, but i tried figuring out the steps of how to implement this and couldnt get it working, the notes in the help section of the item werent very helpfull, has anyone used this method before?

does it work in all browers?

can you show me a step by step process of how to use it?

First thing I noticed your markup is a big mess.
Some tags aren't closed (ie. the header div) and you have html tags in your css files.
If you want your code to render properly this is the first thing you should worry about.

Tip: try to validate your (x)html and css to see what's wrong with your markup.
The css validation chokes on your css, not sure why but maybe because of the html tags.

I tried to reproduce your problem but I can't. It works fine in all browsers like this:

In IE you need to just use the class and not the #header before it...

ok so i see i have over 50 errors in that xhtml site

but i need help and advice now and what exactly is wrong with each one, is there anywhere you can go online to get help with validating your code?


for instante take this first error

Line 45, Column 117: required attribute "alt" not specified.
…images/advertisers/headeradvert.gif" >✉
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for and type="text/javascript" for .

my code on this section is this

div#headersponsor
{
position:absolute;
left: 0px;
top:170px;
width:800px;
height:65px;
z-index:15;

background-image:  url(uploads/images/advertisers/headeradvert.gif); background-repeat: no-repeat;

}

what is wrong with my code? i cant see anything but then again im a rookie at this
what do i have to do to correct this?  are all the xhtml errors in the stylesheet? or are some in the template also?

The errors you find here are all in your html (template).
For example, take the first error. On line 45 you have this: This is not valid markup.
1. you open a DIV and A tag, but you don't close them.
2. the IMG tag is missing the ALT atribute and is not closed.

The proper way is: It's not absolutely nescesary to repair all errors but I would fix as many as possible. At least make sure you close all tags properly. Just try to fix the errors one by one, and use Google to find out what's the proper way to use the code which gives you errors.
Also remove the and tags from your CSS, they don't belong there.

i cant see the code u wrote just scrollbars??

It's only 1 line of code..
Not sure why you don't see it, maybe try another browser.

yea it was my browers fault damm u internet explorer! im making firefox my default as off now!!!!

Hey guys ok i have fixed 50 of the css issues thanks for all the help, but i have 4 remaining and i cant crack the problem anyone see it for me?

Validation

OK so what you may want to do is DL PSPad editor, then look at the source view of the pad and copy/paste it into a HTML multihighlighter file in it, there is a little icon that looks like a paper with corner folded over, and start at the top and hit all the <div with your mouse to see if they have a close div tag...

I could just tell you what the problem is but this way you have another great tool to use and it will help you find the problem...

cheers man! that is really cool it of kit really appricaite you showing me that as oppossed to just telling me my mistake.

woohoo! im xhtml correct hehe

well done

Is your initial "different header images" problem solved as well?