layout images do not belong into html source
Beginning to learn html more than 15 years ago it was the time of texteditors. I was no friend of those and was happy to use my first wysiwyg editor some time later, that produced nice output by placing elements on the screen. Images were sliced and filled within tables which were nice to abuse for these positioning things. I was proud to show, what i’ve done, what was the result of my work and what was visible for those who are able to see. And that was ok for that time. …
Most of the people i know out of xoops community atually use table-layouted themes until today, since this is the easiest way to achieve the own goals within the actual version of this cms and modules (more the modul-output than the csm itself).
Sliced images put in constructions of tables are hard to read for screenreader and at least, there is much “output” of source without any content. Much source means long time to load, tables are rendered twice, first the size is calculated and then the content will be read.
I try to divide between content and layout images. A layout should be changeable on the fly and this can easily achieved by using css and background images.
Images used for the layout belong into the background, use css and background : url(); When you want to write valid html, each image needs at least an alt text which labels the image, better is to use more desciption text. Screenreader and searchengines can’t read images, they can’t see whats on the picture. It was always hard to put an alt text to layout images, wasn’t it? Ok, ignoring (#) the alt on layoutimages was one “solution”.
Think about using:
background-image: url();
or in short form:
background: url();
Use pathes to images relativ to css file. When css file is in folder /css and images in folder /css/images for example, use:
background: url(images/xx.gif);
Of course, you can use background images on all blocklevel elemenst such as div, p etc.
The more you use it this way, the more you will like it.
