SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: drop shadow shifting layout
-
Sep 10, 2007, 07:15 #1
- Join Date
- Jun 2005
- Posts
- 313
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
drop shadow shifting layout
Hi everyone,
I'm trying to use css to create a drop shadow effect behind my layout. Before starting on the drop shadow I had everything contained in a wrapper div which correctly centered the layout within the browser window. I've since tried nesting the wrapper in another two divs to try to create the drop shadow effect but when I do this the layout shifts to the left of the browser window and only part of the drop shadow is appearing.
I've uploaded the page to this address:
http://www.officelinkonline.com.au/test/
and the css is at this address:
http://www.officelinkonline.com.au/test/main.css
Just wondered if someone wouldn't mind taking a look to see what might be happening?
The css relating to the shadow is as follows:
.alpha-shadow {
width: 770px;
margin:0 auto;
position: relative;
background: url(images/dropShadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.alpha-shadow div.shadowInner {
background: url(images/shadowPNG.png) no-repeat left top !important;
background: url(images/shadowGIF.gif) no-repeat left top;
padding: 0px 5px 10px 0px;
}
Would really appreciate any help.
-
Sep 10, 2007, 09:43 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
HI,
Its not centred because you have removed the auto margins.
Code:.alpha-shadow { width: 770px; margin:0 auto; position: relative; background: url(images/dropShadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; }
See the link below for some drop shadow techniques.
http://www.ploughdeep.com/onionskin/
-
Sep 10, 2007, 09:56 #3
- Join Date
- Jun 2005
- Posts
- 313
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for that - the centering is fixed now but I still can't get the drop shadow to move to the right. I'm trying to use the instructions given in the drop shadows article at the a list apart website but I'm ovbviously doing something wrong. Not sure if I should go with the onion skinning method you pointed out - it looks a lot harder than the one I'm doing.
If my current method only needs a simple fix, can you point it out? Otherwise I can see if the onionskin will work.
-
Sep 11, 2007, 04:56 #4
- Join Date
- Jun 2005
- Posts
- 313
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi,
Sorry to come back to this topic - I decided to take a different approach and try out the onionskin version of css drop shadows. Unfortunately this has pushed me back to where I began, ie. the layout is again not centered and I can't seem to offset the shadow at the bottom edge.
The page is again at the same address:
http://www.officelinkonline.com.au/test/
Would someone be able to take a look at this? The revised drop shadow related css is as follows:
.wrap1, .wrap2, .wrap3 {
display: inline-table;
/* \*/display: block;/**/
}
.wrap1 {
margin: 0 auto;
position: relative;
z-index: 1;
float:left;
background: url(images/shadow.gif) right bottom no-repeat;
}
.wrap2 {
background: url(images/corner_bl.gif) left bottom no-repeat;
}
.wrap3 {
padding: 0 8px 4px 0;
background: url(images/corner_tr.gif) right top no-repeat;
}
.wrap3 img {
display: block;
}
Also, if I can finally get it working there's still the problem of the corners of the shadow not matching my cornered layout - would I need to alter the shape of the drop shadow corners in Photoshop to make it fit my layout? The onion skinning article doesn't go into this sort of thing. Also not sure how to make the drop shadow match my background colour - again the article doesn't mention how to do this.
Thanks for any continued support.
-
Sep 11, 2007, 05:55 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
You need to give wrap1 a width so that margin auto works which also means removing the float.
Code:.wrap1 { position: relative; z-index: 1; background:red url(http://www.officelinkonline.com.au/test/images/shadow.gif) right bottom no-repeat; margin: 0 auto; width:778px; }
The shadow is not showing at the bottom because you have absolutely placed .back on top of it. You need to move .back by 10px to let the shadow show.
e.g.
Code:.back{ width: 770px; position: absolute; z-index: 0; left: 0; bottom: 10px; margin-top: 20px; }
The same goes for the background colour. Re-make those image so that they match your background colours. You could use transparent pngs instead but IE6 doesn't understand transparent pngs and you would need to hack for it which gets complicated. The easiest solution is to make the images fit your layout colours.
-
Sep 11, 2007, 06:23 #6
- Join Date
- Jun 2005
- Posts
- 313
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks again. It seems whenever I fix one problem another one appears. I have text in a div with an id of 'content'. It's supposed to float and appear to the right of the nav div but it's being pushed right down below the layout. Can you tell me why this has happened?
http://www.officelinkonline.com.au/test/services.html
div#content {
width: 510px;
float: left;
margin: 0;
padding: 20px 80px 90px;
display: inline;
position: relative;
z-index: 1;
}
-
Sep 11, 2007, 07:32 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
The closing div of #main should be at the end of #content and not just surround #nav only.
-
Sep 11, 2007, 14:45 #8
- Join Date
- Jun 2005
- Posts
- 313
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
great - thanks again
Bookmarks