• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 276
  • Last Modified:

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.
0
jwright9
Asked:
jwright9
  • 4
  • 3
1 Solution
 
xberryCommented:
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.)
0
 
xberryCommented:
Sorry some nonsense in my comment above:

"You simply define style and path in a central external css file"

of course you can only define style but not path of <img> tags in an external stylesheet.

You would have to create a solution with div elements such as:

<div id="logo></div>

and then you can define style and source for an background-image of your
<div> element in an external central stylesheet.

div#logo {background-image: url(yourpathtoimage); width: . . .; height: ...; position: ...;

and so on ...


0
 
jwright9Author Commented:
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.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
pmagonyCommented:
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.
0
 
jwright9Author Commented:
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.)
0
 
xberryCommented:
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
 


0
 
jwright9Author Commented:
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.
0
 
xberryCommented:
>> 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.
 
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now