Web Design Forums

Narate · 11-02-2005, 07:39

http://www.narate.co.uk/leander

I need a way of getting those images that are floating left and right to sit flush the container div and have not got a clue how to do that.

Also aligning text in the div to the top...whats that all about, not working for me so far.

Im not supposed to be coding it but I fancied giving it a whirl just for a learning experience.

TIA

oli · 11-02-2005, 08:20

they dont need to be in divs, just make them in a background image 1 px high and run it down the page in your body attribute.

Narate · 11-02-2005, 12:08

I already have an image declared as my background-image in my body attribute.

Michal · 12-02-2005, 04:30

Quote:

Originally Posted by Narate

I already have an image declared as my background-image in my body attribute.

You can make it as the background image of your containter.

It'll be 800px (width) by 1px (height) repeating on the y axis.

Narate · 12-02-2005, 04:36

There are 3 different images used to create the effect.

1 - The light to dark top gradient
2 - The shadow tile with the one base colour
3 - Top image with gradient and andd shadow

the only way I think I can do it is by making a master container that is 810 float the left and rightgradient then set an image in these left and right floats that are the top image.

Narate · 12-02-2005, 04:43

Ive done it that way but Im certain there must be an easier way, so atleast then I can scrap my image tags, i wanted it to be purely CSS

Michal · 12-02-2005, 04:52

What's so hard about that? How is it not proper CSS?

Anyway, I should have said 810px, not 800px.

Make the container 810px and have the 1x810px background tiling on the y axis. White in the middle and 5px of shadow either side.

To get around the problem of the top area of shadow (the lighter area) you can have the background as a png with transparency enabled. (ie: in Photoshop the shadow might be opacity 70% or something, and you can save that out as a png)

So you've got that background gradient and the shadow png can just go over it seamlessly. (you'll need a special patch for transparency to work in IE though)

Narate · 12-02-2005, 07:28

ahh right, I did try it as a PNG but I showed up as white using Safari unless I have saved it incorrectly.

I saved it was PNG 8-bit perceptual I think

Michal · 12-02-2005, 08:57

Does it work in other browsers? Give it a try at 24-bit.

Use that too, for Explorer:
http://homepage.ntlworld.com/bobosola/pnghowto.htm

11-02-2005, 07:39	#1 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,242	Floats http://www.narate.co.uk/leander I need a way of getting those images that are floating left and right to sit flush the container div and have not got a clue how to do that. Also aligning text in the div to the top...whats that all about, not working for me so far. Im not supposed to be coding it but I fancied giving it a whirl just for a learning experience. TIA

12-02-2005, 04:36	#5 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,242	There are 3 different images used to create the effect. 1 - The light to dark top gradient 2 - The shadow tile with the one base colour 3 - Top image with gradient and andd shadow the only way I think I can do it is by making a master container that is 810 float the left and rightgradient then set an image in these left and right floats that are the top image. Attached Thumbnails

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

11-02-2005, 08:20	#2 (permalink)
oli I Call Shenanigans™ Join Date: Feb 2003 Location: Manchester, England. Posts: 9,736	they dont need to be in divs, just make them in a background image 1 px high and run it down the page in your body attribute.

11-02-2005, 12:08	#3 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,242	I already have an image declared as my background-image in my body attribute.

12-02-2005, 04:43	#6 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,242	Ive done it that way but Im certain there must be an easier way, so atleast then I can scrap my image tags, i wanted it to be purely CSS

12-02-2005, 04:52	#7 (permalink)
Michal Registered User Join Date: Dec 2004 Posts: 42	What's so hard about that? How is it not proper CSS? Anyway, I should have said 810px, not 800px. Make the container 810px and have the 1x810px background tiling on the y axis. White in the middle and 5px of shadow either side. To get around the problem of the top area of shadow (the lighter area) you can have the background as a png with transparency enabled. (ie: in Photoshop the shadow might be opacity 70% or something, and you can save that out as a png) So you've got that background gradient and the shadow png can just go over it seamlessly. (you'll need a special patch for transparency to work in IE though)

12-02-2005, 07:28	#8 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,242	ahh right, I did try it as a PNG but I showed up as white using Safari unless I have saved it incorrectly. I saved it was PNG 8-bit perceptual I think

12-02-2005, 08:57	#9 (permalink)
Michal Registered User Join Date: Dec 2004 Posts: 42	Does it work in other browsers? Give it a try at 24-bit. Use that too, for Explorer: http://homepage.ntlworld.com/bobosola/pnghowto.htm

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)