page select for images on external CSS

[navyfalcon]

My external style sheet is below
how do I change the image (or select the image) for the site pages
want a list of several images and be able to select depending on the page
Web Page http://freetutorials.name
want different images for example:
under computer applications:
Design & Photo
Utilities & Drivers
under Engineering:
Mechanical
Civil
Industrial
etc.
How can I set this up in external style sheets ??

* {
margin: 0;
padding: 0;
}
body {
background-color: #FAEBD7;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
padding: 10px;
}
a:hover {
color: purple;
background-color: white;
font-weight: bold
}
#banner {
text-align: center;
border:1px solid darkblue;
background-image: url(Images/2R131.gif);
background-repeat: no-repeat;
background-position: 5px center;
}
#banner b {
display: block;
min-height: 120px;
background-image: url(Images/3C331.gif);
background-repeat: no-repeat;
background-position: right center;
margin: 0 5px;
padding: 0 200px;
font-weight: normal;
}
* html #banner b {
height: 120px;
}
#banner h2 {
color: #FF0000;
font-size: 180%;
margin-bottom: 10px;
}
#homelink {
float: left;
width: 64px;
height: 17px;
background-image: url(Images/ltblue-button.gif);
margin-top: 7px;
font-size: 1px;
color: #428AFC;
}
#testlink {
float: right;
width: 64px;
height: 17px;
background-image: url(Images/lt_blue-button.gif);
margin-top: 7px;
font-size: 1px;
color: #3C8FFC;
}
h3 {
text-align: center;
color: #FF0000;
line-height: 30px;
font-size: 130%;
}

.leftcol {
float: left;
width: 49.5%;
}
.rightcol {
float: right;
width: 49.5%;
}
.leftcol a, .rightcol a
{
margin-left: 5px;
line-height: 1.5ex
}
.leftcol dt, .rightcol dt {
padding-top: 3px;
}
.leftcol dd, .rightcol dd {
padding: 2px 5px 2px 30px;
}
.leftcol b, .rightcol b {
display: block;
padding: 2px 5px 2px 30px;
}

.leftcol, .rightcol {
border:1px solid darkblue;
margin-bottom: 5px;
}
.clear {
clear: both;
}

[Costin Trifan]

For example:

Design & Photo page
The banner (or any desired image) will have a css class called, let's say, .designPhoto. In that class you'll specify the background image you want to display.

The same for the rest of your pages. Just set up different css classes.

[navyfalcon]

Originally Posted by Costin Trifan

For example:

Design & Photo page
The banner (or any desired image) will have a css class called, let's say, .designPhoto. In that class you'll specify the background image you want to display.

The same for the rest of your pages. Just set up different css classes.

but how would I code it for the banner ??

original:
#banner {
text-align: center;
border:1px solid darkblue;
background-image: url(Images/2R131.gif);
background-repeat: no-repeat;
background-position: 5px center;
}

modified for Aerospace Engineering
#bannerAE {
text-align: center;
border:1px solid darkblue;
background-image: url(Images/2A331A.gif);
background-repeat: no-repeat;
background-position: 5px center;
}

general information
class example:
p.first{color: red;}

<p class="first"> ***</p>
display: paragraph in red

- - - - - -

<!--========== Banner ==========-->

Original:
<div id="banner">
<b><h2>Aerospace Engineering</h2>
<p>Lists Aerospace Engineering tutorials, Aerospace Library, Aerodynamics for students, Modern Aerospace Museum, Free CAD Drawings, Flight Dynamics &amp; Control</p></b>
</div>

Modifiedl:
<div id="bannerAE">
<b><h2>Aerospace Engineering</h2>
<p>Lists Aerospace Engineering tutorials, Aerospace Library, Aerodynamics for students, Modern Aerospace Museum, Free CAD Drawings, Flight Dynamics &amp; Control</p></b>
</div>

I read up on class but I don't know how to implement it in this case
I tried several methods, they either don't work or involve excessive code ??

Thank You
falcon

[Costin Trifan]

Let's get things straight because I'm kind of confused about this...

1. You have multiple pages
2. In those pages you have images
3. You want to show different images accordingly to something (wherever it is...)
4. All pages are depending on one or many stylesheets.

Like:

1. Computers.html
1.1. Displays the computers.jpg banner

2. Services.html
2.1 Displays the services.jpg banner

Is that it??



If so:


The stylesheet (whichever it is) will contain:

1. A class for the banner displayed in computers page
2. Another class for the banner displayed in the services page
3 and so on...

1.
DIV.computerBanner {
text-align: center;
border:1px solid darkblue;
background-image: url(Images/computers.jpg);
background-repeat: no-repeat;
background-position: 5px center;
}


2.
DIV.servicesBanner {
text-align: center;
border:1px solid darkblue;
background-image: url(Images/services.jpg);
background-repeat: no-repeat;
background-position: 5px center;
}



Now, in the computers.html create a div with the class "computerBanner"; In the services.html create a div with the class "servicesBanner".



^^ that is what you want?

[navyfalcon]

To: Costin Trifan

QUOTE:
Is that it??

If so:

The stylesheet (whichever it is) will contain:

1. A class for the banner displayed in computers page
2. Another class for the banner displayed in the services page
3 and so on...

1.
DIV.computerBanner {
text-align: center;
border:1px solid darkblue;
background-image: url(Images/computers.jpg);
background-repeat: no-repeat;
background-position: 5px center;
}


2.
DIV.servicesBanner {
text-align: center;
border:1px solid darkblue;
background-image: url(Images/services.jpg);
background-repeat: no-repeat;
background-position: 5px center;
}


Now, in the computers.html create a div with the class "computerBanner"; In the services.html create a div with the class "servicesBanner".

^^ that is what you want?

Very Close - Thank You
It is a lot of help
(note: may want to look at Computer Applications;
"Utilities and Drivers" as I just added a lot of contents.
what do you think ??

Thanks again
falcon

[Costin Trifan]

(note: may want to look at Computer Applications;
"Utilities and Drivers" as I just added a lot of contents.
what do you think ??

There is a lot of useful stuff in there!
But:
- the image from the right is not spaced correctly from the banner margin as the left image is. That is, there is no space between your image right side and the banner line.
- under "Registry Cleaners" section you have a div which needs to be moved a little bit more to the east because right now it's heading west (if you know what I mean)
- for the last 4 containers don't forget to set a padding top equal to the padding set to those other containers. Right now your text is heading north! (That is, there is no space between your container's top line and its content.)

[IE7, 1280x1024, Vista]


So, what you actually want is a way to set up different images, like those 2 from the top of the page, depending on the themes of the page viewed, right?

[navyfalcon]

To: Costin Trifan
So, what you actually want is a way to set up different images, like those 2 from the top of the page, depending on the themes of the page viewed, right?

Yes, Yes, Yes

I am not very good at HTML and just learning CSS with a lot of help from the forums. I was a school teacher and know that the students need help (hence the content) for preperation for college or university (to get the Grade Point Average - GPA - up to a level where they can get scholarships or grants so the site purpose.

The site was originally tables, but are slowly being changed to CSS (for easier maintenance since it is over 100 pages) so I have problem with particular issues.
I want to keep the look and feel of the original tables but need the ease of maintenance of CSS - only one person designing, changing, and maintaining the site, hence overload, fixing broken links, etc. and getting new content.
Thank You for all your help
falcon

[Costin Trifan]

Then, all you have to do is explained here: http://www.v7n.com/forums/702303-post4.html



Good luck, budy!