Foros del Web » Creando para Internet » CSS »

No sé cómo lograr que foto y texto queden así:

Estas en el tema de No sé cómo lograr que foto y texto queden así: en el foro de CSS en Foros del Web. Hola gente; tengo un problemita, y es que no puedo lograr esto: (la imagen está en: http://www.bahiamemata.com.ar/pruebas/jpg.jpg ) Tengo armado esto Código HTML: <div class= ...
  #1 (permalink)  
Antiguo 16/05/2008, 17:33
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
No sé cómo lograr que foto y texto queden así:

Hola gente; tengo un problemita, y es que no puedo lograr esto:


(la imagen está en: http://www.bahiamemata.com.ar/pruebas/jpg.jpg)

Tengo armado esto

Código HTML:
 <div class="tituloopinion">
	  <p><span class="tituopi">Título de la nota</span></p>
	  <p>&nbsp;</p>
	  <p><span class="autoropi">Lic. Hugo V. Gonzalez</span>
      </p>
    </div>
	<div id="textoopina">
        <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam arcu  risus, scelerisque quis, placerat id, facilisis ut, nisl. Etiam  tincidunt neque sit amet enim bibendum accumsan. Duis imperdiet neque.  Donec nisi leo, rhoncus a, tristique sit amet, ultrices vel, arcu.  Vivamus sed urna vitae magna elementum blandit. Aenean id ipsum. Etiam  sit amet felis in enim consectetuer venenatis. Nullam vulputate porta  justo. Aliquam erat volutpat. Nulla vel nisi. Mauris pellentesque  consectetuer est. In hac habitasse platea dictumst. Quisque congue ante  at justo. Morbi consectetuer, libero bibendum tincidunt consectetuer,  mi eros lacinia nulla, eget gravida sem arcu et metus. Cum sociis  natoque penatibus et magnis dis parturient montes, nascetur ridiculus  mus. Sed laoreet cursus urna. </p>
	    <p>Mauris vehicula ultrices nibh. Sed molestie euismod quam. Mauris  tincidunt diam vitae arcu. Aliquam neque tortor, suscipit ut, faucibus  ac, dignissim nec, augue. Ut elit nisi, vehicula a, convallis nec,  porttitor eu, sem. Integer euismod mi et nibh. Ut eget diam ut mi  mattis ultrices. Cras gravida rutrum diam. Praesent et mi id purus  posuere viverra. Morbi lacus odio, faucibus luctus, pharetra sit amet,  fermentum eu, enim. Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per inceptos himenaeos. Ut non turpis vitae dolor  tincidunt tempus. Aliquam consectetuer. Vivamus tincidunt scelerisque  tellus. Praesent posuere fermentum felis. Nunc luctus sem eget sapien.  Etiam metus. Praesent mollis justo sit amet risus. Cras urna. Lorem  ipsum dolor sit amet, consectetuer adipiscing elit. </p>
	    <p>Donec elit turpis, dignissim vel, aliquam sit amet, cursus nec,  felis. Phasellus faucibus tincidunt arcu. Nunc laoreet eros eget risus.  Maecenas orci urna, commodo et, elementum quis, lacinia et, enim. Donec  neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia Curae; Sed eu ligula sed eros aliquet fringilla.  Phasellus massa. Cras varius. Pellentesque tempor ipsum non odio. </p>
	    <p>Sed dignissim tempus risus. Fusce semper ligula sed sem. Fusce  sapien elit, laoreet a, interdum id, vehicula ac, arcu. Aliquam auctor  fermentum enim. Nunc aliquam. Phasellus mollis. Fusce pellentesque  venenatis nunc. Proin nec turpis ut lacus accumsan tempor. Maecenas ut  purus non neque ultricies rutrum. Donec euismod dolor eu dui. Sed non  mi sed augue cursus mattis. Praesent fringilla tellus non erat. </p>
	    <p>Vivamus ut urna. Donec ante eros, fringilla ac, sodales vel,  consectetuer tempus, nulla. Aenean tincidunt leo a orci. Nulla  facilisi. Donec gravida iaculis leo. Vestibulum blandit, lectus  pellentesque imperdiet facilisis, nisl turpis ultricies turpis, et  malesuada sapien arcu in arcu. Nunc in dui eu leo blandit accumsan. Ut  risus velit, vestibulum non, elementum in, rhoncus et, magna. Phasellus  vitae nibh. Pellentesque vehicula. Maecenas scelerisque nunc. Fusce eu  lacus. Sed et lorem sed libero ullamcorper vulputate. Vivamus dignissim  nulla nec mauris. Quisque consequat turpis vitae enim. Integer ante  orci, auctor blandit, tempus at, facilisis in, tortor. Maecenas auctor  sollicitudin sapien. Suspendisse tellus nunc, interdum semper, euismod  vel, faucibus et, sapien. </p>
	</div>
	<div id="fotoopina"><img src="fotos/opinion.jpg" />
	</div> 
con esta hoja de estilos, pero claro, no camina:

Código HTML:
.tituloopinion
{
background-image:url(elementos/new/opinion-fondo-titulo.jpg);
height:80px;
width:450px;
padding-top:10px;
}

.tituopi
{
font-size:28px;
font-weight:bold;
color:#FFFFFF;
float:left;
margin-left:5px;
clear:both;
}

.autoropi
{
font-size:16px;
color:#FFFFFF;
float:right;
margin-right:10px;
font-weight:bold;

}

#fotoopina
{
float:left;
width:550px;

}
alguien puede tirarme un cable?
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar

Última edición por arielcasanova; 16/05/2008 a las 17:36 Razón: error en fragmento de código
  #2 (permalink)  
Antiguo 16/05/2008, 17:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: No sé cómo lograr que foto y texto queden así:

Hola, arielcasanova.

Podrías probarlo así:

<div id="fotoopina"><img src="fotos/opinion.jpg" /></div>
<div class="tituloopinion">
<p><span class="tituopi">Título de la nota</span></p>
<p>&nbsp;</p>
<p><span class="autoropi">Lic. Hugo V. Gonzalez</span>
</p>
</div>
<div id="textoopina">
<p> Lorem ipsum ... </p>
</div>

Y con el css:

#fotoopina{float:right; width:550px; }

Y sin float left en ninguno de los otros selectores.

Es decir: se trata de poner primero la caja de la derecha flotada a la derecha y luego las otras dos sin flotar. Creo que de esa manera quedará como quieres (o casi).

Mikel.
  #3 (permalink)  
Antiguo 19/05/2008, 07:40
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: No sé cómo lograr que foto y texto queden así:

EA!!! Muchísimas gracias mikel, funcionó al pelete.
un saludo.,
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
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 17:08.