Me gustaría tener un div que tiene este aspecto:texto en HTML CSS Frontera
Es esto posible hacerlo con HTML + CSS? También animaré este div con jQuery. Cuando el div está oculto, me gustaría que aparezcan el título y la línea superior.
Usted puede hacer algo como esto, donde se establece un negativo margin en el h1 (o lo que sea cabecera está utilizando)
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Nota: es necesario establecer un background, así como un width en el h1
Ejemplo: http://jsfiddle.net/ZgEMM/
EDITAR
para que funcione con ocultar la div, se podría utilizar un poco de jQuery como esto
$('a').click(function(){
var a = $('h1').detach();
$('div').hide();
$(a).prependTo('body');
});
(Usted tendrá que modificar ...)
Ejemplo # 2:http://jsfiddle.net/ZgEMM/4/
Es posible mediante el uso de la etiqueta de leyenda. Consulte http://www.w3schools.com/html5/tag_legend.asp
Sí, pero no es un div, es un CSS fieldset
<fieldset>
<legend>AAA</legend>
</fieldset>
:
fieldset {
border: 1px solid #000;
}
Puede hacer una solución alternativa ... Además, debería haberlo comentado y no publicarlo como una respuesta – JavierIEH
No veo por qué es una solución, para mí es una solución. ¿Qué diferencia funcional hace si es un div o un fieldset? – Bazzz
@ Bazzz- es una semántica incorrecta. "El elemento fieldset representa un conjunto de controles de formulario agrupados opcionalmente bajo un nombre común". - Especificación HTML5 ¿Dónde están los controles? Lo que realmente necesitamos es una configuración CSS 'display: fieldset'. Tristemente no hay uno. – Alohci
que sé un poco tarde a la fiesta, sin embargo siento que las respuestas podrían hacer con un poco más de investigación/entrada. He logrado crear la situación sin usar la etiqueta fieldset; eso está mal de todos modos, como si no estuviera en un formulario, entonces eso no es realmente lo que debería hacer.
En primer lugar mi CSS:
#info-block section {
border: 2px solid black;
}
.file-marker > div {
padding: 0 3px;
height: 100px;
margin-top: -0.8em;
}
.box-title {
background: white none repeat scroll 0 0;
display: inline-block;
padding: 0 2px;
}
Y ahora mi HTML:
<aside id="info-block">
<section class="file-marker">
<div>
<div class="box-title">
Audit Trail
</div>
<div class="box-contents">
<div id="audit-trail">
</div>
</div>
</div>
</section>
</aside>
Esto se puede ver en este golpe seco:
Lo que esto logra es el siguiente:
sin uso de conjuntos de campos.
uso mínimo si CSS crea efecto con solo algunos rellenos.
Uso del margen superior "em" para crear el título relativo de la fuente.
uso de la pantalla de bloque en línea para lograr ancho natural alrededor del texto.
De todos modos espero que eso ayude a los estilistas del futuro, nunca se sabe.
A pesar de ser un poco más complejo de lo que me gustaría, realmente me gusta esta respuesta porque no es otro hack de CSS o una mala práctica. +1 – goncalotomas
Puede usar una etiqueta fieldset.
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
</body>
</html>Comprobar este enlace: HTML Tag
No me gusta esta respuesta tiene muchas limitaciones: el margen superior está relacionado con el tamaño de la fuente de la h1, lo que si cambia el tamaño de la fuente más tarde, necesitarás actualizar todos los márgenes. fondo: el blanco impide que cualquier imagen de fondo sea visible a través del h1, se siente un poco inflexible. Solo tengo la sensación de que usar este enfoque es como abrirme para más problemas de estilo más adelante. solo mi pensamiento. – Bazzz
Me gusta esto. ¿Hay alguna manera de ocultar el borde lateral e inferior cuando el div interior está oculto? http://jsfiddle.net/ZgEMM/3/ –
Thx @AlexBliskovsky. Ver mi edición para la pieza oculta –