views:

68

answers:

2

I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?

  • 1280x1024 : border-200px center-840px border-200px
  • 1024x768 : border-72px center-840px border-72px

I've made two images with 200px X 5px. I've tried to use the float property without success. So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).

HTML :

<body>
  <div id="right"></div>
  <div id="left"></div>
  <div id="center">
    <h1>Title</h1>
    <p>Content here</p>
  </div>
</body>

CSS :

html {
  margin: 0px;
  padding: 0;
}

body {
  margin: 0px;
  padding: 0;
  width: 100%;
  background-color: white;
  overflow: auto; /*to clear the floats*/
}

#right {
  clear: both;
  position: absolute;
  right: 0;
  background-image: url('/site_media/images/border-right.jpg');
  background-repeat: repeat-y;
  width: 200px;
  height: 100%;
}

#left {
  clear: both;
  position: absolute;
  left: 0;
  background-image: url('/site_media/images/border-left.jpg');
  background-repeat: repeat-y;
  width: 200px;
  height: 100%;
}

#center {
  width: 840px;
  margin: 0px auto;
  padding-left:10px;
  padding-right:10px;
}

Thank you!

A: 

if I understand correctly - what you're looking for is a bit difficult to achieve without javascript. You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?

example:

<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
    <div id="wrapper">
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="center">center</div>
    </div>
</body>
Herhor
Your solution give almost the same result as mine. I need the sidebars to be 100% height as they are in my code. The problem is when I display the site on a 1024x768 resolution(I want the sidebars to be cut, not shrinked). Thank you.
elblanco
+1  A: 

since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.

correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.

<style type="text/css">
body { /* can also use your own div */
   background:url(path_to_the_single_image) repeat-y top center;
}

#center {
   width:840px;
   margin:0 auto; /* centered the div */
   background:green;
}
</style>

<body>
   <div id="center">center content</div>
</body>

thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.

let me know if this is what you looking for.. :)

Faizal Heesyam
You completly understood my problem. It's a great solution! I will give it a try. Thanks!
elblanco
I tried it and it works. Thanks a lot faizalheesyam!
elblanco
glad to hear that.. :)
Faizal Heesyam