Skip to Content

Stylegala Forums » Forums list » Problem solving

CSS layout background shadow for div.

CSS layout background shadow for div.

post new topic Post new topic    Reply to topic Reply to topic

Author Message
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Thu Feb 02, 2006 21:39
Getting a bit of a grasp of this stuff...
A quick layout question:
Centering a 760 pixel wide div, and the div image header will be 750 pixels wide...
I'd like to add 5 px of drop shadow to each side of the 760 wrapper div using a background image, would I want to add 5 pixels left 5 pixels right of padding or margin what's the differences?
thanks.


Last edited by Lost_User on Thu Feb 02, 2006 22:03; edited 3 times in total

View user's profile Send private message
 
Sponsor
 
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Thu Feb 02, 2006 21:46
use padding.. or just make a background in your body, centered and repeating in y only.. :)

View user's profile Send private message
 
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Thu Feb 02, 2006 22:07
The blue to white/sky gradient will go across the page top as page background...The header probably contained in it's own div. So it would be the main background div that needs the background shadow, if using padding set to 5 pixels on either side, then later when I would use margin of say 30 pixel's to align text and other elements does that get added to the padding, so the total margin winds up being 35 px? Is that subject to the browser's interpretation ever then?
Learning what I can here newbie minutia...
tnx

View user's profile Send private message
 
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Thu Feb 02, 2006 22:10
yep thats how it works.. :) padding 5px + margin 10px.. padding is inside space and margin outside space..

View user's profile Send private message
 
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Thu Feb 02, 2006 22:13
Oh... OK I was way off then margin is outside space then, that explains alot thanks... So if a div is set to 750 pixel's wide and I have a 760px x 10px BG image w/ 5 px of shadow on each outer edge it will show then, if I set 5px left & 5px right margin's.

I should be good then,
Margin Outer, Padding Inner ;)

View user's profile Send private message
 
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Wed Feb 08, 2006 22:40
Still working on this particular layout, it has developed into the header and page background-blue gradient shown and then a left-hand menu, center content, and right column (for grins might come in useful).
So I go to ALA and look at the latest examples of:
Example 3 next link Holy Grail - article page.

I thought these would be perfect for the application of the page/site I am building. Why don't they show up correctly in a WYSIWYG editors?
I'm not sure I want to move up to a coding only situation of building. Is there a way to make the designs show more correctly in DW or FP.
In frontpage for example the left-hand column never shows up at all w/ the example 1 and example 3 that I tried, I'm not quite sure why.

Maybe I'm not even on the right track here, since I want a fixed width layout not a liquid 100% width layout anyways, even though I'm assuming this layout could be adapted.

Is there a three column layout, that would show up in one of these editors better, I guess maybe DW generates it's own, but this ALA layout was more bare-bones and I was going to learn so much more using it... however, not sure I want to sacrifice being able to edit on the fly w/ WYSIWYG as I have in the past. Hmmmm just when I think I'm going down the right road, it does a great big 'ol Y

[Edit] I haven't yet checked all of the other noted links on the new ALA page, but one of the noted version's ManiSheriar version works fine in frontpage, so I guess I'm going w/ this version in my corner of the sandbox for now, should prove interesting.
The columns extend to the bottom of the browser in IE6 not in FF though, go figure that one. Tough trade there.
Not to worry seems to be all working out, gonna add the shadow div tomorrow I have the body sky blue gradient in place now, not sure a link to the new page in progress would work...First sorta custom CSS layout... thanks to mario and mani

View user's profile Send private message
 

Page 1 of 1

post new topic Post new topic    Reply to topic Reply to topic

Display posts from previous:   

Powered by phpBB. © 2001, 2006 phpBB Group & Logo Design