image
Inicio » Foros » CSS

Foro sobre hojas de estilo CSS

Texto a dos columnas

Volver al foro | Tema cerrado | Añadir nuevo tema


De: Humberto
Fecha: 13/06/2006
Mensaje:

No encuentro la forma de colocar en el centro de la página una imagen y que a se alrededor fluyan dos columnas de texto.

Si alguno sabe como hacer esto...........


Quizás le interese
De: ladyblue
Util para: 8 personas

Fecha: 13/06/2006
Mensaje:

Hola, pues yo te recomiendo que pongas todo en una tabla y lo alinees a tu gusto.
Espero te sirva



De: Pato
Util para: 0 personas

Fecha: 14/06/2006
Mensaje:

Entiendo lo que querés hacer.
Muy bine, tienes que usar un programa llamado Quark express, o bien Illustrator, Fireworks, etc, y después pegás esa imagen en tu página html. ejem....

Andá imagen en el centro y texto alrededor... seguro que sos diseñador gráfico....



De: ZeroKilled
Util para: 1 personas

Fecha: 15/06/2006
Mensaje:

Estaba viendo alguna posibilidad de lograr tal efecto utilizando CSS pero no logre nada. Quizas combinando CSS con JavaScript se pueda lograr algo, pero CSS solo no lo creo. Me parece a mi que usted es usuario de algun procesador de palabras tal como Microsoft Word puesto que tal diagramacion se puede hacer en dicho programa. No obstante, hice la siguiente prueba. Copie un texto a Word y luego le añadi una imagen, le indique que la imagen fuera de posicion absoluta y que el texto lo rodeara. Cuando fui a grabarlo en formato de pagina para internet, se me indica que hubo una imagen con un formato no valido, como quieres alinearlo, a la derecha o izquierda. Conclui que tal diagramacion en CSS no es posible y mucho menos en HTML.




De: Humberto
Util para: 3 personas

Fecha: 15/06/2006
Mensaje:

Se trata de hacerlo con CSS.
Ya logré poner el texto a dos columnas haciendo dos bloques con el tag <span>, el problema es la img pues para lograr que el texto fluya alrededor se usa la propiedad float: de CSS que solo admite los valores left/right y tiene que estar en el mismo bloque del texto o sea, ni modo de ponerla entre los dos.

Debe haber alguna forma de hacerlo puesto que el proble salió en un concurso hace un tiempo(solo se podía usar CSS y HTML) y se mostraba una foto del resultado en un navegador.

Una posible solución que encontré:
- Dividir la imagen por el centro.
- Poner una mitad en cada Bloque.
- A la mitad del bloque izqdo ponerle float:right y a la otra float:left.
- Para logorar unir las dos mitades en el centro manteniendo el espacio entre los bloques de texto se le ponen los márgenes negativos, o sea a la de la derecha margin-left:-5 y a la de la izqda margin-right:-5 (suponiendo que el espacio entre los bloques sea de 10px)

Me gustaría conocer sus opiniones al respecto.



De: Humberto
Util para: 3 personas

Fecha: 15/06/2006
Mensaje:

Bueno en la solución anterior hay un problema:

Cuando cambiamos las dimensiones de la ventana del navegador las imagenes tienden a solaparse.
(la imagen sin dividir es de 180x180 px)
Para solucionar esto está esta opción:
- En el bloque izqdo se pone la imagen sin dividir.
- Se le define margin-right:-100px
- En el bloque de la derecha se pone un <span> y se le definen las mismas dimensiones de la imagen.
- Al <span> se le define margin-left:-100px;

Y queda 100% ok tanto para IE como para Firefox.

A continuación el código HTML para que lo prueben:
------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Columnas e imagen</title>
<link href="estilos/estilo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">

<span id="cont1">
<img id="imL" src="img/imagen.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pretium ante non elit. Morbi vulputate pede eget turpis. Nam lectus augue, volutpat quis, convallis et, lacinia et, tellus. Aliquam cursus. Nullam sed nibh. Cras pharetra dui sit amet lacus. Sed vel mi nec sem sodales vulputate. Vivamus elit lacus, ultrices at, eleifend a, interdum eu, ipsum. In aliquet. Vestibulum elementum imperdiet ligula.</p>

<p>Pellentesque consequat gravida turpis. Sed mi dui, blandit a, ultricies sit amet, ultrices vitae, purus. Praesent tincidunt ultrices nisi. Proin suscipit aliquet ante. In tincidunt nunc bibendum odio. Sed suscipit urna nec ante. Sed commodo odio id felis. Nullam adipiscing metus sit amet mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla bibendum nisi sed nulla. Nam et arcu. Pellentesque ultricies adipiscing metus.</p>

<p>Sed tincidunt. Nam lectus ipsum, ornare sed, consectetuer at, laoreet at, nunc. Aenean volutpat erat in ligula. Praesent volutpat, magna sed consectetuer adipiscing, leo diam dictum elit, a eleifend libero erat quis velit. Aliquam non libero. Quisque nunc tortor, elementum ac, vehicula eget, cursus in, turpis. Nunc neque lacus, euismod id, rhoncus at, dignissim eu, magna. Aenean orci. Pellentesque elit ante, placerat vitae, commodo sed, aliquet sit amet, justo. Fusce posuere. Fusce venenatis nisl a dolor. Proin neque ipsum, elementum nec, scelerisque auctor, pulvinar eu, lectus. Morbi luctus dolor non libero. Etiam magna. Nullam eu quam at erat gravida fringilla. In odio tellus, pharetra eu, gravida sit amet, accumsan et, nisi. Etiam ac mauris id nisi vehicula mollis. Etiam risus pede, cursus sit amet, aliquam et, pulvinar at, elit.</p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur et dui non libero faucibus rhoncus. Sed quis velit. Suspendisse nisi. Cras vitae nibh. Nullam elit erat, interdum sed, vehicula in. </p>
</span>


<span id="cont2">
<span id="imR"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pretium ante non elit. Morbi vulputate pede eget turpis. Nam lectus augue, volutpat quis, convallis et, lacinia et, tellus. Aliquam cursus. Nullam sed nibh. Cras pharetra dui sit amet lacus. Sed vel mi nec sem sodales vulputate. Vivamus elit lacus, ultrices at, eleifend a, interdum eu, ipsum. In aliquet. Vestibulum elementum imperdiet ligula.</p>

<p>Pellentesque consequat gravida turpis. Sed mi dui, blandit a, ultricies sit amet, ultrices vitae, purus. Praesent tincidunt ultrices nisi. Proin suscipit aliquet ante. In tincidunt nunc bibendum odio. Sed suscipit urna nec ante. Sed commodo odio id felis. Nullam adipiscing metus sit amet mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla bibendum nisi sed nulla. Nam et arcu. Pellentesque ultricies adipiscing metus.</p>

<p>Sed tincidunt. Nam lectus ipsum, ornare sed, consectetuer at, laoreet at, nunc. Aenean volutpat erat in ligula. Praesent volutpat, magna sed consectetuer adipiscing, leo diam dictum elit, a eleifend libero erat quis velit. Aliquam non libero. Quisque nunc tortor, elementum ac, vehicula eget, cursus in, turpis. Nunc neque lacus, euismod id, rhoncus at, dignissim eu, magna. Aenean orci. Pellentesque elit ante, placerat vitae, commodo sed, aliquet sit amet, justo. Fusce posuere. Fusce venenatis nisl a dolor. Proin neque ipsum, elementum nec, scelerisque auctor, pulvinar eu, lectus. Morbi luctus dolor non libero. Etiam magna. Nullam eu quam at erat gravida fringilla. In odio tellus, pharetra eu, gravida sit amet, accumsan et, nisi. Etiam ac mauris id nisi vehicula mollis. Etiam risus pede, cursus sit amet, aliquam et, pulvinar at, elit.</p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur et dui non libero faucibus rhoncus. Sed quis velit. Suspendisse nisi. Cras vitae nibh. Nullam elit erat, interdum sed, vehicula in. </p>

</span>
</div>

</body>
</html>

----------------------------------------------------------------
--------------------------CSS-----------------------------------
#cont1 , #cont2{ /*Formato común de ambos bloques de texto*/
width:49%;
display:block;
position:relative;
font-family:Tahoma, Arial;
font-size:12px;
text-align:justify;
}

#cont2{
float:right; /*Alinear bloque 2 a la derecha*/
}

#cont1{
float:left; /*Alinear bloque 1 a la izqda*/
}

#imL{
float: right;
margin-left:20px; /*margen a*/
margin-right:-100px;
}

#imR{
float: left;
margin-right:20px; /*margen c*/
margin-left:-100px;
}

#imL,#imR {
position:relative;
display:block;
margin-bottom:10px; /*margen b*/
margin-top:18px;
width:180px;
height:180px;
}




De: ZeroKilled
Util para: 0 personas

Fecha: 15/06/2006
Mensaje:

En verdad que tu solucion me gusta, para mi esta lo suficientemente bien. Sin embargo, fijate que tiene ciertas limitaciones. En un principio yo pensaba que la idea tuya era ubicar la imagen en cualquier posicion vertical despues que estuviera en el centro de las dos columnas. Fijate en tu solucion siempre funcionara mientras la imagen este ubicada en la parte superior. Otro detalle que me fije es que el contenido de ambas columnas son los mismos. En verdad, bajos estas circunstancias, el contenido puede ser cualquiera siempre y cuando la imagen se mantenga arriba. Pero imaginate que te pidan que la imagen no sea arriba, sino abajo, o mas o menos en el centro! Entonces ahi es cuando esta solucion no es util. Vuelvo y le digo, la solucion me gusta, pero tambien esté conciente de las limitaciones.



De: ROBERTO
Util para: 0 personas

Fecha: 29/06/2006
Mensaje:

NACI EN EL HOYO DEL AIRE Y HACE UN MES FUE A VISITAR MI PUEBLO PERO ME DIO MUCHA TRISTEZA VER QUE PASAN LOS ANOS Y LOS PRESIDENTES NO HACEN NADA PARA SALIR ADELANTE PASE POR TARETAN Y ES UNA DECEPCION VER COMO HASTA LA PLAZA LA HAN RIDICULIZADO CON LA PINTURA AMARILLA QUE LE PUSIERON ALREDEDOR DE VERDAD Y QUE LA PRESIDENCIA SIGUE EN CONSTRUCCION SEGUN TENGO ENTENDIDO YA TIENE MUCHO TIEMPO POR FAVOR HAGO UN LLAMADO AL PRESEDENTE PARA QUE HAGA ALGO POR EL PUEBLO Y NO LO RIDICULIZE

 

 





De: J.Jesus Andrade A.
Util para: 0 personas

Fecha: 12/01/2007
Mensaje:

saludos a todas y cada una de las personas que leea my saludo de san jose california .saludo a toda la jente de taretan y en speciala mi papa ignacio andrade andrade y ami comadre guadalupe solis de andrade  saludos a todos mis amigos de escuela  y tambien del pueblo taretan  hermoso pueblo que yo estrano saludos





De: jesus andrade
Util para: 0 personas

Fecha: 21/03/2007
Mensaje:

el mensage es para saludar a todos mi familiares en el pueblo vello de taretan y con orgullo lo digo tanbien saludo a todos mis amigos del pueblo en especial a mi papa ignacio andrade y le mando saludos con todo mi corazon a mi comadre guadalupe solis de andrade con todo respeto le mando un abraso de san jose california



De: amor
Util para: 0 personas

Fecha: 25/03/2007
Mensaje:

unsaludo  a ibis de una mujer  que fue su novia i kelokiso mucho mas deloke el se inmagina por ser un hombre marabilloso,detallista y sobretodo  amoroso yo como majer me arepiento de aberlo  perdido un hombre asi es difisil de olbidar  mui tarde lo supe siel tiene la opurtunidad  de leer  estas linias  sabra kien las escribio  pues el maregalo  un cased  de vinto y sol por sierto mui romantico ke todadia lo con serbo con mucho carillo y el reloc  ke el medio el sabra kien soi yo





De: jesus andrade
Util para: 0 personas

Fecha: 19/04/2007
Mensaje:

saludos a toda la familia andrade mi papa ignacio andrade que pronto estare en taretran en julio



De: mario cuevas
Util para: 0 personas

Fecha: 22/01/2008
Mensaje:

saludos a toda la gente de el hermoso pueblo de taretan mich. saludos a jesus andrade de san jose ya que es el unico en el sitio tengo como 15 years por aca pero aun te recuerdo cuando estabas chabalillo



De: mario cuevas
Util para: 0 personas

Fecha: 22/01/2008
Mensaje:

saludos a toda la gente de el hermoso pueblo de taretan mich. saludos a jesus andrade de san jose ya que es el unico en el sitio tengo como 15 years por aca pero aun te recuerdo cuando estabas chabalillo



De: claudia
Util para: 0 personas

Fecha: 18/02/2008
Mensaje:

para mario cuevas: hola mario como estas muchos saludos de aqui de ontario mire tu mensaje para otra persona y me sonaba tu nombre hasta que me acorde de ti, no se como se puede uno comunicar aqui si solo con mensajes o puede uno dejar su correo adioosss claudia ponce



De: player88
Util para: 0 personas

Fecha: 26/02/2008
Mensaje:

hola, alguno conoce el programa kompozer? y si es asi este es editor de xhtml??
gracias.



De: felipe gonzalez
Util para: 0 personas

Fecha: 06/04/2008
Mensaje:

Hola a todos los de teretan mi nombre es felipe gonzalez gonzalez yo tambien naci y creci en taretan (cerca del barrio del nogal) y ahora vivo en sacramento california ya tengo por aqui cerca de 16 anos asi que no recuerdo a muchas personas que dicen que son de alla pero con el solo hecho de ser de taretan tienen mi saludo sincero y espero volver pronto para mi pueblo querido del que nunca me olvido ...gracias



De: tu cuñis
Util para: 0 personas

Fecha: 06/06/2008
Mensaje:

Holaaa¡ Ivis soy tu cuñada, la mamà de tu sobrina la mas chula de taretan te mando mi correo escribe y manda fotos sale? saludame a todos en especial a Juanito, BYE.



De: lector
Util para: 0 personas

Fecha: 01/07/2008
Mensaje:

PERO BUENO... MODERADOR DEL FORO... QUE PASA QUE NO HAY CONTROL DE LO QUE ESCRIBE LA GENTE AQUI???

TODOS ESOS MENSAJES DE SALUDOS DEBERIAN SER BORRADOS, YA QUE ES UN INCORDIO PARA LOS QUE DESEAMOS APRENDER Y NOS ENCONTRAMOS CON PERDIDAS DE TIEMPO LEYENDO TONTERIAS...



De: mary
Util para: 0 personas

Fecha: 09/07/2008
Mensaje:

querido lector q amargado eres, simplemente no te detengas a leer los saludos, si quieres aprender los saludos no son obstaculo. chao,byeee.



Volver al foro | Tema cerrado | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.