CSS Background Shadow... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Nicole -> CSS Background Shadow... (5/30/2006 7:25:54)

I've been reading this thread and following Tailslide's advice but I'm afraid I just don't get it!

Here's what I'm working on:

http://www.users.on.net/~nicoleoz/Test/index.asp

...I can do the side shadows okay, but when it comes to the top one, I just can't seem to make it line up with the sides, and also appear at the very top of the screen, i.e. no white at the top.

Help!!!



Nicole -> RE: CSS Background Shadow... (5/30/2006 7:55:15)

Okay, I've progressed to this:

http://www.users.on.net/~nicoleoz/Test/index1.asp

...which is looking okay in IE but not in Firefox, so something is obviously wrong.

Also, the background colour of #9baabf is coming out slightly different as a background colour to how it's appearing in the images i've created in paint shop pro. They're .png images but I'm not sure that's the reason?

Nicole



jaybee -> RE: CSS Background Shadow... (5/30/2006 9:28:42)

Well the background colour maybe explained by this thread
http://www.frontpagewebmaster.com/m-320953/tm.htm



Tailslide -> RE: CSS Background Shadow... (5/30/2006 11:29:54)

Hi

I would do this the other way around actually.

Have the thin sliver of main background image repeating on the body then stick the top shadow bit on the container or a header div or something within the body element anyway.





Nicole -> RE: CSS Background Shadow... (5/30/2006 17:31:28)

Thanks for the link jaybee, totally over my head all that image stuff. I'll have to really read up on it or perhaps just using a .jpg would be better?

Tail, I previously had the images the way you said you'd do it, and the white center part of the image was appearing at the top of the screen.



Tailslide -> RE: CSS Background Shadow... (5/30/2006 17:50:51)

zero the padding and margins on the body element and the top shadow will move up to cover the top bit of the body background.

It looks like there's a slight mismatch on the topshadow background with the body background - you might need to do a bit of trimming or resizing to get them to line up 100%.



Nicole -> RE: CSS Background Shadow... (5/31/2006 3:09:46)

I started again afresh this morning, only after getting completely frustrated in the first hour, calmed myself down (2 cups of coffee), and found a site with exactly what I want and studied their code and css.

I copied their images and studied the dimensions and made my own "top", "middle" and "bottom" images and then added them to my test page. That was about 1pm. Since then until now, about 5pm, I've pulled every hair out of my head (not a good look) because whenever I added anything in the middle div, the bottom background image was repeating instead of the middle one.

Hope I'm not confusing anyone.

But about 5 minutes ago I've just opened my "middle" image in paint shop pro, and discovered that I'd saved the image called "bottom" twice, and actually called it "middle" (so I had the bottom image saved as "middle") which is why it was repeating.

So all has calmed down in my household again, a 1 minute check to see that I'd saved the images properly, or in other words saving the images properly in the first place could've saved 4 hours and me having to go out and buy a wig!

Nicole


p.s. the end result is this: http://www.users.on.net/~nicoleoz/Test/index4.asp



Tailslide -> RE: CSS Background Shadow... (5/31/2006 3:45:33)

Excellent job!

The amount of times that stuff won't work and I'll be looking for some "clever" reason why not only to realise 2 hours later that I'd missed off a semi-colon or whatever!

Who needs sanity?!?



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375