Forums

wivm

Hi, I am still used to the days when tables where used to style a website. Today I am creating a new personal website, and want to do it the proper way with HTML5 and CSS3. But I have a problem...

I basically want a centered white content DIV of 960px. Next to that I want two images that are the borders between the content and the background. This is how I managed to get it work, but it does not really feel correct because when I enable "compatibilty view" in IE, I get an ugly looking think. :-)

Note: border-left.png = 79px and border-left.png = 51px, therefore you see these numbers appearing.

      html, body {
          background-color:#e2e2e2;
          height:100%;
          margin: 0 auto;
          width: 1090px;
          height: 100%;
      }

      #wrapper {
          margin: 0 auto;
          width: 1090px;
          height: 100%;
          position: absolute;
      }

      #content {
          margin: 0 auto;
          width: 960px;
          height: 100%;
          position: absolute;
          background-color: #ffffff;
          margin-left: 79px;
      }

      #border-left {
          background: url("images/border-left.png");
          float: left;
          width: 79px;
          height: 100%;
      }

      #border-right {
          background: url("images/border-right.png");
          float: right;
          width: 51px;
          height: 100%;
      }
<body>
    <div id="wrapper">
        <div id="border-left"></div>
        <div id="content">
            <div id="test">
                <img src="images/Capture.PNG" />
            </div>
        </div>
        <div id="border-right"></div>
    </div>
</body>

Could someone help me to do it the proper way?

Thank you!

Paulie_D

We'd really need to see the images...and the site. Do you have a link?

I don't like the idea of those divs being there JUST to have bg images. I know that sometimes you have to but I wonder if there isn't a better solution that will work in IE8.

David_Leitch

Perhaps you could do something a little more simple like this?

wivm

Hi,

My website is not online so I can not provide you my pictures. But I found one that is simular as what I want to do: http://teusje.files.wordpress.com/2011/03/microsoft-partner-network-logo-blocked-1.png

See the left and right border that is (in this case) transparant. My project is more or less the same. My border doesn't need to be transparant, but I use pictures to fade over. The page setup is also more or less the same. Only in my case the logo is inside the white centered content area/

Thanks!

Paulie_D

Looks to me as though all you need is a BODY bg image suitably positioned if it's going to be the only one on the page.

Paulie_D

Actually, it probably does make sense to that a wrapper around the content div:http://codepen.io/joe/full/zBibd

wolfcry911

Here's a fork of Paulie's work with a transparent border http://codepen.io/wolfcry911/pen/ywKJe

ToxicFire

http://css-tricks.com/examples/GradientBorder/

adapt for images rather than gradients and ya have a nice choice of methods

wivm

Hi,

Thank you all. It has been a great help! I changed the design a little bit, based on your tips. This is the current code:

    <style>
        * {
            margin: 0;
        }

        body {
              background: #e2e2e2 url("images/test3.png") no-repeat 50% 0px;
        }

        .wrapper {
          margin: 80px auto;
        }

        .content {
          width: 900px;
          height: 1000px;
          background: white;
          background-clip: padding-box;
          margin: -10px auto;
          border: 3px solid transparent;
          border-radius: 5px;
          box-shadow: 0px 5px 25px #333;
        }

        .content h1 {
          font-family:Arial;
          color: #2f2f2f;
          letter-spacing: -1px;
          font-size: 32px;
          text-align: left;
          position: relative;
          top: -50px;
        }
    </style>

    <div class="wrapper">
        <div class="content">
        <h1>Test Website</h1>
        </div>
    </div>

This looks great in IE9 & Firefox, but in IE8 on one PC I get a really scattered background. Strange, because it is one big image of 2600 px x 1400 px (to fit for large screens as well).

The border with the shadow is also not working, except for IE9 & Firefox.

One final think, could I not do it without the wrapper in this case? Or is it still required?

treehouse : what would you like to learn today?

Forums

Centered content with left and right image border