Earth Repair & Restoration wrote:
>Hi again :-)
>
>Thanks for the help its much appreciated, not sure how to call up the two
>images together?
>
>As for the header image, I think its ok for the moment, I probably can save
>some with the buttons on the left as they are 5k each so I might see how I
>can make them a little better, and sharpen the header and compress slightly
>more.
>
>
>Regards,
>Erica Mueller
>Office Manager
>Earth Repair & Restoration Pty Ltd
>Web : www.earthrepair.com.au
>Email : [EMAIL PROTECTED]
>Phone : (02) 9648-2660
>7 Worsley St East Hills NSW 2213
>
And Hi Erica again,
The trick with the double image is that you have the two buttons
combined in one image (or 4 buttons in 1 image, if you want a
hover-state also), but shows them separatedly in two <a>links with the
relevant part of the combined image as background. By defining a certain
width and height for each <a>-block you make a "port-hole" to view
trough, and the rest of the image is cut off. The atrribute for this
goal is: { background-position: Xpx Ypx }, with X the horizontal
start-position of the image, and Y the vertical. So normal position is:
0 0. Not only px are possible, also %. Because of the definition of the
port-hole just as big as one button, we don't need the {
background-repeat: no-repeat; } ingredient.
In fact the 4 button-images are downloaded one time, and used serveral
times (for a different part) on the page: they are already in the cache
of the browser of the visitor. Also for hovering everything is ready
behind the screens, there is (for the first time) no waiting time till
the hover-image is downloaded: he is allready inside!
I made a testpage with the validation buttons
<http://home.tiscali.nl/developerscorner/css-discuss/valid-buttons.htm>
on it (can use it myself too!).
In this page also some links to articles about background-positioning
and css roll-overs.
CSS is a great invention!
francky
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
