Quiero crear un cuadro como este con el título:¿Qué etiqueta CSS crea un cuadro como este con título?
Puede alguno por favor hágamelo saber si hay una etiqueta CSS por defecto para hacer esto? ¿O necesito crear mi estilo personalizado?
Creo que está buscando la etiqueta HTML fieldset, que luego puede diseñar con CSS. Por ejemplo,
<fieldset style="border: 1px black solid">
<legend style="border: 1px black solid;margin-left: 1em; padding: 0.2em 0.8em ">title</legend>
Text within the box <br />
Etc
</fieldset>
Hasta donde yo sé (¡corríjanme si estoy equivocado!), No es así.
Te recomiendo que uses un div con un margen negativo-h1 adentro. Dependiendo de la estructura semántica de su documento, también podría usar un conjunto de campo (HTML) con una leyenda (HTML) dentro de la cual se ve así por defecto.
Gracias, sí que tienen razón! Estaba buscando la opción fieldset/legend. Gracias – Mozammel
de http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html
<form>
<fieldset>
<legend>Subscription info</legend>
<label for="name">Username:</label>
<input type="text" name="name" id="name" />
<br />
<label for="mail">E-mail:</label>
<input type="text" name="mail" id="mail" />
<br />
<label for="address">Address:</label>
<input type="text" name="address" id="address" size="40" />
</fieldset>
</form>
<style type="text/css">
fieldset { border:1px solid green }
legend {
padding: 0.2em 0.5em;
border:1px solid green;
color:green;
font-size:90%;
text-align:right;
}
</style>
Esto le dará lo que quiere
<head>
<title></title>
<style type="text/css">
legend {border:solid 1px;}
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<br /><br />
</fieldset>
</body>
Si no lo está utilizando en formas, y en lugar de querer usarlo en un no -forma editable, puede hacerlo a través del siguiente código:
<div class="title_box" id="bill_to">
<div id="title">Bill To</div>
<div id="content">
Stuff goes here.<br>
For example, a bill-to address
</div>
</div>
Y en el archivo CSS
.title_box {
border: #3c5a86 1px dotted;
}
.title_box #title {
position: relative;
top : -0.5em;
margin-left: 1em;
display: inline;
background-color: white;
}
.title_box #content {
}
Sólo probar este.
<fieldset class="fldset-class">
<legend class="legend-class">Your Personal Inormation</legend>
<table>
<tr>
<td><label>Name</label></td>
<td><input type='text' name='name'></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><input type='text' name='Address'></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type='text' name='City'></td>
</tr>
</table>
</fieldset>
creo que este ejemplo también puede ser útil para alguien:
.fldset-class
{
border: 1px solid #0099dd;
margin: 3pt;
border-top: 15px solid #0099dd
}
.legend-class
{
color: #0099dd;
}<fieldset class="fldset-class">
<legend class="legend-class">Your Personal Inormation</legend>
<table>
<tr>
<td><label>Name</label></td>
<td><input type='text' name='name'></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><input type='text' name='Address'></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type='text' name='City'></td>
</tr>
</table>
</fieldset>
debe copiar este código html exacto en su respuesta (además de su código fuente html ya está allí). Este código se interpretará y se mostrará en esta publicación, y eso mostraría que funciona exactamente como se anuncia. Todavía no puedo editar tu publicación para hacer eso ... – VonC
VonC, traté de hacerlo, pero eliminó todo mi HTML. Dejando solo mi texto. – Athena
Solo permite HTML literal básico, por lo que es probable que la etiqueta fieldset no esté permitida o algo así –