SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    indestructible box

    Hi,

    I have a box that has rough edges tath have been created in photoshop. I need to make it expandable...so it takes as much content/reiszing of text....i've created indestructiable boxes with rounded corners before but not indestructible boxes with 4 edges that are all unique.

    I'm thinking that perhaps some variation on sliding doors could be used but am after some opinions on how others would achieve this.

    It's like this:


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is quite awkward because you have uneven edges and if you want it to expand you will always have a situation where one edge doesn't match up with an opposing edge.

    Depending on how much text you expect to have and how big you want the boxes I would use to very large images and supply the top and left sides in one image and the bottom and right sides in another image and then just nest an element with an image in the background of each.

    Here is a very quick and rough example.

    http://www.pmob.co.uk/temp/fluid-graphic-box.htm


    Obviously as this is a fixed image size (1946x1206) it won't cater for every possible window size or never ending height etc.

    If you need the background to go on for ever then you will need to used 4 nested containers with one side image in each. You will need to ensure that the image can be repeated along each axis by making sure that the join is invisible. I usually do this by coying a large section of the image and then flipping it so that it becomes a mirror image and then stitch them both together. This ensures the joins are seamless.

    The problem you will have in both examples is that the image is uneven and there will be times when the background of one image will rub out the background of the other image because they are not an exact height all the way along.

    You should still be able to get reasonable results but would never be perfect unless you also used transparent images but that would be a nightmare in IE6.

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for the reply and taking the time to put an example together for me. Your advice is, as always, clear as a bell!

    I think I can get away with just having two images and one nested container as in your first example as i know the extent to which the content can expand before it is paginated.

    Thanks again

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually the drawback of the first example is the need for two rather large images isn't it. I've just been messing about with 4 nested div's with one image in each but can't seem to get it right. The div content is making all the divs bar the top one.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    p{padding:5px;margin:0 0 0 0}
    .box{
     
    	float:left;
        position: relative;
    	width:50%;
    	}
     
    .box-top {
    background: url(top.png) no-repeat 0 0;
    }
     
    #box-left {
    background:url(left.png) no-repeat;
    }
     
    .box-inner {
    background:url(bottom.png) no-repeat 0 100%;
    }
     
    #box-bottom {
    background:url(right.png) no-repeat 0 100%;
    position: relative;
    top: 5px;
    }
     
     
     
     
     
     
    </style>
    </head>
    <body>
    <div class="box">
      <div class="box-top">
        <div id="box-left">
          <div id="box-bottom">
    	<div class="box-inner">
        <div style="background: #616f7c;">
    		<p>This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : </p>
    		<p>This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : </p>
            <p>This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : This is the fluid content : </p>
    	</div>
        </div>
        </div>
      </div>
    </div>
    </div>
     
    </body>
    </html>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The div content is making all the divs bar the top one.
    That's because you have hidden all the other images with the background of your final nested div.

    Code:
     <div style="background: #616f7c;">
    You would need to apply a margin to that div to keep it from overwriting your images or add padding to the outer divs to protect the image.

    I'm not sure that your 4 single image are going to be much smaller than my 2 images after all is said and done . (They would be much smaller if you used repeating sections instead of course.)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you say you can control the height then you can get away with one image weighing in at only 9k.

    http://www.pmob.co.uk/temp/fluid-graphic-box2.htm

    The image is 1946 x 1206 so the box can never be allowed to be bigger than that or the edges will overlap.

  7. #7
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha, thanks....sorry silly mistake!

    My 4 images weight in at 3k (they're all pngs made in fireworks so they're very small!)...i know 9k is not much at all but i think i'll spend the extra time getting the second option working.... thanks again!


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
  •