SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    major pain - faded gradient on OUTSIDE of central div

    i've got a page i'm restyling. its got a central div (width 1150px) that sits within the body element. the body element has the usual "text align: center" rule so it remains in the center of the page as you enlarge / shrink the browser window. (well, unless you shrink the page less than 1150px, in which case it stays butted up to the left side).

    if u're not sure of this behaviour see the site i'm restyling. note how the white bit moves as you alter the size of the browser window. well all i want is to have a faded gradient on the OUTSIDE of this central div (but for the way the central div moves - as you change the size of the browser window - to remain exactly the same)

    the way i want the site to eventually look is as follows
    picture 03.jpg

    i've tried adding an extra div (around the centre one) with enough padding so i can see the faded gradients. but this just stops the center div moving at all. i'm stumped
    Attached Images Attached Images

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can't you just give the <body> the gradient background-image?

    If that doesn't work, can you post the CSS that you used when you tried with an extra <div>? I had to do something similar (I think) with this site, and I ended up using an extra <div> for it.
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers dude with the strange name. i managed to get it working by doing just that

    [ & yes, the site u did is an example of the same effect ]


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •