Re: Nuver tut

On Wed, 15 Feb 2006 10:10:26 GMT, Wrinklie One © commented


On Tue, 14 Feb 2006 22:06:09 GMT, Ali sauntered in and penned :

On Tue, 14 Feb 2006 21:44:24 GMT, Wrinklie One © commented

See the chart at
http://homepage.ntlworld.com/my.web.pages/stats/2006/ups01h.html for a
demo of lots of nested <div>s (and very little else).

Thanks Ali... but my examination of the code on that page did very
little for me (not being conversant with css). Ok there was a border
within which was a different colour background upon which was a lot of
coloured blocks...

Look at it without styles :^) save it to your HD, see what a difference it
makes, download the style***
http://homepage.ntlworld.com/my.web.pages/stats/2006/graf.css to the same
folder then play about with it: eg add
background-image: url(a_texture.gif);
after each background-color: ; entry (replacing 'a_texture' with the name of
one of your texture or gradient images)
Add 'body {background: url(a_pattern.png) #fad;}' to it (no quotes).

Do the same with the demo page pmj posted: between the final ';' and '}' of
each element of the <style> section add
background: url(a_texture.png) gray 50% repeat fixed;
playing about with the image url, the colour, positioning , repeat, and
fixed|scroll. The link lower down gives the posible values.

Or just look here
http://homepage.ntlworld.com/my.web.pages/public/pmjscssdemo.html

That's the page pmj posted, with a few changes to the style ***, using some
textures I already had uploaded. The only change to the body is to make the
image src point to St George's flag. Everything else is CSS (in the <style>)

In the nested tables which Rabbit, I and others utilise, allowed us to
insert gradient jpg's and animated gif backgrounds. I'm sure you will
have seen examples of what I mean.

this bit of CSS gives the <div id="1"> a gradient background (assuming
gradient.png is a gradient), or a gray background if the .png is not
available, centred (50%), repeating as needed, and fixed in relation to the
canvas (the text will scroll over it).
div#1 { background: url(gradient.png) gray 50% repeat fixed; }

http://www.meyerweb.com/eric/css/references/css1ref.html

--
Ali
http://homepage.ntlworld.com/my.web.pages/ You really don't want to go there
UPS/.talk January stats: http://homepage.ntlworld.com/my.web.pages/stats
Nearly three full years' statistics now available.
.