Link to home
Start Free TrialLog in
Avatar of jwright9
jwright9

asked on

Defining image tags in Cascading Style sheets.

Given that I have dozens of html pages with the same logo and text banner on them, is there a way that I can just define both of these images in one place in a cascading style sheet and just use two different CSS defined tags in each of the html pages to populate the pages with each of these two images.  I want to be able to change the path of the logo and banner images in just one place for easier maintenance.

Thanks.
Avatar of xberry
xberry
Flag of Germany image

I hope I understood you right, which likely I didn't ; ):

If your logo and text banner stay the same, which is what you said then why
should there be a problem ? You simply define style and path in a central external css file
for both of them, ok ? Why would you use two different tags if images stay same on each html page ?

Sources of images though (path) you can in my uptodate knowledge
only define in the html attribute of the img tag itself ( <img src="pathtoimage" . . .> )

In CSS central files you can define path to background images or images for list style elements
(list bullets etc.)
ASKER CERTIFIED SOLUTION
Avatar of xberry
xberry
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jwright9
jwright9

ASKER

xberry,

I think you have the right answer.  Let me clarify what my situation is.  I have two different .gif files.  One is an state agencies seal and the other is a rather large font title for the system.  Each web page has both images located at the top as a header.  I will reuse the page layout for the web applications of other agencies.  I want one place say as in a central CSS where all I have to do is edit the central CSS (one place and one place only) for the new web app.  This will reduce maintenance.

Would a background image defined in a CSS satisfy this requirement?

Thanks, J.
You should either put your two header files in a page of their own, and 'include' them into a master page.  Or use a template to manage your pages.

CSS has nothing to do with what you are trying to achieve, other than manipulating its position on the page itself.
Thanks X!  I think that will do it.  I am very excited about CSS and I have had a course in it but I am short on real life experience on the subject.  Have a great day!   Behind Door Number three is 250 points juat for you!
(This comment is based on the old Let's Make A Deal Game show.)
Welcome jwright9,

'playing with CSS' can be lots of fun, but when you design pages always keep one thing in mind:

Your html code should follow semantic rules and your CSS code should be reserved
for the layout only. However, if you don't know about PHP or other script language for the web, then
what pmagony did suggest wouldn't be lots of help for you, since there is no natural html element
that can do the 'semantic' solution for you, a <div id="logo"> and <div id="banner"> seems a
justifiable solution here . .  and . . . I did lots of pages with css and html ... and sometimes it simply
was not possible to be 'holier as the pope' as far as 'semantic ideals' were concerned' : )

One of my favourite 'short and simple' tutorial pages about CSS and HTML for you on top:
http://www.yourhtmlsource.com/stylesheets/csslayout.html
 


pmagony's approach sounds like it would work also.  Here where I work we use includes in html pages alot.  I actually am working on JSPs.  I guess when you (xberry)  say follow semantics you mean don't use tags for a purpose other than what they are designed for.  However it looks like div tags are a pretty good candidate for the job that xberry suggests I use them for.  There is almost always more than one fairly good way to do a task in web and software design.  Thank you both again for your good, solid suggestions.

J.
>> you mean don't use tags for a purpose other than what they are designed for

exactly ; )

>> However it looks like div tags are a pretty good candidate for the job ...

Well, actually the main purpose of div is to
a) replace table elements in their deprecated job of providing for page layout
(of course table elements are designed to present sheets of data from data base etc.
 or relate entries such as in forms, well, simply being ... tables ; )
b) provide for a html semantic solution where no such exists by the default set of defined html tags
( html tags for 'navigation', 'menu', 'topbar', etc. simply do not exist,
so you create welcome solutions with the div tag )

You understand the semantic idea behind html, no other viable solution at hands and
if all your code is valid html anyway, so .. it really is fine.