Create div with title header [closed]

Answer 1

As Fabian said, you cannot do exactly what you want within Internet Explorer. If you still decide you want to create that without any images/javascript, I strongly suggest that you use some conditional statements - a surprising number of people still use Internet Explorer and I'm a little worried how that sort of solution would render in IE!

Best of luck - this was a really great question!

Answer 2

Using wiifm's JS Fiddle demo, I solved an issue when building a calendar and wanted to make the events on the calendar more colorful and dynamic - I wanted to have a DIV as the containing element, along with the H2 for the time of the event, and the internal P tag holding the event text - I had a set of pre-determined colors for the users to select from, and wanted the background of the H2 to have the same color as the border of the containing element, based on which secondary class was assigned to the element. Normally, you'd have to define a background color for the H2, but with this trick, it uses the containing element's background color as a faux background, so it saves having to create a class just for that, and allows the resulting code to be much cleaner. Here's a forked JS Fiddle link of what I did. It also works in IE8!

http://jsfiddle.net/Hsm35/

Just wanted to share since this helped me get to my solution.

Answer 3

HTML:

<div class="box">
    <h2>Div Title</h2>
    <p>Div content.</p>
</div>

and the CSS:

.box {border:2px solid #0094ff;}
.box h2 {background:#0094ff;color:white;padding:10px;}
.box p {color:#333;padding:10px;}

Use CSS3 for border radius

.box {
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

The above code will work in firefox, safari, chrome, opera (10.5 +) etc

Now with bonus demo

Answer 4

HTML:

<div class="myDiv">
  <h2>Div Title</h2>
  <p>Div content.</p>
</div>

CSS:

.myDiv {
  border:2px solid #0094ff;
  -webkit-border-top-left-radius:6px;
  -webkit-border-top-right-radius:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  width:300px;
  font-size:12pt; /* or whatever */
}
.myDiv h2 {
  padding:4px;
  color:#fff;
  margin:0;
  background-color:#0094ff;
  font-size:12pt; /* or whatever */
}
.myDiv p {
  padding:4px; 
}

Demo.

Answer 5

What you want is not possible unless you dont really care about support in internet explorer.

http://www.the-art-of-web.com/css/border-radius/