texto - parrafos en html ejemplos
Texto en HTML CSS de borde (5)
Es posible mediante el uso de la etiqueta de leyenda. Consulte http://www.w3schools.com/html5/tag_legend.asp
Me gustaría tener un div que se vea así:
¿Es esto posible 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.
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>
Mira este enlace: Etiqueta HTML
Sé que llegó un poco tarde a la fiesta, sin embargo, creo que las respuestas podrían mejorar con más investigación / aportes. He logrado crear la situación sin usar la etiqueta fieldset, eso está mal de todos modos, como si no estuviera en una forma, entonces eso no es realmente lo que debería estar haciendo.
/* Styles go here */
#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;
margin-left: 8em;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="index.js"></script>
</head>
<body>
<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>
</body>
</html>
Esto se puede ver en este plunk:
Lo que esto logra es lo siguiente:
sin uso de fieldsets.
uso mínimo si CSS crea efecto con solo algunos rellenos.
Uso de la parte superior del margen "em" para crear el título relativo de la fuente.
uso de display inline-block para lograr ancho natural alrededor del texto.
De todos modos, espero que eso ayude a los estilistas del futuro, nunca se sabe.
Sí, pero no es un div , es un fieldset
<fieldset>
<legend>AAA</legend>
</fieldset>
CSS:
fieldset {
border: 1px solid #000;
}
Puede hacer algo como esto, donde establece un margin negativo en h1 (o en cualquier encabezado que esté usando)
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Nota: debe establecer un background y un width en h1
Ejemplo: http://jsfiddle.net/ZgEMM/
EDITAR
Para que funcione con la ocultación del div , podrías usar jQuery como este
$(''a'').click(function(){
var a = $(''h1'').detach();
$(''div'').hide();
$(a).prependTo(''body'');
});
(Tendrá que modificar ...)
Ejemplo # 2: http://jsfiddle.net/ZgEMM/4/