Hi All
I have developed a site whereby it uses the contents of a folder (incs gifs,
jpgs and css files) to display the web 'skin' of the site. This is OK, but
each button on the site is an individual pic (I didn't want to use diff
colour INPUT boxes because I wanted to display graphical buttons, rounded
edges, etc - can you do this !?!?!) and now that I've done quite a few skins
when I update the site having to update all of the skins to accommodate
button changes is becoming a bit of a pain.
Now not too long ago I experimented with using a blank graphical button and
then using position:absolute to position text over the top of the buttons
(you can still see an example at www.frozenmoles.co.uk), however this caused
in even more chaos as I seemed to have to position everything from the very
top left of the page so if I changed the actual body content of my pages I
had spend hours fiddling with the pixel co-ords (top: and left:) to get my
footer text to line-up over my footer buttons. This seemed to be different
for every browser as well so I gave up!!
Then it dawned on me. Is it possible to put the buttons in some kind of
wrapper so that I only have to mess about with co-ords in a confined space,
ie the space within the wrapper, which is basically the buttons and the
text.
I just done a test page on IE 6, IE 5 and Firefox 1 (all on Windows) and it
seems to work. My test code is as follows:
<HTML>
<HEAD>
<STYLE>
<!--
..TheWrapper {POSITION:absolute; FONT-SIZE:12px;}
..TheTextBox {WIDTH:200px;}
..TheText {POSITION:absolute; LEFT:30px; TOP:5px;}
//-->
</STYLE>
</HEAD>
<BODY>
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<DIV CLASS="TheWrapper">
<INPUT TYPE="BUTTON" CLASS="TheTextBox">
<DIV CLASS="TheText">fred</DIV>
</DIV>
</BODY>
</HTML>
Is this a fluke or is this actually the way that you would do it?
Has anybody gone down this route before and met many pitfalls?
Rgds Laphan
