shiny_spoon Posted June 17, 2009 Share Posted June 17, 2009 Hey guys, I could use a hand making this container box I'm working on. Its got three parts, we'll call them top.gif, mid.gif and bot.gif. I am trying to create a box where top.gif, and bot.gif are static and do not repeat, but mid.gif repeats Y as more content appears in the box. The catch is text has to be inside the entire container, and not just in the mid section. +------------------------------------+ | top.gif beginning of paragraph | +------------------------------------+ | middle of paragraph | | mid.gif middle of paragraph | | middle of paragraph | +------------------------------------+ | bot.gif end of paragraph | +------------------------------------+ I've tried a bunch of things including using <img> tags for the top and bottom images, but nothing seems to work out the way I want it to. Note that top.gif and bot.gif have curved corners, so having mid.gif repeat from top to bottom behind them is out of the question, unfortunately. Any advice? Thanks! Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 17, 2009 Share Posted June 17, 2009 I can't think of any way to do this without having some padding on either the top or the bottom Quote Link to comment Share on other sites More sharing options...
shiny_spoon Posted June 17, 2009 Author Share Posted June 17, 2009 No, huh? :-\ I suppose I could stick three divs together, add the title in the top one and add text in the mid section. Now if only CSS3 were standard I could just add three backgrounds to a single div. Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 17, 2009 Share Posted June 17, 2009 Actually...you could do it one way... <div style="background:url(mid.gif) repeat-y;width:400px;"> <div style="background:url(top.gif) no-repeat;"> <p style="padding:0;margin:0;background:url(bot.gif) no-repeat left bottom;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in tellus justo. Fusce porttitor ipsum eget lorem sagittis pulvinar. Aenean congue massa interdum sem facilisis nec posuere lacus tristique. Sed vel leo mi, non consequat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras condimentum lorem sit amet urna posuere et vestibulum nibh porttitor. Vivamus at convallis neque. Morbi a elit lectus, ac suscipit tortor. Quisque id leo id erat pellentesque scelerisque. Aenean tincidunt lorem eget erat hendrerit auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut iaculis ultricies nisl at egestas.</p> </div> </div> the padding/margin is only there to show you it fills to the edges Quote Link to comment Share on other sites More sharing options...
shiny_spoon Posted June 17, 2009 Author Share Posted June 17, 2009 Hmm... It looks like it wants to work, but all three backgrounds just pile on top of each other at the top of the div. Thanks though! I'll tinker around with this and see if I can get a result out of it. Edit: I actually got it working by tinkering around with heights. Now my only problem is that the mid.gif appears through the corners of top.gif and bot.gif because they have transparencies. There's no way I can tell the middle element to start after x pixels and stop before y pixels, is there? I could always set a static background color so it doesn't show, but that would limit my layout a bit. Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 17, 2009 Share Posted June 17, 2009 make sure you have that LEFT BOTTOM in the background style for the P Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.