CSS BOX border

[hmvrulz]

 

how to create the free products heading over the border...

 

with the border cut for tht part of the box ???

[haku]

Well, what they have done is kind of a hack, in that that is supposed to enclose form inputs, but this is how you can do it:

 

<fieldset>
   <legend>free products</legend>
   <p>some copy about what they will find...</p>
</fieldset>

 

You may not need the fieldset tags - I've never tried without (fieldsets and legends go together).

[hmvrulz]

thanx

[ToonMariner]

it would be so much easier to just use semantic markup... you can play around a little but the example below would achieve the desired layout except the header would not be centered - you'll just have to play a little more...

 

<div class="infoitem">

<h2>Section Title</h2>

<p>some copy about what they will find...</p>

</div>

 

the css

 

div.infoitem { border: 1px solid #ccc; margin-top: 1.5em; }

 

div.infoitem h2 { float: left; position: relative; top: -1em; margin: 0 0 -1em 20px; background: #fff; color: #ccc }

 

 

[dannyb785]

it would be so much easier to just use semantic markup... you can play around a little but the example below would achieve the desired layout except the header would not be centered - you'll just have to play a little more...

 

<div class="infoitem">

<h2>Section Title</h2>

<p>some copy about what they will find...</p>

</div>

 

the css

 

div.infoitem { border: 1px solid #ccc; margin-top: 1.5em; }

 

div.infoitem h2 { float: left; position: relative; top: -1em; margin: 0 0 -1em 20px; background: #fff; color: #ccc }

 

 

 

 

I agree completely. Because in my experience, the fieldset/legend/etc are interpreted differently by different browsers. Check how it looks in FF, then IE, and then safari. I almost guarantee it wont look the same.