View Full Version : Rounded rectangle help!


bettinaaaaly
03-31-2006, 09:55 AM
How do you make a rounded rectangle for comments? If I use a background image, a long comment will "overflow".

Here's an example:
http://pootato.org/html/coding_a_layout/

How can I make one like that so comments will fit perfectly inside the rounded rectangle, regardless of their length?

J to the izzosh
04-01-2006, 02:49 PM
One way to do it would be using <div> elements and background images:


<div>
<div class="boxtop">Title, or something, here.</div>
<div class="boxcontent">Commments would go here...</div>
<div class="boxbottom">Date, or something. Nothing really necessary</div>
</div>

Give all three classes a margin of 0 so the are flush which each other. Style the boxtop class so that it has a background image which is basically just the rounded top corners of your box. Be sure to pad the text so that it doesn't go outside of the background image. Give the boxcontent class a background colour that is the same as the colour of the background image of the boxtop class, also pad the text so it fits nicely. Give the boxbottom class a background image that is the rounded bottom of your box. Then just make sure to set the width of all three so they match each other, and set the width and height of the top and bottom so they fit their background images perfectly. You might even want to set the images to not repeat. Don't sent a height for the boxcontent class, so it will be able to stretch with the length of the comment. The outside <div> element is basically just there to contain the three for the comment box and is optional.