Foros del Web » Creando para Internet » CSS »

presentación en columnas tipo revista con imágen

Estas en el tema de presentación en columnas tipo revista con imágen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/09/2007, 19:09
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
presentación en columnas tipo revista con imágen

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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #2 (permalink)  
Antiguo 23/09/2007, 20:26
Avatar de nicoquagliata  
Fecha de Ingreso: septiembre-2007
Mensajes: 14
Antigüedad: 10 años, 2 meses
Puntos: 1
Re: presentación en columnas tipo revista con imágen

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!
  #3 (permalink)  
Antiguo 23/09/2007, 21:00
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Re: presentación en columnas tipo revista con imágen

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-familySanstimes;
    
font-size16px;
}
#columna1 {
    
float:left;
    
width400px;
    
background-color#ae5578;
    
text-alignjustify;
    
padding15px;
}
#imagen {
    
float:right;
    
positionrelative;
    
left50%;
    
margin5px;
    
margin-left: -50%;
}
#imagen2 {
    
floatleft
    
positionrelative
    
left: -28%;
    
margin5px;
    
margin-right: -28%;
}
#columna2 {
    
float:left;
    
width400px;
    
background-color#7855ae;
    
text-alignjustify;
    
padding15px;
}
</
style>
</
HEAD>

<
BODY>





<
div id="columna1">
Lorem ipsum dolor sit ametconsectetuer adipiscing elitFusce feugiat purus a magnaCras et risus ac justo gravida egestasPellentesque tortor massadignissim vestibulumtempor velpretium velenimNam imperdietDonec temporelit vitae aliquet tinciduntlorem libero adipiscing pedevitae posuere turpis nisi vitae diamVivamus scelerisqueerat eu posuere tempusvelit dolor consectetuer feliset 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 tellusNullam feugiat iaculis dolorInteger ipsum ligulasodales eubibendum aclobortis atarcuMorbi sagittis tristique urnaNulla quis ipsumMaecenas sodales tristique leoPellentesque vel pedeVestibulum sit amet dolor et sapien molestie pharetraAliquam in ipsum vitae libero ultrices pharetraNullam ullamcorper aliquet pedePraesent magna pedetincidunt uttristique egetornare atnullaUt in estEtiam eu lorem ullamcorper risus vestibulum vestibulum.
</
div>

<
div id="columna2">
Vestibulum consectetuer lorem eget arcuProin ullamcorperMauris mattis erat vel lacusVestibulum eget nisiInteger elementum congue odioSed a nunc cursus nulla luctus mollisProin mollis erat id turpisCras a enim sit amet nisi luctus porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos hymenaeosAliquam gravidaPraesent volutpat mi vitae est
Nullam fermentumtortor at interdum ullamcorperest dui placerat arcuvel ultrices dolor <img id="imagen2" src="http://www.google.es/intl/en_com/images/logo_plain.png" width="276" height="110" /> elit eleifend miCurabitur bibendumPhasellus variusDonec vel justo vitae nisl suscipit fringillaCras a felisNunc accumsan dapibus felisVestibulum sollicitudin lacus sit amet estLorem ipsum dolor sit ametconsectetuer adipiscing elitMaecenas 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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #4 (permalink)  
Antiguo 27/09/2007, 09:21
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Re: presentación en columnas tipo revista con imágen

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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:11.