Crear div con encabezado de título

Question

¿Cómo crearía el siguiente usando CSS puro (sin imágenes, sin tablas, sin javascript)? alt text http://img530.imageshack.us/img530/3209/divs.png

Answer 1

HTML:

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

y el CSS:

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

uso de CSS3 para el radio frontera

.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; 
} 

El código anterior funcionará en Firefox, Safari, Chrome, opera (10.5 +) etc.

Ahora con bonificación demo

Answer 2

Lo que queremos no es posible a menos que te realmente se preocupan por el apoyo en Internet Explorer.

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

Answer 3

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 4

Como dijo Fabian, no puede hacer exactamente lo que quiere en Internet Explorer. Si todavía decides que quieres crear eso sin imágenes/javascript, te sugiero que utilices algunas declaraciones condicionales: un número sorprendente de personas aún usan Internet Explorer y estoy un poco preocupado de cómo se renderizaría ese tipo de solución en IE !

¡Mejor de las suertes: esta fue una gran pregunta!

Answer 5

Utilizando la demo JS Fiddle de wiifm, resolví un problema al crear un calendario y quería que los eventos en el calendario fueran más coloridos y dinámicos. Quería tener un DIV como elemento contenedor, junto con el H2 por el momento. del evento, y la etiqueta P interna que contiene el texto del evento: tenía un conjunto de colores predeterminados para que los usuarios seleccionaran, y quería que el fondo del H2 tuviera el mismo color que el borde del elemento que lo contiene, basado en qué clase secundaria se asignó al elemento. Normalmente, debe definir un color de fondo para el H2, pero con este truco, utiliza el color de fondo del elemento contenedor como un fondo falso, por lo que ahorra tener que crear una clase solo para eso, y permite que el código resultante ser mucho más limpio Aquí hay un enlace JS Fiddle con bifurcación de lo que hice. ¡También funciona en IE8!

http://jsfiddle.net/Hsm35/

sólo quería compartir ya que esto me ayudó a mi solución.