JMiur [E]

Los elementos agregados a nuestro sitio pueden flotar a la izquierda o a la derecha y no existen términos medios.

Es cierto que en algunas plantillas se ven cosas como float: center; pero eso tiene el mismo efecto que poner float: pepito; ya que, cuando el navegador no reconoce una propiedad, simplemente la ignora y sigue de largo sin hacer nada ni indicar que hay un error así que, cualquier valor colocado que no sea left, right o none no hará nada de nada.

¿Para qué hacer que algo flote? El uso más común es para "acomodar" cierto texto alrededor de una imagen:
<div><img style="float: left;" src="URL_imagen" /> el texto a mostrar </div>
Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.
<div><img style="float: right;" src="URL_imagen" /> el texto a mostrar </div>
Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.

Pero ¿qué pasa cuando queremos centrar esa imagen y ponerle el texto alrededor? No hay respuestas para eso. No está previsto e incluso hay quienes sostienen que es innecesario ya que la legibilidad de los textos se vería seriamente afectada y pese a que eso es una opinión subjetiva, no deja de tener cierta lógica.

Lo que si es posible es utilizar columnas donde tengamos una imagen centrada y dos textos, uno a su derecha y otro a su izquierda. La primera solución para eso es un esquema de este tipo:
<style>
  #contenedor-center {
    margin: 0 auto;
    text-align: center;
    width: 620px;
  }
  #texto-L, #texto-R { width: 200px; }
  #texto-L { float: left; text-align:right; }
  #texto-R { float: right; text-align:left; }
</style>

<div id="contenedor-center">
  <div id="texto-L">
    <p> el texto a mostrar </p>
  </div>
  <div id="texto-R">
    <p> el texto a mostrar </p>
  </div>
  <img src="URL_imagen" />
</div>

Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.

Aenean sollicitudin urna quis nibh ultricies rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec commodo ligula. Ut eleifend, justo elementum tempor pharetra, eros nunc rhoncus nibh, nec eleifend tellus mi vitae mauris. Curabitur a mauris varius est bibendum iaculis? Nam in felis mauris. Cras odio dui, fermentum ac tincidunt in; condimentum non nulla. Proin convallis; lectus sit amet sollicitudin rutrum, sapien quam porta purus, et feugiat felis lacus id dui. Cras sed pretium quam.



Se verán tres columnas pero el texto no rodeará la imagen; abajo quedará un espacio en blanco si es que ese texto es largo.

En css-tricks.com dan una solución aternativa utilziando el pseudo-elemento before para crear un "agujero" y allí poner la imagen:
<style>
  #contenedor-center {
    margin: 0 auto;
    position: relative;
    width: 620px;
  }
  #imagen-center {
    position: absolute;
    top: 0;
    left:50%;
    margin-left:-100px; /* el margen es la mitad del ancho de la imagen */
  }
  #texto-L, #texto-R { width: 49%; }
  #texto-L { float: left; }
  #texto-R { float: right; }
  #texto-L:before, #texto-R:before {
    content: "";
    height: 300px; /* la altura es igual a la altura de la imagen */
    width: 100px; /* el ancho es la mitad del ancho de la imagen */
  }
  #texto-L:before { float: right; }
  #texto-R:before { float: left; }
</style>

<div id="contenedor-center">
  <img id="imagen-center" src="URL_IMAGEN" />
  <div id="texto-L">
    <p> el texto a mostrar </p>
  </div>
  <div id="texto-R">
    <p> el texto a mostrar </p>
  </div>
</div>

Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.

Aenean sollicitudin urna quis nibh ultricies rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec commodo ligula. Ut eleifend, justo elementum tempor pharetra, eros nunc rhoncus nibh, nec eleifend tellus mi vitae mauris. Curabitur a mauris varius est bibendum iaculis? Nam in felis mauris. Cras odio dui, fermentum ac tincidunt in; condimentum non nulla. Proin convallis; lectus sit amet sollicitudin rutrum, sapien quam porta purus, et feugiat felis lacus id dui. Cras sed pretium quam.

12 comentarios:

Almimesi  

útil, muy útil, se agradece JMiur

Responder
Memiliano  

Es cierto! Es increíble la cantidad de plantillas que tienen float:center La verdad que no lo entiendo, yo que soy un pelagato me doy cuenta de eso, no entiendo por qué los diseñadores se empeñan en incluirlo en sus plantillas...

No creo que vaya a utilizar este truco, pero ¿cual sería la diferencia al utilizar directamente tablas en HTML? Suponiendo que no voy a utilizarlo en todos los posts... Mi pregunta va orientada (dejando de lado la practicidad de cada método) a qué tardaría más tiempo en cargar: alguna que otra tabla en HTML o el código CSS cada vez...

No se si me explico o si hay una buena respuesta a eso, pero ya que estamos en el tema :P

Saludos!!

Responder
nina  

hola!

buen articulo...ojala y puedas ayudarme con esto

quiero poner una imagen en mi formulario d comentarios...pero no es tan censillo ya q eh buscado por varias partes la manera d hacerlo posible porq mi plantilla es diferente osea d las nuevas (con el diseñador d plantilla)
y el codigo no es el mismo =(

me parece q tu ya tenias un articulo asi aca...pero igual no me sirvio porq mi plantilla es distinta y ya trate d hacer q el codigo q dan lo ponga en mi plantilla...pero me da error y no se puede >_<

nesecito el codigo correcto para poner esa imagen sobre mi formulario d comentarios

ojala y puedas ayudarme

Responder
Graciela  

Agradable Jmiur, me encanta :D

Responder
Adrián J. Messina  

Que bueno, me sirve muchísimo desconocía la idea de colocar una imagen en el medio de un texto, con él alrededor.
Se le puede dar la idea a la entrada del tipo revista, realmente muy original.

Agradecido como siempre.

Felices Pascuas.

Responder
JMiur  

Memiliano:
¿Has visto? Pensé que era casualidad y me habia tocado ver un par así pero no, parece que el float:center es epidemia :D
Entre el primer caso y una tabla diría que no hay diferencias. Con el segundo sí ya que no hay forma de conseguir esa flexibilidad usando sólo celdas.
El tiempo es indiferente, no depende de la estructura de etqieutas sino del contenido de estas.

nina:
Simplemente busca esta parte:

<b:includable id='comment-form' var='post'>
<div id='comment-form'>
<a name='comment-form'/>

y debajo, colocas la imagen; así quedara´por encima del título: Publicar un comentario en la entrada y dentro del rectángulo naranja. Si quieres que esté debajo de ese título, busca:

<h4 id='comment-post-message'> ...... </h4>

y pones la imagen debajo de eso.

Adrián:
Justamente es para ese tipo de cosas. Fíjate en el artículo de alistapart porque ahí hay variantes para esos estilos tip orevista.

Responder
MartínJug  

Hola loco navegando por esta inmesas redes encontre tu blog muy groso la verdad sabes un fardo gracias por compartir tanto conocimiento, ando incursionando un poco en frondend y toy metiendole pilas a ajax css un abrazo.Martin

Responder
Suwardi Unggit  

if using GRID Inuit CSS, what above methods can be used ?

JMiur  

I don't know. I don't use that kind of frameworks.

Responder
alejandro torrente  

Feliz Dia Del Niño Para Todos Millos

Responder
Pedro Perez  

Hola amigo, muy intersante tu aporte, me sirvio mucho, pero ahora quiero hacer lo mismo, pero con un video. Sabes como hacerlo ?

JMiur  

En principio, del mismo modo, dimensionando el IFRAME o la etiqueta OBJECT del video.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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