Forum Moderators: not2easy
I'm VERY NEW to this (read: have little to no experience doing web design) and have been re-designing a website for a business using a CSS template and am completely self taught, so go easy on me, please :).
I'm wondering how to go about changing the header image to a different one for each page of the site? I *think* I have to ID the body tag for each page and change the CSS to reflect this as well but have absolutely no idea how to go about doing so. I have 14 pages for this site and need a different image for each page.
My DOCTYPE is: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" and after having read the blurb about first timers posting on this forum, I'm thinking my doctype is out of date (I have no idea when the template was originally created).
Here's the CSS:
/* Header description area */
#desc {background:#505050 url(images/front.jpg) bottom left repeat-y;
and the HTML: (I've put in "=====" where there's any identifying info)
</head>
<body>
<div id="container">
<div id="logo">
<h1><a href="index.html"><img
style="border: 0px solid ; width: 100px; height: 100px; float: left;"
alt="logo"
src="../========/images/logo100pixels.jpg" /></a></h1>
<h1>
</h1>
<h1> <span style="color: rgb(0, 0, 153);">======</span></h1>
<p> =======</p>
</div>
Any help would be greatly appreciated!
In your html you have
<img style="border: 0px solid ; width: 100px; height: 100px; float: left;" alt="logo" src="../========/images/logo100pixels.jpg" />
If you somewhere in your html have something (not shown in your sample with an
id="desc"In the latter case, you can change each html page to give them a id on the body as you suggest.
Page "front":
<body id="front">
...
Page "left":
[pre]
<body id="left">
...
etc.
And then in the CSS:
[pre]
#front #desc {background:#505050 url(images/front.jpg) bottom left repeat-y; }
#left #desc {background:#505050 url(images/left.jpg) bottom left repeat-y; }
#right #desc {background:#505050 url(images/right.jpg) bottom left repeat-y; }
[/pre]Try posting a bit more code and/or tell us exactly what image needs to change if this doesn't help you enough.
Sorry I wasn't more specific. The image I want to change is on the CSS: front.jpg. Here's the full CSS code for header area:
/* Header description area */
#desc {background:#505050 url(images/front.jpg) bottom left repeat-y; clear:both; color:#fff; /* height:200px; */ margin:5px 0 15px; padding:0 0 5px 0;}
#desc p {font-size:1em; line-height:1.3em; padding:0 0 0 15px; width:290px;}
#desc h2 {color:#fff; padding:15px 15px 0;}
#desc a {border-color:#fff; color:#fff; text-decoration:none;}
Currently front.jpg is the image that appears on all 14 pages. I have 14 new images and want each page to have its own image. So front1.jpg, front2.jpg, etc. How do I change the CSS to reflect that each page will have a different image and how do I change the HTML to reference each image?
It would probably be easier to put the style for the
#desc {background:#505050 url(images/front.jpg) bottom left repeat-y;}
in the <head> of the document for each page rather than getting involved in if statements, conditional comments, or scripting. Just make sure your image source path is adjusted accordingly.
Marshall
Marshall, so you mean like this (keep in mind I am a beginner).
<head>
desc {background:#505050 url(images/desired_image_name.jpg) bottom left repeat-y;}
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta name="description"
If this is correct, then would this <head> style overwrite the CSS image that is currently on each page or would it just wind up as a black area? Do I also have to edit the CSS page?
Cleary, I have no clue...
Thank you so much for your assitance!
Where you match of the id's on the body with the background you like best should work just as well as adding it to each file separately.
Which you choose is a matter of taste IMHO (I prefer to keep layout out of the html (the purist view).
I'm still confused and need some hand holding here. I know...
OK so I've tried putting the
desc {background:#505050 url(images/my_desired_image_name.jpg) bottom left repeat-y;}
after the <head> tag of each html page and it does not work. The CSS image just overrides it.
What exactly should I do to make this work? How do I do a body id? Where does it go on the html file(s)? Also, where in CSS do I identify other images for each page? And lastly, what is the exact code and where do I place it?
Thank you again.
I've been working on this for 3 days now and am now pulling my hair out (and am going increasingly bald as time goes on) LOL!
Anyway a few examples that do work:
I've used colors in these example as it's easier to replicate than images, but any image can go in the place of the color, it's just a slight difference.
body id
a file like:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>Untitled Document</title>
<style type="text/css">
#red #desc {
color:red;
}
#blue #desc {
color:blue;
}
</style>
</head>
<body id="blue">
<p>normal</p>
<p id="desc">ipso</p>
<p>unaffected</p>
</body>
</html>
The id is applied to the body (in this example it's called blue).
Another file could have a different ID (e.g red)
Let's focus on the CSS:
#red #desc { ... }
This selects something with an id "desc" contained inside something with an id "red". Won't apply here anywhere as there is no id "red" in use on this page
#blue #desc {...}
Again, this will be applied to something with an id "desc" inside something with an id "blue". We got one of those: the p within the body matches this.
This is the technique you need to use the id on the body to select the look.
Now in this example, the css is in the html not external, and it might seem superfluous to add both the layouts to it.
So let's take it a notch further:
style.css:
#red #desc {
color:red;
}
#blue #desc {
color:blue;
}
blue.html:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="blue">
<p id="desc">ipso</p>
</body>
</html>
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="red">
<p id="desc">ipso</p>
</body>
</html>
As you now add more "colors" you add a line in the CSS for each (it gets only loaded once by the browser). And then each new page stays as small as it can.
overriding styles
Overriding styles is easier in general but mixes layout into the html much easier and might yield added complications in the form of "specificity".
Let's try:
style.css now contains:
#desc {
color:blue;
}
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>normal</p>
<p id="desc">ipso</p>
<p>unaffected</p>
</body>
</html>
This gives the ipso in blue.
How can we now make it red by only editing the html ?
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
#desc {
color:red;
}
</style>
</head>
<body>
<p>normal</p>
<p id="desc">ipso</p>
<p>unaffected</p>
</body>
</html>
note that I used the same selector in the html as in the css.
Should the code in the style.css have been
body #desc {
color:red;
}
(this would select an element with id="desc" inside the <body> tag).
It will remain blue, not turn red. The reason is that the selector in that modified style.css is now more specific. There are posts out here about specificity and how to calculate it for more advanced users.
HTH
