DIV Borders

..........and text within borders

[jaccinc]

what are the tags for setting up text within a DIV border?
the top, for example, would look something like this:
---- Text goes here ---------------------

[jaccinc]

Oh and while I'm asking for assistance...
I have never figured out how to get rid of the space (the fat border padding) that forms have. Sometimes it just doesn't show and I have yet to figure out how to ensure that it doesnt. Can anyone help with this as well?

[grahamstewart]

as far as I know there are no specific tags for creating the style that you require. But you can easily fake it by doing something like this...

HTML:

<div class="box"> 
 <span class="boxtitle">Title goes here</span> 
</div> 

CSS:

div.box { 
  margin-top: 0.7em; 
  border: 2px groove; 
} 
span.boxtitle { 
  position: relative; 
  top: -0.7em; 
  padding: 0 3px; 
  margin: 0 3px; 
  color: inherit; 
  background: #fff; 
} 

As for the space beneath forms, you can easily get rid of that by specifying..

form {
margin: 0;
padding: 0;
}

in your CSS.

[grahamstewart]

Oh and Welcome to WebmasterWorld jaccinc [webmasterworld.com]

[jaccinc]

HEY! THANKS! That works beautifully.
Isnt there an actual tag that can do that in DIVs though? I saw it like a few weeks back at another site but unfortunately didn't bother to save the address or learn the actual codes......

[grahamstewart]

There is a tag called <fieldset> which does something similar, but unfortunately its only intended for use on forms.

You use it like this..

<form action="..." method="post">
 <p>
 <fieldset>
   <legend>Personal Information</legend>
   <label>Last name:<input name="lastname" type="text" tabindex="1"></label>
   <label>First name:<input name="firstname" type="text" tabindex="2"></label>
 </fieldset>
</p>
</form>

On IE6 it generates a nice rounded box with the legend text appearing in the top edge as you describe.

[jaccinc]

thats the one! hey, how do you format the border for the <fieldset> tag? I realize it is more troublesome to work with especially since its designed for forms but with the other codes, the problem is, I use a cascading drop down menu for my sites main navigation and the text stays on top of the menu blocking half the links (well more like 2 but still). Well the thing I'm looking for specifically is how can I have the border only 1px in width and solid for the <fieldset> tag.

[grahamstewart]

the text stays on top of the menu

you could solve this by using the z-index CSS property.

how can I have the border only 1px in width and solid for the <fieldset> tag

fieldset {
border: 1px solid #000;
}