para - etiquetas html
¿Qué etiqueta CSS crea un cuadro como este con título? (7)
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>
Quiero crear un cuadro como este con título:
¿Puede alguien decirme si hay una etiqueta CSS predeterminada para hacer esto? ¿O necesito crear mi estilo personalizado?
Esto te dará lo que quieres
<head>
<title></title>
<style type="text/css">
legend {border:solid 1px;}
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<br /><br />
</fieldset>
</body>
Hasta donde yo sé (¡corríjanme si estoy equivocado!), No lo es.
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.
Si no lo está utilizando en los formularios, y en su lugar desea utilizarlo en una forma no 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 {
}
Solo prueba esto.
<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>
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>
Creo que está buscando la etiqueta HTML fieldset , que luego puede fieldset con CSS. P.ej,
<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>