Setting a default image size using CSS?

First off, I will say that I had a look for similar threads with such a topic and couldn't seem to find one anywhere so if I have actually missed one then I do apologise >.<

This is a sort of query/stroke confirmation really. If I have an image in the same place every time on a page (like a banner) that changes in the pages, could I set up size and layout specifics in the CSS then in the div on the page just link in the image so that it's formatted straight away by the CSS layout assigned to that particular div id?

So for example in my div id "bannerImage" I have one image that is always say, centered and is 250px wide and 100px high. Instead of writing the positioning EVERY time on the pages, link to the div id in the css that has the above formats laid out in something like:

Code: Select all

(hash)bannerImage {
position: center
width: 250px
height 200px;
}

However, I'm still getting to grips with CSS and have begun using XHTML over plain HTML - is it stronger coding to use different positioning 'formats'? I've seen such terms as absolute and relative and am a little unsure as to how they're used.

What is your banner code? I may be able to simplify this for you if you explain how it is displayed.

Whenever you use an <img>, you should specify the height and width. This speeds up browser rendering by telling the browser how much space to allocate. For example:

Code: Select all

<img src="myImage.jpg" width="300" height="100">

These values are always pixels. Don't include the "px" unit in HTML.

Duh.. of course.. that makes sense *facepalm* What I was really getting at more than the size was the formatting. Though a different image might be used on each page, they would be in the same place, same margin etc.

Would it be better to just have the formatting on the HTML page or could it be linked in by the CSS? I'm still learning the ropes on CSS and am still working out what formatting is best left in the CSS and what is used in the HTML/content pages.

All of the other formatting -- position, borders, whatever -- should be controlled by CSS.

Nonetheless, the location of the <img> in your source code will normally affect its position.

You might also want to read up on CSS background images. These are pure CSS with no <img> tag, and are good for decorative images (as opposed to content images).