how to bump the page from the bg and other question.

[AALTUVEM]

I am working on my web and it came really nice, I was wondering how to get the effect you guys at DT have in your page :bow .

Let me explain, you got a gray background and you have your page (where you put all your information). If you see really close to the border of the page you can se a NIIICE shadow that bumps the page. The question is, how you do that shadow?

Do you make a template in fireworks and the cut it and use the borders with the shadow area only?

Do you use CSS to do it? if it so, could you please let me know what the code or style is, i have been looking over the internet without any luck.

And the other quiestion is, from your web too-

IF you see the top area, you will have a input text area with round corners.

Did you make a bg image and put the text field on top?

Thats all :jump

Thanks in advance.

P.S. Sorry for my english, I know i messed up somewhere, but english is my second language.. :D

[laxman]

I would make it an image (that's probably what this is). Basically in photoshop you make a layer with the same colour as the background. Then you make a white box the same width as the page you want and apply a drop shadow. Then you take the marquee tool and make a box the whole width of the white box, plus the shadow but only one pixel high and save it. Then you make the HTML page and set the background colour to what you want and make a table with one cell. Center it and set the width to the exact width of the picture you just saved. Then apply that picture as the background image of the cell. What will happen is that it will repeat in the top-bottom direction and you will get the effect you want. You can make the table any height you want and it will be no problem.

[danlefeb]

As with most things, there are a few ways the shadow can be done. Laxman's way is one way if you need a fixed width. If you're wanting a fluid width for your site there's other ways that can be achieved. I've found it's easier to create what's called a wireframe for each different page in my site in Photoshop (including content), that way when I crop out images I can be assured that they're exactly the way I need them to be when I'm coding. Off the top of my head I'd probably do something similar to Laxman's suggestion, but instead of a single-celled table with a background image I'd probably use a series of DIVs for each shadow and the main content. So you'd have two images, a 'shadow-left' and a 'shadow-right' image of exactly the same width and only one pixel high. Then in CSS I'd set the background to position left and right, respectively. That way the center DIV with your main content can be fluid and push the left/right DIVs around without messing up the shadow.

To add a little detail, the header and footer drop shadow will need to be separate images and set to a top left and top right position (footer) or bottom left and bottom right (header) in your DIV's background. These images will probably be larger resolution-wise since you'll want the full drop shadow in the image.

Just my two cents about how I'd go about it...when you're dealing with the web, a lot of it is trial and error since some techniques work in one browser but not so well in another. For example, your site may look fine in Firefox but in IE or Chrome it may look bad. Or it might look fine in Firefox 2 but in Firefox 3 it might have some issues, etc. So feel free to try a few different techniques to achieve what you need -- sometimes a mixture of techniques works too! Good luck! :)

[AALTUVEM]

Thanks guys for your reply, i am going to try both techniques..

Thanks again!! :bow