Enmarcar Texto, Códigos, o cualquier cosa con Fieldset y Legend


Para agrupar textos, códigos, o una serie de definiciones entres si, puedes utilizar la etiqueta "fieldset" para enmarcar cualquier cosa en un post.

Empecemos viendo los diferentes formatos y estilos  de "fieldset":

Fieldset básico, este se ensanchará al 100% de la anchura de la página, veamos el código y su ejemplo:

<fieldset>
Aquí el texto que quieres enmarcar
</fieldset>

Ejemplo:

Ejemplo de un fieldset básico

Fieldset básico con estilos, también podemos agregarle color y borde a un fieldset añadiendo la etiqueta style, el borde le podemos poner la achura en pixeles que veamos conveniente, veamos el código y su ejemplo:

<fieldset style="border: 1px solid #8A0808;">
Aquí el texto que quieres enmarcar
</fieldset>

Ejemplo:

Ejemplo de un fieldset básico con estilo


Fieldset dentro de una tabla, ahora le daremos una anchura predeterminada limitando su expanción, para ello añadiremos el código fieldset dentro de una tabla, le daremos una anchura del 60% y la alinearemos al cetro. Veamos el código y su ejemplo:

<table width="60%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<fieldset>
Aquí el texto que quieres enmarcar
</fieldset>
</td>
</tr>
</table>

Ejemplo:

Ejemplo de un fieldset dentro de una tabla

Fieldset dentro de una tabla con estilos, como vimos en el anterior ejemplo también añadiremos la etiqueta style, para añadirle borde y color, el borde le podemos poner a la anchura de pixeles que veamos conveniente, veamos el código y su ejemplo:

<table width="60%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<fieldset style="border: 1px solid #088A85;">
Aquí el texto que quieres enmarcar
</fieldset>
</td>
</tr>
</table>

Ejemplo:


fieldset dentro de una tabla con estilo

Fieldset y Legend, por último agregaremos la etiqueta "legend"dentro de fieldset para titular un campo, que este incluido dentro de legend. También podemos alinear dicho título donde queramos utilizando el parametro "align" en este ejemplo veremos un fieldset alineado al centro:

<fieldset>
<legend align= "center">legend alineado al centro</legend>
Aquí el texto que quieres enmarcar
</fieldset>

Ejemplo:


legend alineado al centro
fieldset y legend alineado al centro

Para alinearlo a la izquierda cambia donde dice "center" por "left" y para la alinearlo a la derecha cambia "center" por "right". Puedes darle estilo cambiando <fieldset> por <fieldset style="border: 1px solid #8A0808;">.

5 comentarios:

Nadie el 13 de junio de 2010, 15:53 dijo...

Estupendo me ha servido de mucho. Gracias

Administrador el 15 de junio de 2010, 12:26 dijo...

Hola Nadie, me alegra que te ha servido.

Un saludo!

Daniel dijo...

gracias gracias gracias no te imaginas cuanto me sirvio =DDDDDDDDDDDDDD

Administrador el 26 de noviembre de 2010, 10:00 dijo...

Daniel, gracias a ti por dejar tu comentario y agradecer por lo útil que te has sido el post.

Jxandergaray el 31 de agosto de 2011, 20:45 dijo...

tengo una dudo sobre estas etiquetas el problema surgio con la actualizacion de interfaz de blogger ya que yo ocupo demasiado estas etiquetas

lo malo que ahora el legend no me sale en la linea del fieldset si no que me sale como otro fieldset dentro del fieldset mayor

no se si habra una solucion, estare pendient y espero puedas ayudarme :(

Quieres Comentar

Todos los comentarios están siendo leídos y moderados.

- Todos los comentarios deben ser relacionados con el artículo
- Serán borrados aquello comentarios que sean considerado SPAM
- Si quieren pedir ayuda,que no tenga nada que ver con el post, utilicen la página de Contacto
- Los comentarios serán publicados a la brevedad mínima posible

¿NO PUEDES COMENTAR?

¡Si no puedes ver la caja donde tienes que poner la palabras de verificación, has clic en donde dice "Verificación de palabras" y te saldrá la cajita donde tienes que ingresar la palabra!

NO TE OLVIDES DE RECOMENDAR PAZOSBLOGGER.COM A TUS AMIGOS

viernes, 29 de enero de 2010

 

Ayuda para blog - Pazos Blogger Copyright 2010 | Template por:Brian Gardner | A Blogger por: Bloganol | Modificado y Diseñado por:Eduardo Sanguino