Background Images around flexible Content?_问答_开发者

Background Images around flexible Content?

开发者 https://www.devze.com 2022-12-18 10:45 出处：网络

相关专题：css

im trying to get some background images around a content div. Thing is, the content div should have a flexible width (no problem). The background pics should always be left and right attached to the content div. BUT: the horizontal scrollbar should only be triggered, when the user reduces the window to the width of the content div.

Picture: Structure

I came up with something like this:

<div>
    <div class="header">/div>
 <div class="wrapper">  
     <div class="left"></div>
     <div class="right"></div>
     <div class="content">Content</div>
 </div>
    <div class="footer">/div>开发者_如何学JAVA
</div>



.wrapper{
 margin:auto;
 width:950px;
position:relative;
}

.left {
background:transparent url(../images/left.png) no-repeat scroll 0 0;
position:absolute;
top:0;
left:-120px;
width:120px;
height:500px;
}

.right {
background:transparent url(../images/right.png) no-repeat scroll 0 0;
position:absolute;
top:0;
right:-120px;
width:120px;
height:500px; 
}

Scrollbars always appear when window hits the right absolute div. I need them to be two divs (left/right) because the content div should be flexible and not hide the background when it extends to much.

Someone got a tecnique for this?

you have an unnamed plain root container div.

Add this style for that div (or give a class/id name to wire css deceleration). Main point is min-width... Keep it same with your container div's width.

also adding body,html{margin:0;padding:0;} will be nicer.

style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"

this will work fine exept for ie6. For ie, you can apply some js magic.

Let's assume you're using jquery library and you gave id name "shell" to your root container div. Then try this script only for ie6. (create exclusion or something like that):

$(document).ready(function(){
 $('#shell').each(function(){
  var that = this;
  var contentWidth = 950;
  check();
  $(window).resize(check);
  function check() {
   var winWidth = Math.ceil($('body').width());
   if(winWidth <= contentWidth) {
    $(that).css({'width':contentWidth});
   } else {
    $(that).css({'width':'100%'});
   }
  }
 });
});

This script will make "shell"s width 100%. (if browser's width is larger than 950px) otherwise it'll lock shell's width with 950px and that will enable scrollbar.

I did something similar for a website, the solution I came with was this:

I created an image with the left and right content on the background and the space of the content in the middle to just be a solid color, even though the image is 1400 x 539 it weights 12 KB, so it's pretty good.

<html>
  <body>
    <div id="wrapper"></div>
  </body>
</html>


body {
  background: #fff url(left-and-right.jpg) no-repeat center top;
  text-align: center;
}

#wrapper {
  margin: auto;
  text-align: left;
  width: 960px;
}