Drop shadow around wrapper div

I have done this successfully in past and can't figure out why it's not working now.
I just want a soft shadow around wrapper to make it stand out.
I'm using:
-webkit-box-shadow: 1px 1px 12px 12px rgba(0,0,0,0.3);
On line 25
The site is:
http://timsframes.com
Thank you for any help!
FM

These are your styles:
<style type="text/css">
body {
text-align: center;
margin-top: 25px;
background-color: #FFF;
background-repeat: repeat;
background-image: url(images/browserbg2.jpg);
html.body {
margin: 0px;
padding: 0px;
#wrapper {
width: 988px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
color: rgba(0,0,0,1);
background-color: rgba(0,0,0,1);
.header {
float: left;
height: 345px;
width: 988px;
background-image: url(images/IMG_3030.png);
background-repeat: no-repeat;
.headlinetype {
font-family: "TeX Gyre Adventor";
font-size: 36px;
float: left;
height: 200px;
width: 588px;
color: #FFF;
padding-left: 400px;
padding-top: 150px;
.belowheaderband {
float: left;
height: 20px;
width: 988px;
background-image: url(images/woodtexture.png);
background-repeat: repeat-x;
border-top-width: thin;
border-top-style: solid;
border-top-color: #DDC79C;
#mainNav {
background-color: #627F41;
height: 45px;
width: 898px;
float: left;
margin: 0px;
padding-left: 90px;
#footer {
width: 988px;
clear: both;
float: left;
#main_visual_banner_box {
height: 550px;
width: 588px;
float: left;
background-image: url(images/sandbg.png);
background-repeat: repeat;
background-color: #FFF;
padding-right: 25px;
padding-left: 25px;
line-height: 35px;
padding-top: 40px;
.overviewpictures {
float: left;
height: 565px;
width: 315px;
padding-top: 25px;
padding-left: 35px;
color: #627F41;
background-image: url(images/woodgrainbg.png);
.title-box1 {
float: left;
height: 125px;
width: 300px;
margin-bottom: 30px;
color: #000;
.titlebox2 {
color: #000;
float: left;
height: 145px;
width: 300px;
margin-bottom: 25px;
.title3 {
color: #000;
float: left;
height: 125px;
width: 300px;
.product-box1 {
background-color: #000;
float: left;
height: 110px;
width: 300px;
.product-box2 {
background-color: #333;
float: left;
height: 120px;
width: 279px;
margin-bottom: 50px;
padding-right: 10px;
padding-left: 10px;
.productbox3 {
background-color: #333;
float: left;
height: 100px;
width: 300px;
h1 {
font-size: small;
h2 {
font-size: xx-small;
body,td,th {
font-family: "TeX Gyre Adventor";
#apDiv1 {
position:absolute;
width:316px;
height:300px;
z-index:25;
top: 40px;
margin-left: 60px;
background-image: url(images/tim.png);
background-repeat: no-repeat;
#apDiv2logo {
position:absolute;
width:200px;
height:115px;
z-index:50;
.left-infobox {
background-color: #627F41;
float: left;
height: 200px;
width: 200px;
padding-left: 25px;
color: #FFF;
padding-top: 25px;
text-align: left;
.middle-box {
background-color: #627F41;
float: left;
height: 200px;
width: 120px;
color: #FFF;
padding-left: 20px;
border-left-width: medium;
border-left-style: dotted;
border-left-color: #92744F;
padding-top: 25px;
text-align: left;
.addressbox-bottom {
background-color: #627F41;
float: left;
height: 200px;
width: 618px;
color: #FFF;
padding-top: 25px;
text-align: left;
.logobox {
float: left;
height: 200px;
width: 300px;
.address-box {
float: left;
height: 200px;
width: 240px;
.belowfooterdecorbar {
float: left;
height: 40px;
width: 988px;
background-image: url(images/woodtexture.png);
background-repeat: repeat-x;
</style>
you also need to validate your page for HTML unbalanced DIVs and Ps.

Similar Messages

Shadow around a div

Is it possible to put a shadow around a div? or around the border of a div? an image won't work (i don't think) because I want it to be scalable for different screen sizes and the div width is 80%....

Do it with your CSS. For example, add:
/*background-color: rgb(255,255,255); Needed for IEs */
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
/*filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30) ";
zoom: 1;*/
to the class or id style you've established for the div in question. Adjust widths and rgba settings to fit your design.
Chris

Drop Shadow Around Edge of Website

I am trying to make a drop shadow all around the edge of a site in Dreamweaver CS4. I know I need to make a container around the wrapper and place it as a background image and repeat y. I know how to make the graphic in PS. What I can't figure out is how to make it look like it flows into the body background color. If the body has a sold background color it's not a problem, but what if the body backround is a gradient? If there is a gradient it doesn't look correct because I can't pic a color for my layer under the shadow in photoshop.
Also how do I get the background to show at the very bottom of the page.
Please help I have been trying to figure this out for hours

Also how do I get the background to show at the very bottom of the page.
If you are talking about a gradient, there are two ways to give that appearance.
1. Make the gradeint image longer that the page, for example create the gradient a size like 5px x 2500px. You will run into issues on differnet height pages.
or
2. And I thin a better suggestion. Create your gradient, then have it blend into the the background color. So for example if your gradient goes from black to light gray, make the background color the last light gray of your image...then it blends. On extra long pages you lose the gradient.
Gary

Marks around drop shadows

This has probably been asked before but when I create a drop shadow around an object in Adobe Indesign CS3 it looks fine in the program but when I export to PDF I get like a square of discoloured white surrounding the effect. I'm not sure if this would appear when printed but I assume it would.
Is there any way of getting rid of this? Or is this something to do with CMYK's lack of greys?
Thanks
Ricky55

Check this article:
http://indesignsecrets.com/eliminating-ydb-yucky-discolored-box-syndrome.php

Adding drop shadow using CSS

I am fairly new to CSS and am designing a website where I
would like to use a drop shadow using CSS.
Currently I have a container div that is centred horizontally
in the browser window and want to add a drop shadow to this div, so
all content stays central in the browser window when it is resized.
(similar to
http://www.thegraphicmac.com/).
Any help/advice would be appreciated...
Thanks

CSS doesn't make drop shadows exactly. You could configure
one division on
top of another division with an offset but that's complicated
when used on
an entire page. This basic tutorial shows how to bring 3
image slices into
a CSS layout. (Use your own images and play around with it.)
http://alt-web.com/Image-slices-in-a-CSS-based-layout.html
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"richardellis" <[email protected]> wrote in
message
news:g62m8c$qj8$[email protected]..
> I am fairly new to CSS and am designing a website where
I would like to
use a
> drop shadow using CSS.
>
> Currently I have a container div that is centred
horizontally in the
browser
> window and want to add a drop shadow to this div, so all
content stays
central
> in the browser window when it is resized. (similar to
>
http://www.thegraphicmac.com/).
>
> Any help/advice would be appreciated...
>
> Thanks
>
>
>

"Shadow" around Canvas in PS CS5 and how to remove it?

Hi everybody,
forgive me if this was answered before, I did a search but did not find anything relevant ...
I upgraded to PS CS5 recently and there seems to be a new "Feature" of a sort of shadow around every page/canvas.
Maybe the correct term would be "Page Shadow" ... ?
Imagine a plain white document of, say, 500 by 500 pixels.
When I resize its (non-tabbed) window to make it bigger than the document itself, I don't get a sharp border between the white document and the grey window-background as it used to be.
Instead there is this "Page Shadow" around it, which I find very annoying and it wasn't there before in CS4 or any other version I remember.
I looked everywhere, but I can't find any option to remove this shadow.
I really want to get rid of it though, any tips on what I may be missing ??
Thanks
Duuude
P.S.: I hope what I wrote makes any sense, English is not my first language ...

Hi Zeno,
Thank you for letting us know this. I turned it off. Its really annoying when working on images
as it give it a fuzzy edge look that bugs my eye.
CHEERS...Mathew
Date: Wed, 19 May 2010 02:31:00 -0600
From: [email protected]
To: [email protected]
Subject: Re: "Shadow" around Canvas in PS CS5 and how to remove it?
Just an FYI, the drop shadow around the image was first introduced in CS4 but it needs OpenGL Drawing enabled from Edit->Preferences->Performance to work.
>

Drop Shadow On Placed PDF Illustrator CS2 XPSP3

Hi,
Is it not possible to add a drop shadow to a placed PDF in Illustrator CS2? I'm not managing.
Thanks for any help,
Ariel

I don't have CS2, I have CS4. If you, or someone else, generate in CS4 a PDF in Illustrator and save as Illustrator PDF, then open a new AI file and Place the vector graphic(s) the drop shadows work on the artwork itself. If you generate a vector graphic in Photoshop and save the file as a Photoshop PDF then Place it in Illustrator, it will create a drop shadow around the bounding box of the canvas that you had in PS. I will now try to use a Photoshop PDF with an Alpha Channel and delete the background, save it as a Photoshop PDF and see if it will generate a drop shadow around the artwork, rather than the bounding box. Stay tuned . . .
-markerline

Any way to get rid of the drop shadow on Screen Captures in Leopard?

i do a fair bit of procedure documentation work, and so use screen captures quite a lot. Since upgrading to leopard the screen grab tool now puts a 77(ish) pixel white border and drop shadow around the screen captures, which might look trendy for some things, but for the stuff I am doing is just annoying, and something that I have to remove from all of my screen captures.
Is there any way to turn this "feature" off.

There's a Terminal tweak that I got from Mac OS X Hints here:
http://www.macosxhints.com/article.php?story=20080629181121863
You just copy-paste a line into Terminal.app and after a restart the cursed shadows are gone!
If you do a Command-Shift-4 then hit space for a window grab, then grab the Dock, then there's apparently a single funkiness with this fix, in that the resulting image in this specific case (of the Dock) is stretched horizontally. I haven't seen mention of any other side effects, and otherwise it's working fine on my system, but be aware of that.
The Dock shows up fine in any other type of grab, so since I never take a picture of just my doc using the grab window function, I'm more than pleased to use this and get useful window shots back again.
Hope this helps!
Pres
Message was edited by: Pres Nevins

Drop Shadow Question

I find in Dreamweaver's Manuel the instructions on how to put
a drop shadow
around words and text. Can Dreamweaver put a drop shadow
around a CSS layer
or box? Or does that effect need to be a graphics image?
Thank you!
Best Regards.
Webdesigner

Thank you, Nadia, for this answer. It brings up a another
question which I
just posted in answer to Webbie...
": Nadia : ** Adobe Community Expert **"
<[email protected]> wrote in message
news:f3ihra$8st$[email protected]..
> You can use css to create a shadow but it doesn't render
correctlyacross
> platforms/browsers I believe. You can google for those
words and I'm
> sure you'll come up with some examples.
>
> I would use a graphic image instead and use css to
repeat the shadow the
> length of the box.
>
> --
> Nadia
> Adobe® Community Expert : Dreamweaver
> ----------------------------------------
> CSS Templates |Tutorials |SEO Articles
>
http://www.DreamweaverResources.com
> ~ Customisation Service Available ~
>
http://www.csstemplates.com.au
> ----------------------------------------------------
> Spry Widget Examples
>
http://www.dreamweaverresources.com/spry-widgets/
> ----------------------------------------------------
>
>
>
> "Webdesigner" <[email protected]> wrote in message
> news:f3i7pn$r9o$[email protected]..
>>I find in Dreamweaver's Manuel the instructions on
how to put a drop
>>shadow around words and text. Can Dreamweaver put a
drop shadow around a
>>CSS layer or box? Or does that effect need to be a
graphics image?
>>
>> Thank you!
>>
>> Best Regards.
>> Webdesigner
>>
>
>

DROP SHADOW: Photoshop Elements

Does Adobe Photoshop Elements provide "drop shadow" for version 6, on Mac?
If so, how it is applied, please?

Hi Dave
It’s best to start with a white background so that your shadow will show up best.
1. From The editor menu click File >> New >> Blank File
2. Set any dimensions of your choice and select whit for background color and click OK
3. Click File >> Place and navigate to your photo; select it and click the place button
4. Hold down shift and drag the image coroners to get the size you need on the white background and click the green checkmark.
5. Make sure your placed layer is highlighted in the layers pallet (it’s usually the top layer)
6. Go to the effects pallet and choose the layer styles tab (second from left with a symbol of two overlapping documents)
7. From the dropdown menu choose drop shadow and then select one of the thumbnails and click the apply button
8 A fx symbol will be added to the layer - you can double click the fx symbol to make adjustments
9. Use the sliders to increase distance or position of your drop shadow - you can also change the lighting angle.
After adding text with the T tool - You can add a drop shadow around all the letters using the same method and also to an outer frame.

Thin white line around black .ai logo and drop shadow question

Hello,
There's a very thin white line all around a black .ai logo I made when placed on a color background. It shows up in printing and acrobat (PDF % compatibility) too. Also, is there any way to get a transparent drop shadow (no white boxes) when saving as eps.
Thanks
Running OS10.4.11 In Design CS3, intel mac.

Is the logo rasterized in Illustrator? It sounds like something was antialiased against a white background.
>Also, is there any way to get a transparent drop shadow (no white boxes) when saving as eps
No. EPS does not support transparency. If an area is not fully transparent (because nothing is drawn there) then it is fully opaque. PDF and AI support transparency.

Lines around image with drop shadow

Hello,
I am currently using Illustrator CS 5.1 and am having an issue with my PDF files. I have a graphic that I am building and when I import an image, place a clipping mask around it and then add a drop shadow to it, everything works fine and looks exactly as I want it on screen. However, when I save the document as a pdf, a hazy white line appears around the edges of the image. However, the line is not on the clipping mask itself, instead it is on the square edges of the unmasked version of the image. So when I have 10 masked items on the page with drop shadows, I'm getting 10 faint white squares around each of the images which looks terrible. Has anyone else experienced this? Any recommendations/solutions?
Thanks in advance!
Wil

Also change your acrobat settings to show overprint preview always.
If this comes back in Illustrator PDFs, Print >> Advanced >> Slide tranparency flattener to raster >> done , then save.

div drop shadow hidden behind background image of div below

I am trying to show the <div navigation> drop shadow on top of the <div mainImage> background image. How can I fix the css to show it on top of the bar picture? Here is the site in progress... http://cishenanigans.com/index2012.html
Thanks!

You should use z-index. But this works only on absolute or relative positioned elements.
In your case, replace this:
#mainImage {
margin: 0px;
padding: 0px;
height: 300px;
width: 1020px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../images/mainImage.jpg);
to this:
#mainImage {
margin: 0px;
padding: 0px;
height: 300px;
width: 1020px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../images/mainImage.jpg);
position: relative;
z-index: -10;
That should do the trick

Illustrator CS6 crashes using Effect Stylize Drop Shadow. There's a work-around

Illustrator CS6 crashes when using Effect > Stylize > Drop Shadow on a regular shape e.g. rectangle created by the Ractangle Tool.
I select the shape, apply the effect and it will crash giving this warning dialog: "The operation cannot complete of an unknown error: [CANT]". Then Illustrator CS6 crashes.
This is the crash report in Windows 7 32-bit:
Faulting application name: Illustrator.exe, version: 16.0.0.682, time stamp: 0x4f6e762b
Faulting module name: MMXCore.8BX_unloaded, version: 0.0.0.0, time stamp: 0x4f44e8d6
Exception code: 0xc0000005
The crash happens about 90% of the time.
Possible work-around:
Since I experienced some strange behaviour of CS6 applications before, I experimented witn running Illustrator as an administrator (elevated privileges). When I do that, I can apply the effect without Illustrator CS6 crashing. Here I go again..elevated privileges (see http://forums.adobe.com/message/4432510) .
I have to admit, this is one of the many strange behaviours in CS6 applications that make their performance and reliability very unpredictable.
Cheers,
Dave

Wade_Zimmerman wrote:
When will you users on the Window platform learn to repair your permissions the problem when installing any software is that the permissions may not be set properly and this may be caused by the way previously installed software has changed your system.
Because there's no need to do a "repair permissions" thing, that being a bizarre Apple concept. In Windows, the software installation neither "sets permissions properly" nor does previously installed software "change your system" (whatever that means). Windows installation packages run under a special account to copy files into their proper directories without having to "change system properties". It's all done automagically and managed by Windows, not by individual applications.
Wade_Zimmerman wrote:
KNow I know that with windows users it is a very unpopular premise that the permission might need to be repaired but they do from time to time and I believe unfortunately that on the Windows platform it is a manual procedure but there may be a utility that can do it for you.
Like I said, all of that makes no sense on Windows.
Wade_Zimmerman wrote:
Of course your settings folder could also be corrupt.
I did rename the Prefs, and AI did re-create it, and the SFW problem I described was resolved. Great!, I thought, until I closed AI and opened it again -- Boom! Same problem.
The problems I described happen because software developers (and the Q&A testing teams) have an arrogant attitude -- they think "I'm the King of my computer and, by God, I'm going to run my computer as the most powerful user I can be." So they do all their work under the elevated privileges of an administrator account, and are completely surprised and clueless when their software fails to run under a standard user account. (Always running one's computer under the reduced privileges of a standard user account, by the way, is the recognized Best Practice for safe computing; and in these times it is now unacceptable to require elevated privileges to run an application....)
Ken

White boxes appear around drop shadows in PDF's

I'm exporting a file from InDesign CS3 that contains several graphics that have a drop shadow applied to them (added in InDesign NOT Illustrator). When I view the PDF, there are white boxes that appear behind the graphics with the drop shadows. I need to use the 'Compatibility: Acrobat 4 (PDF 1.3)' setting from the PDF export dialogue box.
Any help would be greatly appreciated.
Thanks in advance.

Sometimes having drop shadows on images (imported) that have spot colors causes this. Converting them to process or RGB helps. I know that applies to imported graphics but it may apply to graphics created in InD sgn. Are your graphics set up in spot colors?

Drop shadow around wrapper div

Similar Messages

Maybe you are looking for