SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Center a page with shadow borders

    Hi friends,

    I'm a new member so a quick hi to everyone. I purchased the Beautiful Web Design book and its fantastic.

    I have a design which I need to center. 780 pixels fixed width. So it stays in the middle when a user resizes their browser window. I can center a column in the middle of a browser window using margin: auto, etc. But I need to have brown drop shadow page borders on the left and right of this so need to know the best CSS to achieve this.

    A slice of the page design is at:


    You will see part of the nav and the brown borders which I've created using a drop shadow in Photoshop.

    Could someone do example CSS for the three CSS containers, or if there is a better way please explain. I thought of a background image, but I need the left and right facing borders positioned properly to the sides of the main content even when the user resizes the browser window.

    Thanks,

    Lee.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Before we dive into this, you say it's fixed width 780px but then you say you want the shadows to stay where they are even if the browser window is resized. If the window is resized, it should make no difference, the layout should stay 780px wide and horizontal scrollbars should appear.

    So, what do you mean, is it really constantly 780px wide, or is it that it has a max-width of 780px?

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The main bit inbetween the brown borders stays at 780 pixels. With the browser window resized to be too small to view the whole page width, the whole design including borders should still show. So I guess the whole design would be 792 pixels. As each border is 6 pixels wide.

    When the browser window is wide enough to accommodate more than 792 pixels, then more brown will appear outside the borders.



    Thanks :-)

    Lee.
    Last edited by leegolding; Jul 10, 2007 at 09:50.

  4. #4
    SitePoint Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I best also add that the main content is split horizontally into a top nav bar, middle content area, and a footer. So I guess 3 divs inside the content div. And a div for the left shadow border and one for the right.


  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I see. Welcome to the forums by the way.

    This is how I would go about it:
    HTML Code:
    <html>
    <head>
     ...
    </head>
    <body>
    <div id="wrapper">
    content here
    </div>
    </body>
    </html>
    Code CSS:
    html {background:brown}
    body {
      width:780px;
      margin:0 auto;
      background:brown url(shadows.png) repeat-y;
      padding:0 6px;
    }
    #wrapper {
      width:780px;
    }
    It's important that you have a valid doctype so that IE doesn't go into quirks mode. Then the width of the body will be 780px (as specified) plus 6px from the padding (which is what accommodates the shadows).

    This means shadows.png will have to be an image 792px wide and perhaps 3 or 4 px high. From left to right, the first 6px are for the left shadow, then it's blank for the next 786px and for the last 6px it's the right shadow.
    Then there will be 780px left over for the #wrapper, which isn't strictly necessary. You can put your other HTML elements inside the body without it, but you will probably find it is more convenient to use it.

    Edit:

    No divs necessary for shadow borders, just a single background image.

  6. #6
    SitePoint Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works a treat. But the wrapper doesn't expand to fill the whole browser window height wise.

    Lee.
    Last edited by leegolding; Jul 11, 2007 at 14:19.

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What do you mean? Do you mean you want the shadows to extend all the way down even if the content is shorter than the viewport height?

    If so, you need to give the body height:100&#37;:
    Code:
    body {height:100%}

  8. #8
    SitePoint Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I started a new thread yesterday as I didn't want to be a pain and keep asking you questions. If you have the time, you could visit it and help me out there:

    http://www.sitepoint.com/forums/show...50#post3472750

    Thank you,

    Lee.


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
  •