CODEWITHSUNDEEP
htmlcss
hirokuchima
hirokuchima

Reputation: 41

How can I have some text overlaying a border with CSS?

What is the best way to combine a border with some text like so:

 ----------- sometext ------------
|                                 |
|              form               |
|                                 |
 ---------------------------------

Upvotes: 4

Views: 12791

Answers (5)

thirtydot
thirtydot

Reputation: 228302

As it's for a form, you should use a fieldset element.

fieldset {
  text-align: center;
}
<form>
  <fieldset>
    <legend>Some text</legend>
    <p>Stuff</p>
  </fieldset>
</form>

Upvotes: 8

Diptanshu Agrawal
Diptanshu Agrawal

Reputation: 21

  1. Define a division with border and put a heading in that division.

  2. To make the heading overlap the top border, define a negative top-margin appropriately.

  3. To make the line around the heading disappear define the background color of the heading same as the original background.

Here goes the code:

<div class="container" style="border: 1px solid black;">
  <h4 style="margin-top:-1%; background: white;">Heading</h4>
</div>

Upvotes: 2

Sushanta Patel
Sushanta Patel

Reputation: 624

Supporting the previous answer, the fieldset element came in html 4 and it helps to group like items within a form and creates a set or a field of like items or you can wrap all the items contained in your form..

e.g. 

<form><fieldset><legend>Name of your field/Some Text(your case)</legend>

Then you can add your labels and inputs in p tags or table, but the p tag is more preferable. At the end close your fieldset and form tags.. and add this type of code to your css

fieldset{
    border: thin dashed #000;
}

You can add border to your form elements in this way..

Upvotes: 0

Voodoo
Voodoo

Reputation: 1024

Very similar to this discussion: How to center the <legend> element - what to use instead of align:center attribute?

As was said there, using the tag is a pain if you want consistent results across browsers. To achieve this effect, I'd use a <h> tag or <div> instead for the legend.

Here's a example: http://jsfiddle.net/CddE7/

Tested in Firefox, Chrome and IE 7,8,9 for PC. The vertical placement of the <h3> varies slightly by IE version but only by a little (and probably could be refined for more uniformity).

Since I assume people will complain about using an <h3> instead of a <legend>, yes, it's not as semantically correct. But it works.

Upvotes: 0

JakeJ
JakeJ

Reputation: 1381

METHOD:

For use with anything even when not using the forms fieldset, you can use my method in this JSFiddle (It does NOT use Javascript, JSFiddle can be used for pure HTML & CSS), I will explain what it does in here:

What the fiddle demonstrates is having 3 divs as the top single border area, made up of 2 divs either side with a 1px border in the middle, and one on each side, and the middle div having text only, aligned to the center and padded as needed.

There is then a div placed underneath that which is the main content, but it only has 3 borders (left, right and bottom. The top has been made by the side div's).

The CSS and HTML is here, and JSFiddle link underneath.

FEATURES:

This method should fit all your criteria

  • Border text is in the place of part of the top border
  • Border text is central, can be placed anywhere along by modifying the CSS
  • Easy to change dimensions of the bordered area

CSS:

.wrapper-box { float:left; width:500px; height:150px; }
.side-border { float:left; height:24px; width:199px; border-top: solid black 1px; margin-top:25px; }
.side-border.l { float:left; border-left: solid black 1px; }
.side-border.r { float:left; border-right: solid black 1px; }
.border-text { float:left; height:35px; margin-top:15px; width:100px; text-align:center; }
.box-content { float:left; width:498px; height: 100px; border-left: solid black 1px; border-right: solid black 1px; border-bottom: solid black 1px; }

HTML:

<div class="wrapper-box">
    <div class="side-border l"></div>
    <div class="border-text">Border Text</div>
    <div class="side-border r"></div>
    <div class="box-content"></div>
</div>

EXTRA INFO:

To modify the CSS for longer text, just reduce the width of the border-text, and increase the width of the side-border.

JSFiddle Example Here

Hope this helps you out, I'll be keeping this for future reference myself :).

Upvotes: 3

Related Questions