SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Side borders on centred content page

    I'm creating a site that has centred content that is about 900px across. On the left and right border edges of the content container I want to create a shaded stripe so it looks like its floating a little off the white background. How do I achieve this?

  2. #2
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Give the margin equal to length of stripe and create div floating left and right.

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Adding graphical border styles to a fixed width container is simple. You create a 900px image, add your left and right styles to it and save it. (It does not have to be a big image, a small one will do that you can repeat vertically)

    In this example, you have a fixed width, centred container that repeats your left and right borders through the background image you have created. The left and right corners are 30px wide, so you deduct that value from the width.

    Code:
    #container {
        width:840px; /* -30px left border and -30px right border */
        padding: 0 30px 0 30px; /* make room for bg to show, 30px each side */
        margin: 0 auto; /* center container */
        background:url(mybackground.png) repeat-y; /* repeat bg vertically */
    }
    A much more flexible method, however, is demonstrated and explained here.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    On the left and right border edges of the content container I want to create a shaded stripe so it looks like its floating a little off the white background.
    Hi,
    The easiest way to take care of shadowed borders on a fixed width site is to incorporate the left and right images into one wide background image.

    The image only needs to be about 10px tall then you set it as the background image and repeat it down the y-axis of the main wrapping div. You will need to set side padding on that div to keep the text out of the shadow.

    That image I linked to above goes with This Demo and you will see the #wrapper BG styles and padding set up like this.

    Code:
    #wrapper {
        min-height:100%;
        width:800px;
        margin:0 auto;
        padding:0 20px;      
        background:#EEF url(images/shadow.png) repeat-y;
    }
    Edit:

    Sorry Maleika, I should have refreshed the page

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys - just what I was looking for


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
  •