Website Design Forum

**moet** · 02-24-2005, 02:37 PM

Sorry to ask yet another beginner question, but how do I create boxes (very much like the ones on the right of this page for example) that have a thicker border at the top for text, and that contain text/pictures? I can't seem to modify the cell/table settings to give what I want; ie rounded edges etc.
Thanks.

**QueenOfStarwars** · 02-25-2005, 09:12 PM

You'll want to create an image of the rounded edge. For example, In the boxes to the right, the left and right corners are images (here's a look: http://www.webmaster-talk.com/w-t_st...head-right.gif).

If you give an example, it might be easier to help you out. There are many ways to possibly line things up.

One quick-and-dirty way I like to get nice areas w/ rounded edges is by using the <fieldset> and <legend> tags. I've seen some issues on Macs, but these tags are generally very nice across browsers.

You can use style sheets to redefine the look of the legend contents. The coding would go as follows:

<fieldset>

<legend>MY TITLE</legend>

blah blah blah...my content in the box

</fieldset>

Here's a page that shows many separate boxes on one page: http://www.coastal.edu/graduation/

**moet** · 02-26-2005, 10:18 AM

Thanks for that, I like the way it works. Is it possible to change the width or colour of the border though?
I was also wondering about tables that have the writing in the top margin (ie on the right of this page where it says Forum News and Rules).

Thanks again for the information.

**QueenOfStarwars** · 02-27-2005, 09:46 AM

I thought I'd give you a more specific example using the boxes on the right. Here is how you would make one of those boxes:

1) You'd make style sheets with the attributes you want (color, border, font, etc...)
2) Then, apply those styles to different areas of your html coding - in the case on this page, DIV tags are being used. (I've strippped as much code as possible to make the example short - so the text looks a bit plain, but just change your styles to have any look you want).

<html>
<head>
<title>Example</title>

<style type="text/css">

</style>
</head>

<body>
<table>
<tr>
<td valign="top">
<div class="sidebar_head1"><div class="sidebar_head2">
Hello
</div></div>
<div class="sidebar_content">This is the info in the middle</div>

</td></tr></table>
</body>
</html>

**moet** · 02-27-2005, 01:09 PM

Brilliant, thanks for that! I think I mentioned in my other post that I couldn't make this work in Namo webeditor, but in Dreamweaver it worked perfectly (and I even managed to centre the 'Hello' all by myself - there's hope for me yet!).
Your help has been much appreciated Jeannie and everyone. Thanks.