Solved

Defining image tags in Cascading Style sheets.

Posted on 2007-03-21
8
242 Views
Last Modified: 2013-11-19
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
Comment
Question by:jwright9
  • 4
  • 3
8 Comments
 
LVL 14

Expert Comment

by:xberry
ID: 18766590
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
 
LVL 14

Accepted Solution

by:
xberry earned 250 total points
ID: 18766663
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
 

Author Comment

by:jwright9
ID: 18766686
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
 
LVL 9

Expert Comment

by:pmagony
ID: 18766713
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:jwright9
ID: 18766721
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
 
LVL 14

Expert Comment

by:xberry
ID: 18766942
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
 

Author Comment

by:jwright9
ID: 18767307
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
 
LVL 14

Expert Comment

by:xberry
ID: 18773051
>> 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now