Usando la etiqueta Fieldset y Legend

10 de julio de 2011 124 comentarios ,
La etiqueta FIELDSET originalmente está diseñada para agrupar elementos dentro de un formulario, de esta forma varios INPUT se pueden organizar dentro de un campo de un formulario. Por ejemplo este código:
<form>
<fieldset>
<legend>Datos personales:</legend>
Nombre: <input type="text" size="30" /><br />
Dirección: <input type="text" size="30" /><br />
Teléfono: <input type="text" size="30" />
</fieldset>
</form>
Se convierte en esto:

Datos personales:
Nombre:
Dirección:
Teléfono:

Pero no, no haremos formularios pues para ello necesitaríamos un servidor y algo de PHP para enviar y almacenar los datos. Pero sí podemos darle otro uso a la etiqueta FIELDSET, por ejemplo, para destacar un texto, mostrar una descripción, o incluso para poner los ingredientes de una receta. Por ejemplo:

Ingredientes
- 1 cebolla grande (unos 300g)
- chiles serranos u otro al gusto, o guindillas
- 750 g de tomates rojos sin piel en cubitos
- 12 tiras de tocino ahumado (panceta, beicon)
- 1 kg de filete de res (lomo bovino), cortado en trozos de 5 cm x 1 cm)
- sal y pimienta
- aceite
* Ingredientes tomados de la receta Puntas de filete a la norteña [Gabriela, clavo y canela 2011]

El código que hemos usado es este:
<fieldset>
<legend>Título</legend>
... Aquí va el texto ...
</fieldset>

Organizado pero muy simple ¿verdad? No hay problema, se puede personalizar un poco.

SíntesisLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat, nisl sed aliquet pretium, justo velit pellentesque arcu, non eleifend magna sem quis odio. Nulla sapien lacus, rutrum vitae vehicula eget, interdum sed dolor. Quisque condimentum fermentum lorem eget commodo. Vestibulum in sem pellentesque mi auctor posuere non id elit. Curabitur lacus arcu, cursus at lobortis a, adipiscing sed ligula.

Ahí, el código que usamos es este:
<fieldset style="border:6px groove #ccc; background:#F8ECE0;">
<legend style="font-weight:bold; color:#61380B;">Título</legend>
... Aquí va el texto ...
</fieldset>

Los primeros estilos en negrita son para el contenedor general, ahí le hemos puesto un borde de 6px y un color de fondo. Los segundos estilos en negrita corresponden al título del campo.
Pero sería muy tedioso tener que escribir los estilos siempre que lo vayamos a usar, así que podemos definir esos estilos directo en la plantilla.
Para ello entramos en Diseño | Edición de HTML y antes de ]]></b:skin> pegamos lo siguiente:
fieldset {
border:6px groove #ccc; /* Borde */
background:#F8ECE0; /* Color de fondo */
color:#000; /* Color del texto de todo el contenido */
}
legend {
text-align:left; /* Puedes cambiarlo por center o right */
font-weight:bold; /* Estilo de la fuente del título */
color:#61380B; /* Color del título */
}
Eso hará que todos los fieldset que uses tengan ese diseño que has elegido.
Son estilos muy básicos, pero se pueden agregar otros tantos. Recuerda que fieldset es el contenedor, y legend el título de ese contenedor.



Jugando un poco con los estilos y aplicando CSS3 podemos obtener resultados aun más llamativos:

AVISO
Si usas un navegador moderno podrás ver este aviso con efectos de sombra y bordes redondeados.
Recuerda que si te suscribes a nuestro feed podrás enterarte de este y otros temas para que apliques en tu blog.
También puedes seguirnos en Twitter y Facebook para tener información extra que tal vez no verás por acá.


[+/-] Ver código


124 comentarios en:

" Usando la etiqueta Fieldset y Legend "

  1. Me gusta el ultimo que colocaste se be super bien.

    ResponderEliminar
  2. Excelente Potro! una vez mas gracias por tus aportes,

    ESCRIBAN #PUEDOVER
    ESCRIBAN #PUEDOVER
    ESCRIBAN #PUEDOVER
    ESCRIBAN #PUEDOVER
    ESCRIBAN #PUEDOVER
    ESCRIBAN #PUEDOVER

    si pudiste ver el anuncio ^^

    ResponderEliminar
  3. Potroo hola buenas noches disculpa

    oye man no svaes por que noo puedoo poner el favicon

    directamente de editar platilla ( de la nueva forma que puso blooger que solo seleccionas la imagen de tu PC) y ya...

    no lo agaraa la subo y todo, y después borro el código que avía puesto yo del favicon
    pero no aperase el que suvi directamente a blogger

    saves por que carnal??
    es aqui: http://griffinskato.blogspot.com/

    pero lo raro es que en my otro blog lo hice asi

    http://tikidriver.blogspot.com/

    borre el favicon que avia puesto yo
    y solo suvi uno directamente en editar platilla con la función nueva de bloger y lo agarro rete bien sin problema alguna..

    y la verdad quiero ponerlo asi por que de esa maneara quita por completo el favicon de bloger
    ya nunca sale ni cuando se carga el blog..

    por que sera por las METAS o que??? seraa


    te encargo man saludos!

    ResponderEliminar
  4. Muchas gracias casi nadie habla de campos

    ResponderEliminar
  5. Potro ya usaba esto, pero no sabía lo de efectos! buen dato!

    ResponderEliminar
  6. Buenos días Potro, este truco es genial, gracias por enseñarnoslo ;-)

    ResponderEliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. WOOW! Man eres grande, potro una consulta, tienes algun Tutorial para hacer un menu oculto como el de esta apagina: http://ols.uas.mx/a/

    ResponderEliminar
  9. Muajaja, que chulo, la verdad es que ni por la cabeza se me pasó usar adornitos de estos para las entradas. Quizás porque soy más de adornar con potocho xD

    un saludo

    ResponderEliminar
  10. Oscar, a mí igual :)

    TutoGeek, jajaja, te pasaste con ese hashtag!

    Griffinskato, a veces hay que eliminar cookies, caché e historial para poder verlo. Cualquier otra duda sobre ese tema lo vemos en esa entrada para no desviarnos del hilo de este post.

    ResponderEliminar
  11. Jam, Adolfo Alvarez, gracias por comentar.

    David, no te preocupes, a veces... yo tampoco.

    Franco Paravecino, he visto que muchos lo usan pero pocos le ponen estilos, y tanto que se puede hacer :)

    ResponderEliminar
  12. MaGoS RaDioMuSiC, gracias a ti por pasar :)

    pixeltuxpan.com, como ese no, pero hay un menú deslizante que el contenido permanece oculto mientras no se dé click.

    nenna, aunque el fin original no es adornar, la verdad es que queda muy bien para hacer mensajes o resaltar textos :)

    ResponderEliminar
  13. Excelentes ideas y opciones que siempre estás dispuesto a compartir. Gracias!!

    ResponderEliminar
  14. Exelente proto me gusto esto buenisima :)

    ResponderEliminar
  15. amigo potro es la primera ves que visito tu pag muy buena!!!
    !tengo una duda nada que ver con el tema!
    lo que pasa que agrege un boton de me gusta (facebook) ala plantilla de mi blog pero queda un espacio como la puedo eliminar ese espacio?
    blog: http://fileswarez.blogspot.com/

    ResponderEliminar
  16. amigo grasias acabo de ver un post que isistes sobre este tema y me ayudo mucho!
    grasias viejo......te ganastes otro miembro en tu pag!

    ResponderEliminar
  17. Qué gusto que ya lo hayas solucionado Hector, y bienvenido a Ciudad Blogger!

    ResponderEliminar
  18. Hola! Ya sé que no tiene nada que ver con el post, pero tengo una consulta, si me pudieras ayudar, te lo agradecería.

    Este es mi blog: http://elpesodelmundoh.blogspot.com/

    Le cambié la imagen de fondo por una con un color más claro, pero como ves, hay un sombreado que rodea las entradas y queda fea.

    ¿Podrías decirme el código HTML que necesito para cambiar el color, si no es mucha molestia?

    Saludinos!

    ResponderEliminar
  19. Muy bueno, no conocía la etiqueta FIELDSET jeje...
    Potro el cuadro de Seguidores paso a llamarse Miembros hoy, y el botón Seguir se llama Participar en este sitio, no tenes idea si hay forma de cambiar el texto? Porque en mi blog queda mal ahora eso :S observa:
    www.planeta-grandt.com.ar

    ResponderEliminar
  20. Quedo Satisfecho sin duda, hace 15 dias estaba buscando crear esto!!! Encontre un cuadro feisimo en otra web y me toco ponerlo en mi blog, ahora haces todo mas facil amigo potro!... Aunque me pusiste a sufrir 15 dias con el otro cuadro que encontré por ahi... pero a usted lo perdono jejejeje!...

    Gracias Amigo Potro!..

    ResponderEliminar
  21. HOLA POTRO ESTA PREGUNTA NO TIENE NADA QUE VER CON ESTA PUBLICACION PERO NO SE COMO COMUNICARME CONTIGO MIRA MI DUDA ES COMO SE HACEN ESTE TIPO DE TABLAS COMO LA DE AQUI http://empiresandallies.wikia.com/wiki/Military QUE AL CAMBIAR DE PESTAÑA MUESTRA OTROS DATOS Y OTRA PESTAÑA MUESTRA OTROS Y ASI ESPERO Y ME DE A ENTENDER DE ANTEMANO MUCHAS GRACIAS Y ESPERO TU RESPUESTA

    ResponderEliminar
  22. **Ryuutsuki Asperger サ 竜, entré al blog pero no vi el sombreado que mencionas, sólo el borde azul, supongo que ya lo has resuelto. Saludos.

    Pozo+10™, si has instalado el gadget desde Google Friend Connect ese es el texto que maneja y no es modificable. Si es el mismo gadget que proporciona Blogger podría ser un cambio que están haciendo ellos.

    ResponderEliminar
  23. Circulo W.H., gracias por la indulgencia :)

    TH3 V1P3R, el enlace que te ha dado Pozo+10™ es la información que buscas. Saludos.

    ResponderEliminar
  24. Nono, no lo solucioné. El sombreado que digo es el recuadro con transparencia oscura que deja ver el fondo, pero que es muy oscuro y no queda bien. Encuadra al header, el menú, las entradas, la columna de gadgets y el footer.

    ResponderEliminar
  25. Gracais por el dato potro yo los uso hace un tiempo y manejo esto:
    Imagen1
    y el resultado es est:
    Imagen2
    claro que cuandro creo la entrada lo enlaso con un id pero = me funciona ahora si quiero cambiar el diseño de este solo lo edito en la plantilla. = vale gracias.

    Espero que les guste. bye

    ResponderEliminar
  26. **Ryuutsuki Asperger サ 竜,

    Ese es el color de fondo, si lo eliminas no se podrá leer bien el contenido de las entradas y gadgets.
    Pero si deseas hacerlo sólo busca esta parte y elimina lo que está en negrita:

    .content-outer {
    background: $(content.background);

    ResponderEliminar
  27. bU, me gustó el diseño que has usado :)

    ResponderEliminar
  28. Gracias maestro, como siempre todo perfecto.

    Un abrazo

    ResponderEliminar
  29. potro muy buen aporto tu como siempre...si alguien quiere compartir enlaces esta es mi web www.televisiononline2011.blogspot.com mi correo facetv2011@hotmail.com

    ResponderEliminar
  30. Muchas gracias! Hice lo que me dijiste y me salió bien.

    ResponderEliminar
  31. Hola, Potro: he entendido el tema de agregar el código al HTML (vamos, a la plantilla). Pero lo que no entiendo es cuándo exactamente en una entrada que yo redacte se aplica ese formato. ¿Cuándo se activa? ¿Qué acción tengo que realizar para que una determinada parte de mi post quede con ese estilo y no otra???

    ResponderEliminar
  32. Para poner el ultimo en la plantilla.... como seria?

    Saludos

    ResponderEliminar
  33. potro tenia una duda, sabes como poner un menulat, creo que asi se llama, es que queria hacer algo que mientras yo baje el scroll el chat o menu tambien baje, le seria de mucha ayuda a muchas personas y a mi tambien :) pero no se como hacerlo u.u asi que si tu sabes dime porfavor te lo agradezco :)

    ResponderEliminar
  34. Ta ueno POTRO,ya sabia pa k servia el fiel,pero no lo implem,ento!! Chido

    ResponderEliminar
  35. No sin MyMakeUp, si lo agregas directo en la plantilla se activa en forma automática, no es necesario hacer nada más, sólo escribes tu código en la entrada:
    <fieldset>
    <legend>Título</legend>
    ... Aquí va el texto ...
    </fieldset>

    En el caso del último ejemplo (el de las sombras y bordes), tienes que poner en la entrada la primera parte del código, y la otra parte es la que va en la plantilla.

    ResponderEliminar
  36. Muchas gracias Pozo +10 y Potro por su contestación ahora bien tengo una pregunta que no se ni que significa para que me sirve Favicon en mi blogger?

    ResponderEliminar
  37. GuillermoVM , la primera parte que está entre las etiquetas <fieldset> y </fieldset> va en la entrada, ese es el código que usarías siempre para tus entradas, y la otra parte del código es el que va directo en la plantilla.

    ResponderEliminar
  38. Sirius, una forma de hacerlo es que el código del chat o lo que quieras lo encierres entre:
    <div style='position:fixed; bottom:0; right:0;'>
    y
    </div>

    Eso hará que dicho gadget se quede flotante así que si se baja el scroll el gadget permanecerá ahí visible.
    Otra opción en caso de que lo que quieras hacer flotante no sea un código muy complicado es el método de esta entrada:

    http://ciudadblogger.com/2010/03/anuncio-flotante-que-baja-con-la-pagina.html

    ResponderEliminar
  39. Microboy90, gracias por pasar!

    TH3 V1P3R, mira esta entrada, ahí se explica para qué sirve:
    http://ciudadblogger.com/2009/02/como-poner-un-favicon-en-blogger.html

    ResponderEliminar
  40. Hola Potro.
    Quisiera sber cómo puedo hacer para tener una portada como este blog.

    http://mundosmovies.blogspot.com/

    Lo que quisiera hacer es poder poner sólo las carátulas en la portada como está ahí.
    Tengo un blog de series y no puedo poner muchas porque los banners ocupan mucho espacio.

    Este es mi blog
    http://seriesvirtuales.blogspot.com/

    Gracias y espero tu respuesta como siempre, porque sos el mejor.

    Saludos

    ResponderEliminar
  41. muchas gracias potro era justo lo que nesecitaba, eres un capo :) solo tuve que ponerle el top y cambiarle la posicion y me quedo el chat como lo queria mira http://bloggesor.blogspot.com/ gracias neuvamente :)

    ResponderEliminar
  42. Lolilu, puedes hacer una plantilla tipo magazine 3 como la que usan, pero omitiendo la opción de Shadowbox y sin ocultar los títulos de las entradas. ¡Gracias por tu comentario!

    Sirius, excelente!

    ResponderEliminar
  43. Oops , creo que no me di a entender, disculpa...

    Lo que quería saber es como agrego el código con CSS3 en la plantilla (La del Aviso). Me marca un error dice que la etiqueta "fieldset" no esta cerrada.

    Mi idea es ponerla para poder poner un anuncio para los comentarios, antes tenia una imagen pero mi teoría es que usando CCS3 no hago tan pesada la carga al no cargar las imagenes... se donde poner el código en la plantilla, pero no se como arreglar ese asunto.

    ResponderEliminar
  44. A eso me refería, para poner el último ejemplo del anuncio (azul) pon antes de ]]></b:skin> esto:

    .fieldset {
    width:500px;
    border:4px double #0080FF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 8px 8px 6px #808080;
    -moz-box-shadow: 8px 8px 6px #808080;
    box-shadow: 8px 8px 6px #808080;
    background-color: #CEECF5;
    padding: 10px;
    font-family: Verdana, Geneva, sans-serif;
    color: #0B173B;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    }
    .legend {
    text-align:center;
    font-weight:bold;
    font-size:18pt;
    color:#B4045F;
    text-shadow: 0px 0px 10px #BA55D3;
    }

    Luego, en las entradas, o donde vayas a utilizarlo pon este código:


    <fieldset>
    <legend>Título</legend>
    ... Aquí va el texto ...
    </fieldset>

    ResponderEliminar
  45. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  46. Mis querdidos amigos como siempre casi nunca nada me funciona en IE, no se porque, todo se ve hermoso en Chrome, y funcionan de lo lindo. Hice todo tal cual y en IE no sale bien, sale cortado.
    ¿que debo hacer?

    ResponderEliminar
  47. En Internet Explorer el último ejemplo sólo se debe ver medio bien si usas la última versión IE9 que es la única versión que soporta HTML5 y CSS3, en versiones anteriores no se verán dichos efectos. Es por eso que se menciona que sólo se verá bien en navegadores modernos.

    ResponderEliminar
  48. Como hago para que el Aviso en azul aparesca en todas mis entradas del Blog??? abrazo

    ResponderEliminar
  49. LaGrapadora, gracias!

    Renzo Pudiza, justo en el comentario #48 acabo de explicar ese detalle ;)

    ResponderEliminar
  50. si pero me queda el aviso pero no con elfondo celeste como esta ahi no se que sera pero ta jajaj igual me sirve asi saludos y gracias

    ResponderEliminar
  51. Ese código es exactamente el mismo que he usado en el ejemplo.

    ResponderEliminar
  52. HOla Potro aqui de nuevo con preguntas oye disculpa tu sabes is hay algun error aqui https://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fcityvilleextremereloads.blogspot.com yo no se mucho de eso pero me marca advertencias

    ResponderEliminar
  53. Quizá necesites agregar metatags para Facebook:
    http://vagabundia.blogspot.com/2010/12/el-protocolo-open-graph-en-blogger.html

    ResponderEliminar
  54. Me ha gustado mucho la idea, si la pongo en Configuración- Plantilla de entrada ¿funcionará bien? es que me pierdo un poco con lo que dices:

    Para ello entramos en Diseño | Edición de HTML y antes de ]]>

    Vamos que entiendo como hacerlo pero ¿Como decides insertar un field después de ponerlo?

    Bueno gracias de antemano, pesadica que estoy hoy.

    ResponderEliminar
  55. Hola Raquel,

    La primera parte sí es como dices, pegas ese código en Diseño | Edición de HTML.
    Luego, cuando quieras que el fielset aparezca pones el otro código en la entrada donde quieras mostrarlo.
    Si es algo que usarás en todas tus entradas entonces sí conviene que lo pongas en Configuración | Plantilla de entrada, para que aparezca automáticamente en todas tus entradas nuevas.

    Saludos!

    ResponderEliminar
  56. hola potro me encanto esta idea, se me ocurrio hacer algo para poner wallpapers en mi blog. te dejo una idea de lo que tengo ganas de hacer haber si es posible y obvio cuando tengas un poco de tiempo me haces el código =)

    http://dl.dropbox.com/u/14805508/Sin%20t%C3%ADtulo.png

    Explicacion XD: donde dice "imagen" seria como una vista previa del wallpaper y donde dice "texto o link" tenia ganas de poner las dimensiones posibles de los wallpapers. espero respuesta

    Gracias como siempre por publicar cosas copadas! XD

    ResponderEliminar
  57. disculpa ya lo logre solito no te molestes.. gracias = =)

    ResponderEliminar
  58. Qué bueno que ya lo has conseguido :)

    ResponderEliminar
  59. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  60. Hola amigo primero que todo tu blogger es super bueno tus post me an ayudado un buen, son claros y fasiles de llevar acabo. Te quisiera hacer una peticion hoy mire en tu blogger un cuadro de aviso en el cual menciona que te irias de vacaciones y ese cuadro permite cerrarlo. Si no fuera molestia me podrias compartir los codigos? y que ese cuadro se abriera dando click a alguna imagen, si no es posible haciendo click sobre una imagen te agradeseria infinitamente si me lo pudiera compartir auque sea asi. Gracias por tus aportes.

    ResponderEliminar
  61. Hola Musical Dorado,

    El código de ese anuncio es el mismo que este:
    http://ciudadblogger.com/2009/09/mensaje-tipo-post-it-para-el-blog.html

    Lo único diferente es la apariencia del mensaje, pero todo lo demás es lo mismo.
    Saludos.

    ResponderEliminar
  62. buenas noche El Potro hace mucho sigo tu blog y pues ahora resulta que me tope con una gran piedra con mi blogger, resulta que hace poco blogger hiso una actualizacion de interfaz incluyendo cambio en casi todo, anteriormente mis post los hacia mas que todo en opcion html me gusta trabajar asi, pero ahora resulta que le di a Probar la interfaz actualizada de Blogger y me cambio la interfaz y otras cosas, pero ahora que quiero hacer los post yo uso mucho las etiquetas fieldset y legend y aqui te dejo un ejemplo de mi pagina para q veas como las utiliso yo

    http://www.themovieworld.net/2011/09/thor-dvdrip-2011.html

    pero con la interfaz actualizada de blogger posteo igual pero resulta que mis fieldset y legend se desubican aqui te muestro el ejemplo de como se me desordenan

    http://img845.imageshack.us/img845/2190/20110922191144.png

    Espero puedas ayudarme a poner los fieldset y legent como los tengo en todos mis post con la interfaz actualizada de blogger

    muchas gracias :)

    ResponderEliminar
  63. Vuelvo de nuevo a dar la paliza... como ya te comenté quiero introducirlo en todas las entradas y lo he colocado en Configuración | Plantilla de entrada, para que aparezca automáticamente pero ayer publiqué y lo veo muy bien con Mochila Firefox pero aparece descuadrado con Internet Explorer ¿? ando un poco perdida... en el texto de las suscripciones por correo aparece descuadrado como en explorer.
    Si se te ocurre algo te lo agradeceré... saludicos :)
    http://tratadecocinar.blogspot.com/2011/09/bizcocho-de-moras.html

    ResponderEliminar
  64. Hola Jxandergaray,

    Independientemente de la interfaz, recuerda que cuando se usan códigos en las entradas deben hacerse estando en la pestaña 'HTML' y no en la de 'Redactar', esto es para que los códigos no pierdan su forma.
    Hazlo de esa forma, si al publicarlo se muestra mal entonces dame la URL de la entrada donde te salió mal para ver el código fuente de la entrada y entender qué puede estar saliendo mal.

    Saludos.

    ResponderEliminar
  65. Hola Raquel,

    Si te fijas en los códigos de tu entrada, verás que la etiqueta LEGEND la tienes al final de la información, y debe ir al inicio. Quizá por eso en ese navegador no se ve como debería. Pon primero la etiqueta LEGEND y luego lo demás, tal como se muestra en esta entrada.

    Saludos.

    ResponderEliminar
  66. hola El Potro efectivamente como tu me dijistes, cambie a la nueva interfaz e hice un post de prueba de esa manera solo en opcion HTML, puesto a que yo cuando hago un post trabajo en las 2 formas en redactar y en HTML y probe trabajando en HTML pero cuando paso a redactar es donde se desforma asi que creo q tendre q trabajar solo en HTML jejejeej

    muchas gracias por tu ayuda
    y dejame felicitarte por este excelente blog

    saludos!!!

    ResponderEliminar
  67. Gracias Jxandergaray, qué bueno que ya está resuelto :)

    ResponderEliminar
  68. Hola de nuevo potro
    hice las modificaciones al fieldset, pero me gustaria tener mas opciones de letra en el HTML o en la plantilla misma agregarles. Como puedo agregar mas fuentes?

    ResponderEliminar
  69. Eso lo determinas en el área donde quieras aplicar el tipo de letra. Por ejemplo, si es un contenedor (DIV) llamado 'menu' entonces le pondrías en los estilos la propiedad de la fuente:

    #menu {
    font-family: Arial;
    }

    ResponderEliminar
  70. Hola Potro! Oye y como pones el 'campo' tipo como el que usas cada vez que pones un codigo HTML?
    Saludos!
    PD: Muy bueno el aporte!

    ResponderEliminar
  71. Hola Potro pues fifate que tengo un blog pero el problema que tengo es que al poner la etiqueta fieldset en el post a la hora de publicar no aparece, entonces coloque el codigo que dejaste para colocarlo en el html en la plantilla, pero la mia esta en la plataforma wordpress, entonces ya se mira pero el problema es que cuando hago el post las letras estan pegadas al fieldeset osea no tiene un espacio de separado del fieldset me imagino que es en el html... espero me ayudes gracias :)

    ResponderEliminar
  72. perdona mi blog es http://warezfulldescargas.org/

    espero me ayudes gracias... feliz dia :)

    ResponderEliminar
  73. Hola Kevinsk8,

    Lo que sucede es que la plantilla tiene estilos predefinidos para esas etiquetas, en esos estilos han dicho que el fieldset y legend no tenga margen ni separación.
    Para arreglarlo edita el archivo CSS y busca esta parte:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {

    Elimina lo que está en negrita y listo.
    Saludos.

    ResponderEliminar
  74. Hola potro he buscado lo que me has dicho pero no me aparece, entonces he borrado el codigo del que te habia comentado entonces cuando lo borre en los post ya no me aparecen.. pero osea ya publicado cuando hago el post si aparece pero ya publicado no.. que es lo que tendria que agregar para que aparesca...

    espero tu respuesta gracias...

    ResponderEliminar
  75. El código que te he mencionado se encuentra dentro de tu archivo reset.css

    ResponderEliminar
  76. Gracias nuevamente Potro.
    Me vino perfecto para personalizar los créditos del blog y conseguí añadirle una imagen de fondo.
    Saludos e infinitas gracias por facilitarnos las cosas. ;-)

    ResponderEliminar
  77. Hola, Potro.

    Siempre pendiente de tu blog, pero ahora me vengo con una serie de preguntas en diferentes entradas, así que tenme paciencia, jejeje.

    Si yo me creyera un tipo astuto y dijera que sé cómo colocar el PHP y los códigos correspondientes en cada sitio, ¿podría, con los cuadros de texto que pusiste comenzando esta entrada, modificar el formulario de comentarios de mi blog a mi gusto?

    No creo que intente algo si tu respuesta es sí. Somos aprendices, jejeje.

    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Alfonso,

      Pues en lenguaje PHP ambos somos aprendices, sino es que quizá tú me tengas que enseñar, jaja. Pero, la cuestión de formularios siempre es modificable, así que supongo que sí se podría, pero como te digo, de PHP sé muy poco, por no decir, nada :P

      Eliminar
  78. justo lo que quria gracias tu vale oro

    ResponderEliminar
  79. como hago que las letras se vean mas grandes

    ResponderEliminar
    Respuestas
    1. Sólo añade en los estilos como se menciona en la entrada, el que corresponde al tamaño del texto:
      font-size:18px;

      Eliminar
  80. Hola Potro paso a comentarte por esta entrada =D.
    Te consulto por aqui pero no se si esta relacionado con esta forma.
    Es posible definir los estilos de algunos botones en css, luego en cada post poner solo las urls cada una referida a un boton distinto, para que luego sea posible con eliminar solo el css o X parte del html y que ese boton desaparezca de todas las entradas, es posible? je
    Que estes bien

    ResponderEliminar
    Respuestas
    1. No entiendo bien Martin, pero a ver si es así lo que dices. Puedes poner estilos CSS para crear botones, por ejemplo, pones en el CSS:
      .botones {
      ...aquí los estilos...
      }


      Y luego en el HTML (o entrada) creas un DIV para tus botones.
      <div class='botones'>Texto del botón</div>

      Si luego ya no quieres que esos botones aparezcan entonces en el CSS agregas la propiedad display:none; así:

      .botones {
      display:none;
      }


      Con eso los botones dejarán de verse.

      Eliminar
    2. exactamente a ello me referia potro! y no ser visibles incluye que si otro le seguia sustituira su lugar? y en vez de un texti pude hacerse solo referencia solo a la url?

      Eliminar
    3. Lo que pongas dentro del botón es indiferente, el funcionamiento es igual. Y sí, si le pones el display:none; el siguiente elemento debe ocupar su lugar.

      Eliminar
  81. Hola, Potro, muchas gracias por esta entrada.
    Vengo hasta aquí desde esta otra de tu blog "Seo para las imágenes en un blog", ésta:

    http://ciudadblogger.com/2012/03/seo-en-las-imagenes-del-blog.html

    Me gustaría integrar en cada entrada por defecto un recuadrito donde pudiera escribir cierto texto, o simplemente palabras a claves alusivas a las fotografías que voy haciendo y subiendo en el blog. ¿es eso posible sin que interfiera en la edición normal de la entrada, es decir, lo que yo hago, subir la foto y ya está ( y en caso de que pudiera integrar ese recuadro escribir en él lo que fuera? ¿o es mucho pedir?
    He estado leyendo todo el post y atisbo nociones para integrarlo en la plantilla, pero imposible de saber qué hacer para mis escasos conocimientos sobre esto.
    Si es muy complicado, no te molestes por favor, siempre puedo poner las palabras claves (digamos que mi idea es dar detalles "prosaicos" sobre la fotografía, pero que sé son palabras pueden ayudar a esa Seo) en texto normal. Es por la idea de destacarlo más, separarlo más de la forma mía de fotografiar. Porque el nombre del archivo por ejemplo no debo cambiarlo (me sirve de identificador en mis propios archivos).
    Ahora ya no sé si hacerte la consulta aquí o en la otra, discúlpame y agradecida te quedo en cualquier caso.
    Un beso, y buena mañana, :)

    ResponderEliminar
    Respuestas
    1. Hola Sofía, lo que me parece que podrías hacer es poner un pié de foto, en el que agregues debajo de la foto una breve descripción de la fotografía. O bien, usa esto de los FiELDSET y LEGEND para que pongas algo más ordenado, ahí podrías incluir debajo de la foto esos datos, como: categorías, título de la foto, lugar donde fue tomada, y hasta datos técnicos propios de la fotografía si te apetece.
      En ambos casos se tendría que agregar directo en las entradas, no en la plantilla del blog. Si te decides por la segunda opción puedes poner en la configuración del blog (Configuración > Formato >Plantilla de entrada) el código de ejemplo, así cada vez que crees una nueva entrada ya estará ese código ahí y no tendrás que estarte liando copiándolo siempre que escribas una entrada.

      Besos.

      Eliminar
    2. Qué maravilla, Potro, cuántas posibilidades me das bien explicadas. Muchísimas gracias por molestarte por tanto.
      Pienso: si añado lo del pie de foto, que creo es lo más sencillo y factible para mí y casi lógico ya que lo incluye blogger, ¿servirían las palabras que incluyera ahí para "influir" en los motores de búsqueda igual que eso de añadir texto que comentabas en esa entrada de Seo en las imágenes? porque si sí, podemos ahorrarnos todo lo demás..¿no?.. te pregunto, y disculpa por mi insistencia, por favor.
      Un beso

      Eliminar
    3. Claro que sirve, es un texto normal de la entrada, lo único diferente es que éste se acomoda debajo de las fotos, pero funciona igual de bien para el posicionamiento ;)
      Un beso.

      Eliminar
    4. Ea, :), pues ya he empezado a usarlo. Me va a venir muy bien para registrar datos además porque el blog me sirve de "meta-archivo" a veces para localizar en mis propios archivos más fácilmente.
      Te estoy profundamente agradecida, como siempre, pero hoy aún poquito más
      (por cierto, ¡es verdad!, acaban de añadir la posibilidad de incluir lo de Title y Alt, :DD..eso es que te han leído, ¡seguro!
      Un beso enorme

      Eliminar
    5. (corrección de errata anterior): he querido decir "hoy aún un poquito más...¡o un mucho más!...:)
      Otro beso, más grande aún.

      Eliminar
    6. Siendo así aprovecharé para decirles a los de Blogger una que otra cosita que siempre he querido decirles ¬¬ jajaja
      Gracias por el beso :)

      Eliminar
  82. Queremos preguntarte algo,

    en el Fieldset, ¿se puede poner de fondo una imagen?

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. A cualquiera de los dos, sólo ponle esto en los estilos:
      background: url(URL de la imagen);

      Saludos.

      Eliminar
  83. Hola, nuevamente yo molestando... quería saber como poner un código para que me quede así mira la imagen ta explicado gráficamente..

    http://dl.dropbox.com/u/14805508/Sin%20t%C3%ADtulo.jpg

    ResponderEliminar
    Respuestas
    1. Hola TATO, pon los códigos uno seguido del otro, sin dar saltos de línea (ENTER), eso deberá ponerlo horizontal.

      Eliminar
    2. nop..queda uno abajo del otro.. los achique.. pensé que el problema era que sencillamente no entraban.. pero nop...no puedo ponerlos uno al lado del otro.. alguna otra idea? o alguna idea para presentar imágenes dentro de una pagina de blogger.. que no sea un slider.. la idea es poner wallpapers..

      Eliminar
    3. Prueba entonces con una tabla HTML, así en una celda pones uno y en la de junto otra:
      http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html

      Eliminar
  84. Otro post que me ayudó, para no modificar cosas que no entiendo y me llevan mucho tiempo, y al final tengo que ir a varios blogs para terminar encontrando lo que busco. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Qué gusto que aquí encuentres lo que buscas Fermín.

      Eliminar
  85. disculpa si este comentario esta fuera del post, pero me gustaria ponerle el efecto over que tienes en tus post, por ejemplo en donde pegas los codigos, en este apartado al pasar el cursor del mouse cambia de color, seria mucho pedir que me explicaras como haces esto? gracias ;)

    ResponderEliminar
    Respuestas
    1. Yo uso los bloques entrecomillados, sólo le he añadido un :hover y ahí asigné otros estilos:
      http://ciudadblogger.com/2009/11/personalizar-los-bloques.html

      Eliminar
  86. Potro, ¿hay alguna forma de cambiar el tamaño a los "label"? Es que los tengo sobre una imagen y el área para colocar el texto tapa bastante imagen.

    ResponderEliminar
    Respuestas
    1. Sólo si le aplicas estos estilos dentro de la etiqueta LABEL
      style="display: block;float: left;width: 150px;"

      Eliminar
    2. Pe-pe-pe-pero... ¿Qué... qué poderes usas? ¡¡Ha salido genial y eso que me había matado buscando soluciones!! Eres genial. Bueno genial no, lo siguiente, y lo siguiente, y lo siguiente... ¡¡Eres un Dios humano!! Muchísimas graciaas.

      Eliminar
  87. hola Potro me gustaría encontrar un menú bonito para esta página
    http://intdreams.blogspot.com/

    ResponderEliminar
    Respuestas
    1. En la categoría "Menús" están todos los que hemos publicado.
      Saludos.

      Eliminar
  88. Hola, me gustaría hacer una consulta.

    Tengo un blog -de Blogger- y me gustaría colgar en él unos wallpappers que he encontrado por internet para poder compartirlos con mucha gente a través de mi propio blog. La idea es que cuando alguien entre, al pinchar en la imagen, la puedan agrandar y todo eso, que se les abra en otra pestaña, que la puedan usar para fondo de escritorio y eso.

    Gracias por tanto.

    ResponderEliminar
    Respuestas
    1. Hola, hay varias formas, la menos complicada es que pongas un mensaje indicando que dándole click derecho a la imagen seleccionen "Guardar como...", o bien, puedes poner la imagen dentro de un archivo ZIP, subirlo a un alojamiento y luego poner en el blog un enlace a ese archivo para que lo puedan descargar, pero será más trabajo.

      Eliminar
  89. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola jarckol Izul, entré a tu blog y lo veo bien en ambos navegadores.
      Pd. Eliminé el comentario por el aviso que está al final.

      Eliminar
  90. Hola Potro, podrias guiarme de como crear un efecto transparencia en los fieldset? en la parte donde va el texto , osea que el background del fieldset se vea transparente, se puede hacer?
    De antemano muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola VaL, ¿te refieres a semitransparente? si es así lo mejor es que pongas como fondo una imagen en formato PNG que ya tenga la transparencia.

      Eliminar
  91. Sii semitransparente, ya si algo asi me imaginaba tambien, y la puedo poner como background-image?? porque así lo trato de hacer y no se porque no se me ve la imagen, gracias por la respuesta anterior :)

    ResponderEliminar
    Respuestas
    1. Sí, o como background nada más, funciona de ambas maneras:

      fieldset {
      background: url(URL de la imagen);
      }

      Si te da problema dime en cuál blog lo has puesto para darle una revisada.
      Saludos.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger