1. Home
  2. Forums Index
  3. Browser Side / CSS 12:27 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS code needed for different headers

         

Maceman

8:15 pm on Sep 29, 2008 (gmt 0)

10+ Year Member



Hi Folks,

I am new here but feel I will have lots of questions going forward, as I am getting into webdesign much more and enjoy it.....

I am creating a new page- slowly but surely.... The problem I have is similar to one which was answered a couple months ago from a thread i read, but I am so new, I am afraid i don't understand because the code was from someone else's situation. I feel I need to ask it as it pertains to my situation, so here goes...

So I want to put different headers on different pages, but the CSS is overriding.

Here is the CSS part that is overriding:

/** layout **/
#wrapper {
width: 678px;
min-height: 750px;
_height: 750px;
background: url(images/header.jpg) no-repeat;
position: relative;
background-image: url(images/header.jpg);
}

And the HTML:

<div id="wrapper">

Actually, looking through the html file, i don't see the header file at all, although in dreamweaver i can browse to the image file i want....

So in a nutshell, on the first page i want images/header.jpg and on the second i want images/header2.jpg etc.. etc... I may add more header images when i make more pages if i can learn what to do with just 2 to start...

I am extremly new at CSS so i need cut and paste instruction basically. I appreciate any and all help and I hope i have explained correctly and inserted the appropriate info needed above.
Regards,
Maceman

Maceman

8:24 pm on Sep 29, 2008 (gmt 0)

10+ Year Member



sorry, i missed putting the doc type as well- my apologies!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

alt131

9:36 pm on Sep 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Maceman!

Thanks for stripping your code, and posting your doctype ;)

Looking at your code, there are a couple suggestions I'd also like to make in addition to trying to answer the quesation.

  • Nick_W posted a css crash course [webmasterworld.com] that's worth checking, and has a section on background images.
  • w3schools [w3schools.com] has lots of editable examples to learn about background
  • Think about a better way of doing this: 
    background: url(images/header.jpg) no-repeat;
    PLUS 
    background-image: url(images/header.jpg);
    (you don't need both), AND whether you really need 
    position: relative;
    when you check them out. 
  • _height: 750px;
    is a "hack" that sends a height internet explorer versions 6 and below because they don't understand 
    min-height
    . However, later versions do, so the best way is to send the difference using a conditional comment. (Check out the post in the forum library.)

Actually, looking through the html file, i don't see the header file at all, although in dreamweaver i can browse to the image file i want....

If you mean the background image is not displaying, double check your path to the image, and also check in a browser rather than Dreamweaver simulation.

So in a nutshell, on the first page i want images/header.jpg and on the second i want images/header2.jpg etc.. etc... I may add more header images when i make more pages if i can learn what to do with just 2 to start...

There are many ways to do this, but this is one:

In your css
#wrapper {
width: 678px;
min-height: 750px;
_height: 750px;
}

.headerone {
background: #ff0 url(images/header.jpg) top left no-repeat;
}

.headertwo {
background: #ff0 url(images/header2.jpg) top left no-repeat;
}

In your html
<div id="wrapper" class="headerone"> ...
and for the other image:
<div id="wrapper" class="headertwo">

Another option is multiple classes:


In your css
.wrapper { /*note change to class by using a dot */
width: 678px;
min-height: 750px;
_height: 750px;
}

.headerone {
background: #ff0 url(images/header.jpg) top left no-repeat;
}

.headertwo {
background: #ff0 url(images/header2.jpg) top left no-repeat;
}

In your html
<div class="wrapper headerone"> ...
and for the other image:
<div class="wrapper headertwo">


A third option is to remove the background from #wrapper and on each page use an embedded stylesheet to make the declaration:

In your external stylesheet
#wrapper {
width: 678px;
min-height: 750px;
_height: 750px;
}

In your html
<style type = "text/css">
#wrapper {
background: #ff0 url(images/header.jpg) top left no-repeat;
}
</style>
<body>
<div id="wrapper"> ...

And just change the image to 

header2
etc as suits

[edit]correct term[/edit]

[edited by: alt131 at 10:15 pm (utc) on Sep. 29, 2008]

kas187

9:37 pm on Sep 29, 2008 (gmt 0)

10+ Year Member



without seeing the whole of your html and css its a bit hard to judge what kind of layout your going for, but nonetheless here's a possible solution. if your html looks anything like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Page Title</title>
<style type="text/css" media="screen">
#header {background: url(images/header.jpg) no-repeat top;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<!-- your header content should be here -->
</div>
<div id="content">
<!-- your main content should be here -->
</div>
</div>
</body>
</html>

then this should work however for your second page your should change the id of the header to something like header2 like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Page Title</title>
<style type="text/css" media="screen">
#header {background: url(images/header.jpg) no-repeat top;}
#header2 {background: url(images/header2.jpg) no-repeat top;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header2">
<!-- your header content should be here -->
</div>
<div id="content">
<!-- your main content should be here -->
</div>
</div>
</body>
</html>

notice there's an additional css rule within the head and header id has been changed to header2. The additional css rule will now overwrite the first rule to apply a new background image. Personally this wouldn't be my approach but it will get the result you want.

Maceman

11:26 pm on Sep 29, 2008 (gmt 0)

10+ Year Member



Thank-you so much folks!

Now, just as a point of clarification, when you say
"In your html
<div id="wrapper" class="headerone"> ...
and for the other image:
<div id="wrapper" class="headertwo">"

do you mean in each and every html i would put this? So in my case I have 2 files(so far), so i would put this into both html files?
Thanx in advance!

Maceman

11:50 pm on Sep 29, 2008 (gmt 0)

10+ Year Member



^^^

Ok, great... I understood now what you meant. You meant to put the one div id in the first html page, and the other in the second... Wonderful...

Ok, that worked awesome, except for some weird anomoly of yellow that now appears. Can you please have a look for me at <removed> and the other page is the contact.html. Both have yellow that wasn't there before- may be an easy fix, but I need help please. Thanx!

[edited by: jatar_k at 12:54 am (utc) on Sep. 30, 2008]
[edit reason] no urls thanks [/edit]

alt131

11:55 pm on Sep 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Now, just as a point of clarification, when you say ...
So in my case I have 2 files(so far), so i would put this into both html files?

The difficulties of explanations ;)
Nope, only one is necessary - depending on which header "image" you want to display.
Maybe this will help:

think - I want header.jpg so:
.headerone {background: #ff0 url(images/header.jpg) top left no-repeat; }
so use:
<div id="wrapper" class="headerone">

think - I want header2.jpg so:
.headertwo{ background: #ff0 url(images/header2.jpg) top left no-repeat; }
so use:
<div id="wrapper" class="headertwo">

think - I want more image options so write new rules - eg header3.jpg
.headerthree { background: #ff0 url(images/header3.jpg) top left no-repeat; }
and use:
<div id="wrapper" class="headerthree">

And so on.
The names for the classes are arbitrary - Rename 
.headerone
to 
.header
to exactly match 
header.jpg
if it helps

Maceman

12:00 am on Sep 30, 2008 (gmt 0)

10+ Year Member



wohoo! Hey, thatnx so much folks! I figured out what was wrong and it works great now. I see that i can use this same coding to add more in future as well. I am so appreciative of thsi forum and your help!

So i just took out the #ff0 which was the yellow and voila!

cheers,
Maceman

alt131

12:02 am on Sep 30, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ok, cross posting ;)

Good you've got it figured.

Maceman

6:01 pm on Sep 30, 2008 (gmt 0)

10+ Year Member



thanx so much! Yes, it is working great.... Now what i need next (and this may be for a different thread somewhere... is a script that will allow me(or the end-user) to be able to click on the name of one of my songs and it will populate a window(like a form window) with the lyrics, while at the same time playing a sample of the music. I already have the music sample uploaded, but it will be neat to have lyrics as well.. I am searching the web for ideas of what exists! Thanx again for helping me!

alt131

10:56 pm on Sep 30, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Maceman,
Yes, this needs a different thread. Perhaps a different forum.
There are ways to use css to show/hide information, but if you are wanting to populate, perhaps php might be best (some would say javascript). If this is a large site it might be appropriate to look at databasing.

Think about what you are trying to achieve, plus the scale of the information you will utlimately be working with to figure the question/forum.

Maceman

11:30 pm on Sep 30, 2008 (gmt 0)

10+ Year Member



Thanx for that. Ok, this may be a stupid question, but... can I use php on one of my pages, and not use it on the others, or will i have to redesign my other 2 pages in php.... Basically, I don't feel i would need a database at this point. I am really only going to populate the window with lyrics I have written for the album I have out, it will grow to hopefully2 or 3 albums in time, but nothing more than say 20 -30 songs of text which is small.... I know with the player i used, I used an xml playlist file which had the names of the songs in it to populate into the MP3 player, and then i uploaded song clips to a folder(ie album1)... I wonder if i can do something like this where i use xml for the song title, but instead of an MP3 file being pulled, maybe a txt file is pulled in... Hmmmm... Now that would be a good thing if it would work. How to trigger the music along with would be tricky i'd imagine, but boy o boy this will be great... Thanx for the pointers once again.... I need to give this some thought!

alt131

11:41 pm on Sep 30, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



can I use php on one of my pages, and not use it on the others,

Yes you can.

All the other thoughts you have are quite possible too - it just depends on the final outcome, and what technology (eg coding languages) you want to use.)

However to keep this real simple - for something that will not ever be huge - might be show/hide. Do a search for "stu nicholls" and check out "dmonstrations", "show me more" to see if something like that could be modified for your pupose.

Have a think about possibilities and post a new thread in the appropriate forum.

Maceman

12:05 am on Oct 1, 2008 (gmt 0)

10+ Year Member



[edited by: jatar_k at 12:54 am (utc) on Sep. 30, 2008]
^^^

My apologies to jatar_k as well for posting another URL. I didn't see the edit before and didn't know I couldn't do that. Please remove them. Thanx!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 12:27 am May 2, 2026