Foros del Web » Creando para Internet » CSS »

alinear imagen y texto

 Estas en el tema de alinear imagen y texto en el foro de CSS en Foros del Web. hola: estoy armando un boletin html y quiero que la imagen de la noticia este a la izquierda y el texto a la derecha, eso ...
  #1 (permalink)  
Antiguo 27/11/2009, 08:15
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 5 meses
Puntos: 43
alinear imagen y texto
hola:
estoy armando un boletin html y quiero que la imagen de la noticia este a la izquierda y el texto a la derecha, eso lo logre, pero el texto si es muy largo envuelve a la imagen, hay forma de evitar esto? les dejo el codigo para que lo vean:
Código html: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Documento sin título</title>
  6. <style type="text/css">
  7.     body, html {
  8.         background: #fff;
  9.         width: 100%;
  10.         height: 100%;
  11.         margin: 0px;
  12.         padding: 0px;
  13.         font-family: Verdana, Geneva, sans-serif;
  14.         font-size: 100%;
  15.         color: #000000;
  16.     }
  17.     
  18.     .wraper {
  19.         margin: 0px auto; /* centrar con firefox */
  20.         /* centra las capas con internet explorer */
  21.         text-align: left;
  22.         background-color: #ba5209;
  23.         width: 600px;
  24.     }
  25.     
  26.     .wraper .cabecera {
  27.         background-image: url(cabecera-newsletter.jpg);
  28.         height: 162px;
  29.     }
  30.     
  31.     .wraper .cabecera .novedades {
  32.         float: left;
  33.         margin: 140px 0 0 45px;
  34.         font-size: 14px;
  35.         font-weight: bold;
  36.         color: #7b0e12;
  37.     }
  38.     
  39.     .wraper .cabecera .fecha {
  40.         float: left;
  41.         margin: 130px 0 0 250px;
  42.         font-size: 14px;
  43.         color: #7b0e12;
  44.     }
  45.     
  46.     .wraper .cabecera .anio {
  47.         float: left;
  48.         margin: 85px 0 0 10px;
  49.         font-size: 27px;
  50.         color: #7b0e12;
  51.     }
  52.     
  53.     .cuerpo {
  54.         background-color: #fff;
  55.         width: 515px;
  56.         margin-left: 39px;
  57.         margin-bottom: 30px;
  58.         padding-left: 10px;
  59.     }
  60.     
  61.     .cuerpo h2 {
  62.         font-size: 10px;
  63.         color: #7b0e12;
  64.         padding: 0 0 0 10px;
  65.     }
  66.     
  67.     .seccion {
  68.         margin: 0 0 0 0;
  69.     }
  70.     
  71.     .cuerpo hr {
  72.         width: 500px;
  73.         margin: 40px 15px 0 0;
  74.     }
  75.     
  76.     .cuerpo .imagen {
  77.         padding: 5px 0 10px 0;
  78.         width: 510px;
  79.     }
  80.     
  81.     .cuerpo .imagen p {
  82.         padding: 10px 5px 0 10px;
  83.         font-size: 10px;
  84.         text-align: justify;
  85.     }
  86.     
  87.     .cuerpo a {
  88.         color: #7b0e12;
  89.         text-decoration: underline;
  90.         font-size: 9px;
  91.     }
  92.     
  93.     .contenido {
  94.         display: table;
  95.         width: 510px;
  96.         padding: 10px;
  97.         margin-bottom: 10px;
  98.         vertical-align: text-top;
  99.     }
  100.     
  101.     .contenido .foto {
  102.         width: 100px;
  103.         margin: 0 15px 0 0;
  104.         padding-bottom: 10px;
  105.         float: left;
  106.     }
  107.     
  108.     .contenido .texto {
  109.         width: 480px;
  110.         padding: 0 0 0 15px;
  111.         font-size: 10px;
  112.         text-align: justify;
  113.     }
  114.     
  115.     .contenido .texto h2 {
  116.         margin-top: 0px;
  117.         color: #ba5209;
  118.         font-size: 12px;
  119.     }
  120.     
  121.     /*
  122.      .contenido p{
  123.      font-size:10px;
  124.      padding:0 0 35px 0;
  125.      text-align:justify;
  126.      }
  127.      */
  128.     .footer {
  129.         background-color: #edc8a4;
  130.         color: #000;
  131.         font-size: 10px;
  132.         text-align: left;
  133.         padding: 10px 15px 10px 15px;
  134.         line-height: 1.5em;
  135.     }
  136. </style>
  137.  
  138. </head>
abajo dejo el html
  #2 (permalink)  
Antiguo 27/11/2009, 08:18
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 5 meses
Puntos: 43
Respuesta: alinear imagen y texto
el html es:
Código html: 
Ver original
  1. <body>
  2.     <div class="wraper">
  3.         <div class="cabecera">
  4.             <span class="novedades">NOVEDADES</span>
  5.             <span class="sep">&nbsp;</span>
  6.             <span class="fecha">Boletin Enero</span>
  7.             <span class="sep">&nbsp;</span>
  8.             <span class="anio">20<br/>10</span>
  9.             <span class="sep">&nbsp;</span>
  10.             <!--<span class="anio1">10</span>-->
  11.         </div>
  12.         
  13.         <div class="cuerpo">
  14.                        <div class="imagen">
  15.                             <img src="http://www.oniricosistemas.com.ar/proyectos/images/imagen_newsletter.jpg" alt=""/>
  16.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit ligula, suscipit in facilisis id, blandit ac sapien. Maecenas neque justo, laoreet eget luctus a, malesuada quis magna. Vivamus vehicula leo eleifend nisi laoreet accumsan. Phasellus consectetur ultricies erat at commodo. Mauris malesuada aliquet ullamcorper. Duis vel egestas tellus. Phasellus semper ultrices imperdiet. Ut condimentum porta dolor. Ut porttitor dolor in turpis auctor et convallis justo fringilla. Morbi vitae odio massa. Aenean sit amet elit mauris, vel dignissim purus. Morbi rutrum porttitor erat id tempor. Ut neque mauris, ullamcorper vitae luctus laoreet, consectetur eu neque. Nulla facilisi. Mauris eget nisl at nisl laoreet tristique eu vitae orci. Suspendisse a arcu ligula, quis <a href="#">malesuada metus.</a> </p>
  17.  
  18.                         </div><h2 class="seccion">Noticias de la semana</h2>
  19.             <hr /><div class="contenido">
  20.                     <div class="foto">
  21.                         <img src="http://www.oniricosistemas.com.ar/proyectos/images/not_0609_f.gif" alt="test 1"/>
  22.                     </div>
  23.                     <div class="texto">
  24.                         <h2>test 1</h2>
  25.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus rutrum elit, id fermentum erat posuere in. Quisque et sem nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia eros in libero congue non cursus nibh viverra. In placerat, purus a aliquet porttitor, dolor elit scelerisque lacus, sit amet dignissim turpis enim ut nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu nisl enim. Curabitur orci ante, porta et tempor ut, hendrerit sed risus. Cras quam nisi, imperdiet quis gravida non, fringilla sed sapien. Pellentesque vel bibendum justo. Etiam eros mi, gravida non adipiscing eu, vulputate id tellus. Ut ultrices aliquam volutpat. Duis dapibus magna sit amet elit aliquet laoreet sodales felis condimentum. Pellentesque ac odio tempor leo imperdiet tempor eu id ipsum.</p><a href="http://www.oniricosistemas.com.ar/proyectos/index.php?modules=a&amp;opcion=ver&amp;id
  26.  =1">más
  27. información</a>
  28.  
  29.                     </div>
  30.                     <hr />
  31.                 </div> <h2 class="seccion">Artículos de la semana</h2>
  32.             <hr /><div class="contenido">
  33.                     <div class="foto">
  34.                         <img src="http://www.oniricosistemas.com.ar/proyectos/images/art_imagen_art2_websa100.jpg" alt="TU SITIO WEB PARA HACER VENTAS."/>
  35.                     </div>
  36.  
  37.                     <div class="texto">
  38.                         <h2>TU SITIO WEB PARA HACER VENTAS.</h2>
  39.                         <p style="text-align: justify;">Hay tres aspectos b&aacute;sicos a considerar antes de crear tu sitio web destinado a hacer negocios en la red.</p>
  40. <p style="text-align: justify;">1. &iquest;Qui&eacute;nes van a ser tus clientes?<br />
  41. 2. &iquest;C&oacute;mo te van a encontrar?<br />
  42.  
  43. 3. &iquest;C&oacute;mo planeas convertir tu tr&aacute;fico en ventas?...<br />
  44. &nbsp;</p><a href="http://www.oniricosistemas.com.ar/proyectos/index.php?modules=articulos&amp;opcion=ver&amp;id=2">más información</a>
  45.                     </div>
  46.                     <hr />
  47.                 </div> 
  48.                     
  49.                 </div> <div class="contenido">
  50.                     <div class="foto">
  51.                         <img src="http://www.oniricosistemas.com.ar/proyectos/images/art_imagen_art5_websa100.jpg" alt="¿UNA IMAGEN O MIL PALABRAS?"/>
  52.                     </div>
  53.                     <div class="texto">
  54.                         <h2>¿UNA IMAGEN O MIL PALABRAS?</h2>
  55.                         <p style="text-align: justify;">Es uno de los dilemas tradicionales de la Pyme. &iquest;Hago mil folletos o un v&iacute;deo? &iquest;Qu&eacute; es m&aacute;s rentable? Adem&aacute;s de estar presente en la web, &iquest;qu&eacute; otros elementos promocionales puedo manejar?...<br />
  56.  
  57. &nbsp;</p><a href="http://www.oniricosistemas.com.ar/proyectos/index.php?modules=articulos&amp;opcion=ver&amp;id=5">más información</a>
  58.                     </div>
  59.                     <hr />
  60.                 </div> <div class="contenido">
  61.                     <div class="foto">
  62.                         <img src="http://www.oniricosistemas.com.ar/proyectos/images/art_imagen_art6_websa100.jpg" alt="DICCIONARIO DE TERMINOS DE INTERNET PARA PYMES"/>
  63.                     </div>
  64.  
  65.                     <div class="texto">
  66.                         <h2>DICCIONARIO DE TERMINOS DE INTERNET PARA PYMES</h2>
  67.                         <p style="text-align: justify;">El uso de Internet requiere de un m&iacute;nimo de conocimientos b&aacute;sicos que nos permitan &ldquo;navegar&rdquo; por la red con el m&aacute;ximo aprovechamiento. A fin de que nuestros clientes entiendan mejor alguno de los t&eacute;rminos que se suelen emplear en Internet hemos preparado este sencillo diccionario que recoge las palabras o expresiones m&aacute;s usadas. Hay muchas m&aacute;s, y por ello, al final recomendamos otras webs de consulta que complementen esta.<br />
  68.  
  69. &nbsp;</p><a href="http://www.oniricosistemas.com.ar/proyectos/index.php?modules=articulos&amp;opcion=ver&amp;id=6">más información</a>
  70.                     </div>
  71.                     <hr />
  72.                 </div> <div class="contenido">
  73.                     <div class="foto">
  74.                         <img src="http://www.oniricosistemas.com.ar/proyectos/images/art_images_art7_websa100.jpg" alt="QUÉ ES UN DOMINIO Y TIPOS DE DOMINIOS"/>
  75.                     </div>
  76.  
  77.                     
  78.                 </div> <div class="contenido">
  79.                     <div class="foto">
  80.  
  81.                         <img src="http://www.oniricosistemas.com.ar/proyectos/images/art_imagen_art7_websa100.jpg" alt="CÓMO CONSEGUIR VISITAS A MI WEB"/>
  82.                     </div>
  83.                     <div class="texto">
  84.                         <h2>CÓMO CONSEGUIR VISITAS A MI WEB</h2>
  85.                         <p style="text-align: justify;">Entender c&oacute;mo funcionan los buscadores de Internet y, sobre todo, Google es fundamental para lograr visitas, y por tanto, potenciales clientes para nuestra web y nuestro negocio. Utilizando una serie de t&eacute;cnicas podremos mejorar sustancialmente la posici&oacute;n de nuestra web en Internet. D&eacute;jenos aconsejarle sobre la m&aacute;s adecuada para su web, si bien es importante tener algunos conocimientos b&aacute;sicos sobre la promoci&oacute;n web&hellip;</p><a href="http://www.oniricosistemas.com.ar/proyectos/index.php?modules=articulos&amp;opcion=ver&amp;id=9">más información</a>
  86.  
  87.                     </div>
  88.                     <hr />
  89.                 </div> <div class="contenido">
  90.                     <div class="foto">
  91.                         <img src="http://www.oniricosistemas.com.ar/proyectos/images/art_imagen_art1_websa100.jpg" alt="¿POR QUÉ MI NEGOCIO NECESITA UNA WEB?"/>
  92.                     </div>
  93.                     <div class="texto">
  94.                         <h2>¿POR QUÉ MI NEGOCIO NECESITA UNA WEB?</h2>
  95.  
  96.                         <p style="text-align: justify;">En Espa&ntilde;a aproximadamente el 50% de las PYMES no dispone de una web corporativa propia, aunque m&aacute;s del 75% posee conexi&oacute;n a Internet, seg&uacute;n datos del Ministerio de Industria, Turismo y Comercio. Parece que los peque&ntilde;os empresarios y los aut&oacute;nomos espa&ntilde;oles usan y disfrutan de la red pero piensan que ese negocio &ldquo;no es para ellos&rdquo;.</p><a href="http://www.oniricosistemas.com.ar/proyectos/index.php?modules=articulos&amp;opcion=ver&amp;id=1">más información</a>
  97.                     </div>
  98.  
  99.                     <hr />
  100.                 </div> <h2 class="seccion">Contenido de la semana</h2>
  101.             <hr /><div class="contenido">
  102.                     <div class="foto">
  103.                         <img src="http://www.oniricosistemas.com.ar/proyectos/images/websa100.gif" alt="prueba titulo"/>
  104.                     </div>
  105.                     
  106.                     <hr />
  107.                 </div> <br class="sep"/>
  108.  
  109.         </div>
  110.         <div class="footer">
  111.             En cumplimiento de la Ley Orgánica 15/1999, de 13 de Diciembre, de Protección de Datos de Carácter Personal, le informamos que al mandar este formulario está autorizando a webs@100 a utilizar estos datos para contactarle. Los datos recogidos se incorporarán a un archivo automatizado titularidad de webs@100 con domicilio en la calle Jalisco, 25; 28220 Majadahonda (Madrid). Estos datos se tratarán confidencialmente y de acuerdo con lo establecido en la Ley Orgánica 15/1999, de 13 de diciembre, de modo que los usuarios podrán acceder, rectificar y cancelar sus datos así como ejercitar su derecho de oposición dirigiéndose a la dirección electrónica: [email protected]
  112.         </div>
  113.     </div>  
  114. </body>
  115. </html>
  #3 (permalink)  
Antiguo 27/11/2009, 08:41
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: alinear imagen y texto
aplicale un margin-left, lo suficiente para no envolver la imagen, al selector .contenido .texto. tambien tienes que ajustar el ancho luego de aplicar el margen.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #4 (permalink)  
Antiguo 27/11/2009, 08:55
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 5 meses
Puntos: 43
Respuesta: alinear imagen y texto
muchisimas gracias funciono, lo que es ser bruto jejeje.
Ahora otra consulta, porque el código en hotmail se ve mal? no me muestra esta imagen:
background-image: url(cabecera-newsletter.jpg); y en thunderbird, outlook y otros webmail se ve bien, incluso muestra descentrados los <hr/> :S
  #5 (permalink)  
Antiguo 27/11/2009, 09:07
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: alinear imagen y texto
no tengo experiencia en envio de contenido html por correos electronicos (lo que sabia era de hacen 5 años o mas) de modo que no se si las cosas han cambiado o sigue siendo igual. en todo caso, supongo que sera porque tiene una ruta relativa y por ende no puede localizar la imagen. tienes que asignar siempre rutas absolutas.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #6 (permalink)  
Antiguo 27/11/2009, 09:42
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 5 meses
Puntos: 43
Respuesta: alinear imagen y texto
yo armo asi la ruta:
Código php: 
Ver original
  1. echo'
  2. .wraper .cabecera {
  3.                     background-image: url('.$url.'images/cabecera-newsletter.jpg);
  4.                     height: 162px;
  5.                 }';

y $url viene con:
Código php: 
Ver original
  1. $url="http://www.oniricosistemas.com.ar/proyectos/";
  #7 (permalink)  
Antiguo 27/11/2009, 10:30
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: alinear imagen y texto
Hola,

Desde mi experiencia cuando se diagrama html para envio por correo debes olvidarte de la semantica, los estandares web, validaciones, etc., y hacerlo todo en tablas, muchas propiedades de css no son adecuadamente interpretadas por los clientes de correo (no es totalmente seguro usar imagenes como background por ejemplo), el css debe estar embebido en los tags de html, en fin es como volver a los viejos tiempos cuando las tablas eran lo unico que habia para maquetar.

Saludos
  #8 (permalink)  
Antiguo 27/11/2009, 11:07
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 5 meses
Puntos: 43
Respuesta: alinear imagen y texto
ok josdelaranda, muchas gracias intentare armarlo con tablas a ver que sale.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:04.