Website help, please

Bed & Breakfast / Short Term Rental Host Forum

Help Support Bed & Breakfast / Short Term Rental Host Forum:

swirt

Forum founder. Former Owner.
Joined
May 17, 2008
Messages
3,210
Reaction score
0
Back at it again...
how do I add a drop shadow around the entire content area? Let's say my background is red and my content area is white and I want to add the shadowing around the content area so it 'lifts off' the red background- do I create another layer of background that is slightly larger than the content area or is there a CSS 'command' to do the shadow? I can only find one for text.
Thanks. This is taking me awhile but I'm learning stuff. Will post a somewhat finished 'product' when I'm happier with it..
There are no great ways to do drop shadows in css. There are some tricky ways but they basically involve putting your content box inside a box that is just a wee bit larger and make that box the color of your "shadow" then adjust the padding of the outer box to make the inner box sit flush upper and flush left (if you want the drop shadow to appear to the bottom right.
.
Is there a way to create a background image and place that in the style sheet?
.
catlady said:
Is there a way to create a background image and place that in the style sheet?
Yes an image can be placed in the background of a block element. And you can control the repeat and location of it.
http://www.w3.org/TR/CSS2/colors.html
http://www.w3schools.com/css/css_background.asp
http://www.tutorialhero.com/tutorial-52-css_background_image_guide.php
 

swirt

Forum founder. Former Owner.
Joined
May 17, 2008
Messages
3,210
Reaction score
0
Back at it again...
how do I add a drop shadow around the entire content area? Let's say my background is red and my content area is white and I want to add the shadowing around the content area so it 'lifts off' the red background- do I create another layer of background that is slightly larger than the content area or is there a CSS 'command' to do the shadow? I can only find one for text.
Thanks. This is taking me awhile but I'm learning stuff. Will post a somewhat finished 'product' when I'm happier with it..
There are no great ways to do drop shadows in css. There are some tricky ways but they basically involve putting your content box inside a box that is just a wee bit larger and make that box the color of your "shadow" then adjust the padding of the outer box to make the inner box sit flush upper and flush left (if you want the drop shadow to appear to the bottom right.
.
That's pretty much what I read. Not sure I can really rely on all browsers to show everything the same way, so I went with a border. Which I am assuming just 'glues' itself to the edge of the element! But I have to take it into consideration in sizing everything because when I did add it, all the elements started migrating east.
.
Yes the border size can seem to shift the box around. When using css for positioning it helps to understand the various aspects of the "box model". Margin, Border, Padding, Content
http://www.w3.org/TR/CSS2/box.html
http://redmelon.net/tstme/box_model/ a nice interactive to allow you to see layering within a box
http://www.brainjar.com/css/positioning/default.asp a full blown box tutorial
http://www.w3schools.com/css/css_boxmodel.asp A demo where you can play and see the immediate results.
 
Top