JMiur [E]

La etiqueta <blockquote> </blockquote> la utilizamos para destacar una cita textual. Su sintaxis es sencilla:
<blockquote>
....... texto .......
</blockquote>
Por lo general, tratamos de diferenciarla gráficamente del resto de la página y, por defecto, la mayoría de los navegadores las muestran con un margen izquierdo y con una fuente especial; pero, como es algo que solemos utilizar con cierta frecuencia, lo mejor es definir algún tipo de estilo CSS que nos permita incluirlas con facilidad.

Las posibilidades son muchas y no hace falta limitarse a un modelo, podemos crear varias clases diferentes y utilizarlas según nuestra conveniencia. Los estilos, los agregamos en nuestra plantilla, antes de la etiqueta </head>.

La forma más sencilla es sólo utilizar colores y bordes:

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


ESTILO CSS:
<style>
blockquote.cita1 {
width:400px;
margin: 10px 0 10px 50px;
padding: 10px;
text-align: justify;
font: 14px/22px normal helvetica, sans-serif;
color: #FFFFFF;
background: transparent;
border-left: 4px solid #FF9933;
}
</style>

CODIGO HTML:
<blockquote class="cita1">
....... contenido .......
</blockquote>

Otra posibilidad es utilizar una imagen como fondo. En este caso, la colocamos como propiedad background de la etiqueta:

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


ESTILO CSS:
<style>
blockquote.cita2 {
width:400px;
margin: 5px;
padding: 18px 10px 18px 70px;
text-align: justify;
font: 14px/20px italic Times, serif;
background: #DADADA url(URL_imagen) no-repeat center left;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
</style>

CODIGO HTML:
<blockquote class="cita2">
....... contenido .......
</blockquote>

Por último, la más compleja es agregar dos imágenes, una en la parte superior y otra en la parte inferior. Si decidimos hacer esto, el problema a resolver es que necesitamos mostrar dos imágenes en una sola etiqueta con lo cual necesitamos insertar un bloque dentro de otro.
<blockquote>
<span>
....... texto .......
</span>
</blockquote>
En la etiqueta blockquote colocaremos el fondo que se verá en la parte superior y en la etiqueta span, el fondo que se verá en la parte inferior. De esta manera, de forma general, las propiedades serán:

background: color url(URL_imagenSuperior) no-repeat left top;

background: color url(URL_imagenInferior) no-repeat right bottom;

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


ESTILO CSS:
<style>
blockquote.cita2 {
width:400px;
padding: 30px 20px 10px 30px;
text-align: justify;
font-family: Georgia;
font-style: italic;
font-size: 15px;
color: #000000;
background: #FFFFFF url(URL_imagenSuperior) no-repeat 5% 5%;
}
blockquote.cita3 span {
display: block;
padding: 15px 10px 15px 10px;
background: url(URL_imagenInferior) no-repeat bottom right;
}
</style>

CODIGO HTML:
<blockquote class="cita2">
<span>
....... contenido .......
</span>
</blockquote>

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


ESTILO CSS:
<style>
blockquote.cita4 {
width:400px;
margin: 5px ;
padding: 20px 10px 10px 10px;
text-align: justify;
font: 14px/20px italic Times, serif;
background: #FAEBBC url(URL_imagenSuperior) no-repeat top left;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
}
blockquote.cita4 span {
display: block;
background: transparent url(URL_imagenInferior) no-repeat bottom right;
}
</style>

CODIGO HTML:
<blockquote class="cita2">
<span>
....... contenido .......
</span>
</blockquote>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


ESTILO CSS:
<style>
blockquote.cita5 {
width:400px;
margin: 5px;
padding: 5px 10px 5px 70px;
text-align: justify;
font: 12px/18px normal "Courier New", sans-serif;
color: #FFFFFF;
background: #000000 url(URL_imagenSuperior) no-repeat top left;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
blockquote.cita5 span {
display: block;
padding-right: 50px;
background: transparent url(URL_imagenInferior) no-repeat bottom right;
}
</style>

CODIGO HTML:
<blockquote class="cita2">
<span>
....... contenido .......
</span>
</blockquote>

REFERENCIAS:
  • www.w3.org
  • css-tricks.com
  • 28 comentarios:

    Anónimo  

    Jmiur, muy buen artículo, me sorprendes por la cantidad de artículos que colocas, ¿duermes?.
    Salud.

    Responder
    JMiur  

    ¿Dormir?
    ¿Qué es eso?
    ¿Un nuevo servicio Web 2.0? :D

    Responder
    Anónimo  

    Hola. Estoy creando www.disemdi.com , un periódico digital que paga según las visitas que tenga tu artículo y me gustaría que colaboraras conmigo.
    Concédeme una entrevista a través de Messenger o gmail, mi correo es lonuestro27@hotmail.com. O bien mándame directamente un autorretrato escrito tuyo para colgarlo en la pagina www.wwwdisemdicom.blogspot.com donde está el mio ; conocer a Guillermo Chacón y el de los otros colaboradores.
    Un saludo.Jose Guillermo.

    Responder
    Gem@  

    J.Miur el buscador no funciona bien al menos eso pienso porque introduzca la palabra que introduzca te lleva a la página actual del blog.

    Responder
    JMiur  

    Tienes razón, aparentemente es un problema con el buscador de Google Draft.

    Haz click en "EL OJO" de la derecha "Google Search" para utilizar el buscador normal.

    Intentaré saber qué pasa pero estas cosas, generalmente no tienen explicación :)

    Responder
    Gem@  

    No es grato pincharte en el ojo... pero que le vamos a hacer todo sea por buscar sin molestarte :$

    Responder
    JMiur  

    Lamentablemente, el buscador de Blogger Draft sigue sin funcionar así que no hay más remedio. El ojo derecho me quedará amoratado pero .. paciencia :D

    Responder
    Javi  

    hola, estoy buscando maneras de optimizar mi blog y buceando...pues aunque he encontrado muchas cosas otras se me resisten, quisiera preguntarte,por si puedes y quieres ayudarme.
    el blog que estoy trabajando se llama http://cursodeturco.blogspot.com, por si quieres hecharle un vistazo y mis dudas son:
    1ª en la barra del menú expandible, quisiera saber la forma de poder añadirle otro nivel, por ej. si vas a la pestaña de "Turquía" se expande una serie de referencias, yo quisiera que desde ellas se abriera unasegunda lista, por ejemplo si vas a la subpestaña de "Recetas" que te salga una nueva lista con las recetas, es eso posible?
    2ª queria crear varios links relacionados a una foto,a un mapa concretamente y,pinchando en cada región del mapa, se abra una página determinada. pienso que dividiendo el mapa por partes y, de algun modo, en un post o widget "fusionar" esas partes
    3ª esta me temo q es imposible, que es hacer un blogger dual, en español e inglés

    bueno, muchas gracias, aunque sea por todo lo que hasta ahora he aprendido desde tu blog!

    Responder
    JMiur  

    Tener un menu con submenues es posible, pero, bastante engorroso de hacer. No se si el que usas ahora lo admite. De cualquier manera, por ejemplo, aqui hay otro modelo, por lo menos para que tengas una idea: CSS Play

    Lo del mapa es posible, en realidad, hay una etiqueta HTML para hacer eso que se llama MAP. Nunca he hecho un post al respecto. Hay una breve descripción en el tutorial. Seguramente, en la web debe haber mucho más sobre ese tema. Veré si puedo escribir algo sobre eso.

    La tercera es y no es posible, depende de lo que eso signifique. Por lo general, los sitios que admiten dos o más idiomas no son otra cosa que sitios individuales, no suelen ser "traducciones automáticas" así que, podrían ser dos blogs.

    Responder
    Javi  

    Muchísimas gracias!! No esperaba tener respuesta y la obtuve apenas 4 horas después de hacer la pregunta... y encima 100% util! con el menú que mediste,la estética del que tenía y numerosas pruebas de ensayo y error con todas las variables, he dado con mi propia teoría de la gravitación universal... jejeje, tengo un pequeño problema, que el icono de color rojo (cuando me "poso" sobrelos títulos del menú) me sale cortado, pero es poco importante y todavía quiero intentar hacer algun cambio estético.
    Con respecto a lo del mapalo que me indicaste me sirve,preferirìa poder manipular las fotografías, pero eso es 100% útil para mi.
    Y lo del blog dual...bueno, quiero poder añadir los widgets y todas las entradas en inglés,podría hacerlo en otro blog (y es lo que haré),pero desearía no cambiar.
    En fín,que no quiero plantearte más dudas, sólo agradecerte tu rápida y eficiente respuesta.
    Hasta luego!

    Responder
    JMiur  

    Me alegro que te fuera útil.

    Por lo del ícono no te preocupes, alguna solución tiene, habría que verlo online pero suele ser um problema de anchos o márgenes. Incluso eso, en IE y en Firefox se pueden ver diferentes y hay que buscar la forma de compatibilizarlo.

    Responder
    Jabba  

    Joer JMiur eres un crack. Muchas gracias ;)

    Responder
    JMiur  

    Luis: Espero que algo de esto resuelva tus dudas :)

    Responder
    Jabba  

    Las resuelve todas xD. Gracias!

    Responder
    Uno mas del monton  

    JMiur que tal, ya soy un concurrente alumno a tus clases xD

    Queria saber cual sería el problema que tengo, copié los códigos antes del HEAD, y usé las dos comillas

    blockquote class="cita2"
    span
    ....... contenido .......
    /span
    /blockquote

    Es asi? porque a mi me muestra una sola comilla, intenté probando con class="cita3" en el span y en varios lados pero no pas nada por eso pregunto

    y ya que esta pregunto si sabes como tengo que hacer para poner un link bajo la fotos que aparecen en la entrada, principalmente las de abajo, no logro hacer que queden bien acomodados, necesitaria una mano ;)

    Acá esta el problema:
    http://selecciondefrases.blogspot.com/


    Saludos desde ya muchiisimas gracias por toodo

    Responder
    JMiur  

    Las comillas simpes o dobles son indiferentes piede usarse cualquiera. Dependiendode donde estés, Blogger las cambiará, por ejemplo, en laplantilla usa simples. Así que: class="xxxx" y class='xxxx' es lo mismo. Lo único que no puedes hacer es mezclarlas.

    Para alinera ese tipo de imagenes y textos, lo mejor es usar una tabla. En términos generales algo así:

    <table>
    <tr>
    <td align="center"><img src="imagen_1"/></td>
    <td align="center"><img src="imagen_2"/></td>
    </tr>
    <tr>
    <td align="center">TEXTO_1</td>
    <td align="center">TEXTO_2</td>
    </tr>
    </table>

    En un post, todo escrito en una sola línea.

    Responder
    Uno mas del monton  

    Gracias :D lo de las tablas funciono perfecto, ahora lo de las comillas no entendi mucho.
    Yo agregue tres clases blockquote.cita1, .cita2 y .cita3.
    Lo que quiero es que salga la ultima comilla de cierre, seria el 3er ejemplo del articulo. fijate que me sale una comilla nomas..

    Para mi tendria que usar la clase cita3 porque como dice el articulo lo pongo y no funciona

    Responder
    JMiur  

    Ya entendí. Pensaba que hablabas de las comillas del código :D

    Para poner esa segunda imagen, debes usar el modelo cita3. La comilla de apertura va en el blockquote y la segunda, la de cierre va en un span dentro:

    <blockquote class="cita3">
    <span>
    .......
    </span>
    </blockquote>

    blockquote.cita3 {background:#FFFFFF url(abroComillas) no-repeat scroll 5% 5%;
    ..........
    }
    blockquote.cita3 span {
    background:transparent url(cierroComillas) no-repeat scroll right bottom;
    display:block;
    }

    Responder
    Uno mas del monton  

    Gracias JM, igual no se si me entendiste todavía xD.

    Mi problema era en como usar las clases para que se vean las dos comillas.. lo solucioné aunque no se si de la forma correcta, las uso asi.

    blockquote class="cita2"
    blockquote class="cita3"
    ......
    /blockquote
    /blockquote

    Se ven bien.

    que manera de escribir varias veces el comentario xD.. claro usaba el código y no te avisa "en el nuevo estilo" que el HTML no es aceptable, y bueno.. ¿como haces para comentar los códigos?

    Responder
    JMiur  

    Sí, en los comentarios no pueden usarse etiquetas salvo las aceptables.

    Se usan sus equivalentes:

    en lugar de < se escribe &lt;
    en lugar de > se escribe &gt;

    Responder
    ●๋•╣ҜΞҜΘ╠●๋•  

    ola jmiur para ensanchar el texto entrecomillado, osea hacerlo mas ancho y menos alto como se hace¿? que medidas se cambian¿?

    Responder
    JMiur  

    No sé en cual modelo pero, en general, el ancho es lo que se define con:
    width:VALORpx;

    El alto, depende exclusivamente del contenido.

    Responder
    Daniela Ivonne  

    No me resulta :(

    Responder
    XiC Nou Barris  

    hola jmiur, he visto este truco de las comillas y me ha encantado, lo he puesto en mi blog, pero solo me sale la de la izquierda, en el CSS he puesto que me salga también la derecha, pero no me la reconoce. puede ser porque el contenido tiene que estar todo junto????
    muchas gracias como siempre
    núria

    JMiur  

    Tendría que saber cuál de los ejemplos estás usando y dónde puede verse online.

    Responder
    XiC Nou Barris  

    hola jmiur,,,en la segunda entrada del blog esta el ejemplo,, y el blog es el del perfil este o sea xic nou barris, el ejemplo que he cogido es el de la barra lateral ... cita1
    gracias

    JMiur  

    En tu blog tienes una regla de estilo genérica que se llama de este modo:

    .post blockquote {
    .............
    }

    En ella, agrega el borde derecho; por ejemplo:

    border-right: 4px solid #303941;

    XiC Nou Barris  

    bon dia jmiur,,
    solucionado gracias a ti.
    núria

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR