presentación en columnas tipo revista con imágen

[derkenuke]

Hola, tengo una pequeña duda.

Quisiera formatear un texto en dos columnas, eso es un hecho fácil como quien dice: con un par de DIV's y unos estilos CSS (hasta que CSS soporte crear columnas) lo conseguiríamos.

La complicación viene cuando quiero insertar una imagen no en una columna ni en la otra, sino entre las dos columnas. Aquí las barras bajas (_) sería texto y las equis (x) sería la imagen:

Código:

_______________________ _______________________
_______________________ _______________________
_______________________ _______________________
________________               ________________
________________  XXXXXXXXXXX  ________________
________________  XXXXXXXXXXX  ________________
________________  XXXXXXXXXXX  ________________
________________  XXXXXXXXXXX  ________________
________________  XXXXXXXXXXX  ________________
_______________________ _______________________
_______________________ _______________________
_______________________ _______________________

Sería una cosa así. ¿Cómo podríamos lograrlo? ¿Algún truco o peripecia? No tiene gracia cortar la imagen en dos . Y está la dificultad de que el texto se tiene que acoplar a la imagen como si estuviera con float.



Bueno, a ver si sacamos algo.
Saludos.

[nicoquagliata]

Hola, has probado con ponerle márgenes al div de la imagen? supongo que debe funcionar, cualquier cosa pasa el código que tienes y vemos como se puede hacer...

saludos!

[derkenuke]

Hola nicoquagliata.

¿Márgenes al DIV de la imagen? Lo siento, no entiendo lo que quieres decir. Si puedes prepararme un ejemplo sencillo sería más fácil de comprender.

Respecto a código inicial... se ve que no tengo nada pensado. No sé si colocar cada columna en un DIV, si la imagen en otro DIV o no... la verdad es que no se me ha ocurrido cómo meter la imagen ahí sin que tape el texto.


He hecho un ejemplo bastante penoso, en el que la misma imagen tiene que estar repetida en el mismo documento dos veces, y encima hay que encajarla con malsana intención en su debido sitio.

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
body {
    font-family: Sans, times;
    font-size: 16px;
}
#columna1 {
    float:left;
    width: 400px;
    background-color: #ae5578;
    text-align: justify;
    padding: 15px;
}
#imagen {
    float:right;
    position: relative;
    left: 50%;
    margin: 5px;
    margin-left: -50%;
}
#imagen2 {
    float: left; 
    position: relative; 
    left: -28%;
    margin: 5px;
    margin-right: -28%;
}
#columna2 {
    float:left;
    width: 400px;
    background-color: #7855ae;
    text-align: justify;
    padding: 15px;
}
</style>
</HEAD>
 
<BODY>
 
 
 
 
 
<div id="columna1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce feugiat purus a magna. Cras et risus ac justo gravida egestas. Pellentesque tortor massa, dignissim vestibulum, tempor vel, pretium vel, enim. Nam imperdiet. Donec tempor, elit vitae aliquet tincidunt, lorem libero adipiscing pede, vitae posuere turpis nisi vitae diam. Vivamus scelerisque, erat eu posuere tempus, velit dolor consectetuer felis, et cursus nulla leo non justo. 
<img id="imagen" src="http://www.google.es/intl/en_com/images/logo_plain.png" width="276" height="110" />
Suspendisse egestas nisl sit amet tellus. Nullam feugiat iaculis dolor. Integer ipsum ligula, sodales eu, bibendum ac, lobortis at, arcu. Morbi sagittis tristique urna. Nulla quis ipsum. Maecenas sodales tristique leo. Pellentesque vel pede. Vestibulum sit amet dolor et sapien molestie pharetra. Aliquam in ipsum vitae libero ultrices pharetra. Nullam ullamcorper aliquet pede. Praesent magna pede, tincidunt ut, tristique eget, ornare at, nulla. Ut in est. Etiam eu lorem ullamcorper risus vestibulum vestibulum.
</div>
 
<div id="columna2">
Vestibulum consectetuer lorem eget arcu. Proin ullamcorper. Mauris mattis erat vel lacus. Vestibulum eget nisi. Integer elementum congue odio. Sed a nunc cursus nulla luctus mollis. Proin mollis erat id turpis. Cras a enim sit amet nisi luctus porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam gravida. Praesent volutpat mi vitae est. 
Nullam fermentum, tortor at interdum ullamcorper, est dui placerat arcu, vel ultrices dolor <img id="imagen2" src="http://www.google.es/intl/en_com/images/logo_plain.png" width="276" height="110" /> elit eleifend mi. Curabitur bibendum. Phasellus varius. Donec vel justo vitae nisl suscipit fringilla. Cras a felis. Nunc accumsan dapibus felis. Vestibulum sollicitudin lacus sit amet est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vel metus vel lorem viverra congue.
</div>
 
 
 
 
</BODY>
</HTML> 
   

Hace el efecto, pero siempre y cuando todo encaje, el usuario no cambie de tamaño de fuente... (de ahí que el tamaño de letra esté forzado en píxeles). AVISO: Sólo lo he encajado para FF y IE6, quizás sólo funcione en mi máquina.



Bueno, que me gustaría algo bien hecho, correcto.

A ver si a alguien se le ocurre.

[derkenuke]

Hola otra vez:

Según he visto en la w3, css3 permite la definición de columnas y elementos que se solapen una o todas las columnas.

¿CSS3 todavía no es soportado por los principales navegadores? Firefox2 soporta algún tipo de CSS3, que creo que todavía no está terminada su especificación. También creo que tiene algunos estilos propietarios para columnas.

Intentaré preparar un ejemplo para Firefox (a ver las limitaciones con que me encuentro) y una captura de pantalla para que se entiendan mejor mis pretensiones...


Un saludo.