Different header image problems in some platforms

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

Different header image problems in some platforms

Post by buntrosgali »

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?
Top
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

Re: Different header image problems in some platforms

Post by buntrosgali »

nobody got any ideas on this?
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Different header image problems in some platforms

Post by Dr.CSS »

Just use background: url.........
Top
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

Re: Different header image problems in some platforms

Post by buntrosgali »

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?
Last edited by buntrosgali on Fri Aug 29, 2008 10:21 am, edited 1 time in total.
Top
sn3p
Forum Members
Forum Members
Posts: 169
Joined: Mon Oct 15, 2007 2:27 pm

Re: Different header image problems in some platforms

Post by sn3p »

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:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <style type="text/css">
    div#header {
      width: 804px; 
      height: 160px; 
      background-image: url(header.jpg);
      background-repeat: no-repeat;
    }
    #header.test {
      background-image: url(header2.jpg);
    }
  </style>
</head>
</__body>
  <div id="header"></div>
  <div id="header" class="test"></div>
<__body>
</__html>
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Different header image problems in some platforms

Post by Dr.CSS »

In IE you need to just use the class and not the #header before it...
Top
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

Re: Different header image problems in some platforms

Post by buntrosgali »

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?
Last edited by buntrosgali on Fri Aug 29, 2008 9:43 pm, edited 1 time in total.
Top
sn3p
Forum Members
Forum Members
Posts: 169
Joined: Mon Oct 15, 2007 2:27 pm

Re: Different header image problems in some platforms

Post by sn3p »

The errors you find here are all in your html (template).
For example, take the first error. On line 45 you have this:

Code: Select all

<div id="headersponsor"><a href="http://www.pigsflymedia.com"><img src="uploads/images/advertisers/headeradvert.gif" >
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:

Code: Select all

<div id="headersponsor"><a href="http://www.pigsflymedia.com"><img src="uploads/images/advertisers/headeradvert.gif" alt="sometext" /></a></div>
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.
Top
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

Re: Different header image problems in some platforms

Post by buntrosgali »

i cant see the code u wrote just scrollbars??
Top
sn3p
Forum Members
Forum Members
Posts: 169
Joined: Mon Oct 15, 2007 2:27 pm

Re: Different header image problems in some platforms

Post by sn3p »

It's only 1 line of code..
Not sure why you don't see it, maybe try another browser.
Top
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

Re: Different header image problems in some platforms

Post by buntrosgali »

yea it was my browers fault damm u internet explorer! im making firefox my default as off now!!!! :D
Top
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

Re: Different header image problems in some platforms

Post by buntrosgali »

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
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Different header image problems in some platforms

Post by Dr.CSS »

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...
Top
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

Re: Different header image problems in some platforms

Post by buntrosgali »

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

woohoo! im xhtml correct hehe :D
Top
sn3p
Forum Members
Forum Members
Posts: 169
Joined: Mon Oct 15, 2007 2:27 pm

Re: Different header image problems in some platforms

Post by sn3p »

well done :)

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

Return to “Layout and Design (CSS & HTML)”