I have a CSS tag that formats a header on the page. Currently it has an image
as part of the description.
I have currently copied the tag(#desc) and pasted numerous instances of them
and renamed them to #desc1,2 etc, and used different images. I feel
reasonably certain that this is NOT the right way to put in different images
in the header of different pages. What is the right way to do this?

#desc {
height: 200px;
color: #ffffff;
padding: 0;
background: #505050 url('images/top.jpg') no-repeat top left;
clear: both;
margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
}

#desc1 {
height: 200px;
color: #ffffff;
padding: 0;
background: #505050 url('images/back.jpg') no-repeat top left;
clear: both;
margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
}

#desc2 {
height: 200px;
color: #ffffff;
padding: 0;
background: #505050 url('images/left.jpg') no-repeat top left;
clear: both;
margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
}

Wayne Wells wrote:
> I have a CSS tag that formats a header on the page. Currently it has
> an image as part of the description.
> I have currently copied the tag(#desc) and pasted numerous instances
> of them and renamed them to #desc1,2 etc, and used different images.
> I feel reasonably certain that this is NOT the right way to put in
> different images in the header of different pages. What is the right
> way to do this?

Well, I am no CSS expert but what is wrong with this?

There is of course another way.
Use one rule (say #desc) and then use JS to alter the background image in
that rule.

While I have used JS to add a style, I haven't used it access an existing
rule and alter a style within that rule. I just know it can be done. If you
want to pursue ths avenue, I am sure others will reply with how to do it.

--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au

Wayne Wells wrote:
> I have a CSS tag that formats a header on the page. Currently it has
> an image as part of the description.
> I have currently copied the tag(#desc) and pasted numerous instances
> of them and renamed them to #desc1,2 etc, and used different images.
> I feel reasonably certain that this is NOT the right way to put in
> different images in the header of different pages. What is the right
> way to do this?

Here is a slightly different way to do it

#desc , #desc1 , #desc2 /* , #desc3, #desc4 etc. */
{
height: 200px;
color: black; /* OR color: #fff; */
padding: 0;
background-color: #505050;
background-repeat: no-repeat
background-position: top left;
clear: both;
margin: 5px 0 0 0; /* OR margin-top: 5px ; */
}

#desc { background-image: url('images/top.jpg'); }
#desc1 { background-image: url('images/back.jpg'); }
#desc2 { background-image: url('images/left.jpg'); }
/* and similarly for #desc3, #desc4 etc. */

--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au

I would use an external style sheet named styles.css in the examples
below, linked to all pages:
In the style sheet use

#desc {
height: 200px;
color: #ffffff;
padding: 0;
background: #505050 url('images/top.jpg') no-repeat top left;
clear: both;
margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
}

In every page, just before </head> in code view add
<link rel="stylesheet" href="styles.css" <type=text/css">
<style type="text/css">
#desc {background-image:url('images/topx.jpg');}
</style>
</head>

topx.jpg will replace top.jpg in that page. Change topx.jpg to the
correct image in each page.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/

"Wayne Wells" <(E-Mail Removed)> wrote in message
news:F7A39C03-8F7C-4730-ACD2-(E-Mail Removed)...
>I have a CSS tag that formats a header on the page. Currently it has
>an image
> as part of the description.
> I have currently copied the tag(#desc) and pasted numerous instances
> of them
> and renamed them to #desc1,2 etc, and used different images. I feel
> reasonably certain that this is NOT the right way to put in
> different images
> in the header of different pages. What is the right way to do this?
>
> #desc {
> height: 200px;
> color: #ffffff;
> padding: 0;
> background: #505050 url('images/top.jpg') no-repeat top left;
> clear: both;
> margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
> }
>
> #desc1 {
> height: 200px;
> color: #ffffff;
> padding: 0;
> background: #505050 url('images/back.jpg') no-repeat top left;
> clear: both;
> margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
> }
>
> #desc2 {
> height: 200px;
> color: #ffffff;
> padding: 0;
> background: #505050 url('images/left.jpg') no-repeat top left;
> clear: both;
> margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
> }
>
>
>

Simple, functional, and practical. I like it.

--
Murray
--------------
MVP FrontPage


"Ronx" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
>I would use an external style sheet named styles.css in the examples below,
>linked to all pages:
> In the style sheet use
>
> #desc {
> height: 200px;
> color: #ffffff;
> padding: 0;
> background: #505050 url('images/top.jpg') no-repeat top left;
> clear: both;
> margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
> }
>
> In every page, just before </head> in code view add
> <link rel="stylesheet" href="styles.css" <type=text/css">
> <style type="text/css">
> #desc {background-image:url('images/topx.jpg');}
> </style>
> </head>
>
> topx.jpg will replace top.jpg in that page. Change topx.jpg to the
> correct image in each page.
> --
> Ron Symonds - Microsoft MVP (FrontPage)
> Reply only to group - emails will be deleted unread.
> FrontPage Support: http://www.frontpagemvps.com/
>
> "Wayne Wells" <(E-Mail Removed)> wrote in message
> news:F7A39C03-8F7C-4730-ACD2-(E-Mail Removed)...
>>I have a CSS tag that formats a header on the page. Currently it has an
>>image
>> as part of the description.
>> I have currently copied the tag(#desc) and pasted numerous instances of
>> them
>> and renamed them to #desc1,2 etc, and used different images. I feel
>> reasonably certain that this is NOT the right way to put in different
>> images
>> in the header of different pages. What is the right way to do this?
>>
>> #desc {
>> height: 200px;
>> color: #ffffff;
>> padding: 0;
>> background: #505050 url('images/top.jpg') no-repeat top left;
>> clear: both;
>> margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
>> }
>>
>> #desc1 {
>> height: 200px;
>> color: #ffffff;
>> padding: 0;
>> background: #505050 url('images/back.jpg') no-repeat top left;
>> clear: both;
>> margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
>> }
>>
>> #desc2 {
>> height: 200px;
>> color: #ffffff;
>> padding: 0;
>> background: #505050 url('images/left.jpg') no-repeat top left;
>> clear: both;
>> margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
>> }
>>
>>
>>
>
>