Daniel, On Jan 5, 2006, at 10:05 PM, Daniel Liljeberg wrote:
> Heres a small testpage using my solution. > Any ideas would be gladly taken. > > http://damien.x.i8t.com/box/boxtest.html > > Best regards > Daniel Liljeberg > >> -----Original Message----- >> From: [EMAIL PROTECTED] >> [mailto:[EMAIL PROTECTED] >> discuss.org] On Behalf Of Roger Roelofs >> Sent: den 6 januari 2006 03:08 >> To: 'CSS list' >> Cc: Daniel Liljeberg >> Subject: Re: [css-d] Boxproblem >> >> Daniel, >> >> On Jan 5, 2006, at 9:03 AM, Daniel Liljeberg wrote: >> >>> I have a box with rounded corners created with divs and background >>> graphics >>> of the corners, sides and the bottom. >>> >>> The problem is that it doesn't scale with the content. >> >> <http://css-discuss.incutio.com/?page=RoundedCorners> Please check out the wiki page referenced above. The 'Sliding Doors' links will do exactly what you want in a very simple manner, no javascript required. This one <http://tutorials.alsacreations.com/cadre/> (the first link under 'Sliding Doors' on the wiki page) does a good job of showing how to apply the technique. Your box has a fixed with, so you only need two or three images. Read the various tutorials and pick the one that makes sense to you. In your case, I think the markup could be something like ------ html --------- <div class="news-item"> <p class="posted-date">2005 01 16, 16:00 CET</p> <h3><a href="...">This is a news!</a></h3> <p>The divs of this box gets resized at the end by javascripts. But it doesn't always work and I'm on the hunt for a pure CSS way to fix this.</p> <p class="comments"><a href="" class="news_link">Read more</a> - Comments: <span>(0)</span></p> <p class="authorship">Written by DAMiEN</p> </div> ------ css -------- .news-item { background: url(bottom.gif) bottom left no-repeat; padding-bottom: 1em; /* some amount to keep the text fron touching the edge */ } .news-item h3 { background: url(top.gif) top left no-repeat; padding-top: 1em /* same reason a above */ } /* this one is optional depending on how you make your images */ .news-item p { background: url(middle.gif) top left repeat-y; } .news-item p.posted-date, .news-item p.comments { float: right; background-image: none; } .news-item p.authorship { background-image: none; } -------------------- hth Roger, Roger Roelofs "Remember, if you’re headed in the wrong direction, God allows U-turns!" ~Allison Gappa Bottke ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
