Foros del Web » Creando para Internet » CSS »

Mejor metodo para maquetar esto???

Estas en el tema de Mejor metodo para maquetar esto??? en el foro de CSS en Foros del Web. Hola queria consejo pq lo estoy intentando y no me sale.. Estoy intentado maquetar un texto y saldria una imagen arriba a la derecha y ...
  #1 (permalink)  
Antiguo 12/03/2009, 11:25
 
Fecha de Ingreso: abril-2008
Mensajes: 143
Antigüedad: 9 años, 8 meses
Puntos: 0
Mejor metodo para maquetar esto???

Hola queria consejo pq lo estoy intentando y no me sale..

Estoy intentado maquetar un texto y saldria una imagen arriba a la derecha y otra abajo a la izquierda, la imagen de la derecha si lo consigo me la coloca con un float right y el texto aparece a la izquierda y abajo de la imagen...

Sin embargo la imagen de la izquierda al hacer float left me sale a la izquierda arriba, la bajo con un margin pero el texto ya no se mete arriba de la imagen...

Alguien sabe como puedo hacer esto que quiero?? un saludo!!
  #2 (permalink)  
Antiguo 12/03/2009, 11:35
 
Fecha de Ingreso: marzo-2009
Mensajes: 50
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Mejor metodo para maquetar esto???

Si pones el codigo es mas facil que te ayudemos
  #3 (permalink)  
Antiguo 12/03/2009, 11:43
 
Fecha de Ingreso: abril-2008
Mensajes: 143
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Mejor metodo para maquetar esto???

html:

Código HTML:
<div id="principal">
        <div id="imagen1">
    	<h3>Portal Favorita</h3>
    	</div>
        <div id="imagen2">
    	<h3>Ambiente Favorita</h3>
    	</div>
		<H1>Introduccion</H1>
		texto
</div> 
css:

Código:
#principal{
margin-left: 64px; 
padding: 1px 0px 0px 5px; 
}

#imagen1 {
	width:150px;
	height:100px;
	text-indent:-9999px;
	background:url(images/IMG_1636.jpg);
	float:right;
	margin: 40px 10px 0 10px;
	border: 1px solid #000000; 
	}

#imagen2 {
	width:150px;
	height:100px;
	text-indent:-9999px;
	background:url(images/IMG_1632.jpg);
	float:left;
	margin: 200px 10px 0 10px;
	border: 1px solid #000000; 
	}
  #4 (permalink)  
Antiguo 12/03/2009, 11:49
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Mejor metodo para maquetar esto???

fijate si te sirve de esta manera:

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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. .contenedor{width:500px; height:auto; overflow:auto; border:1px solid #333; margin:0 auto;}
  7. </head>
  8.  
  9. <div class="contenedor">
  10.     <img src="imagenes/menu_principal/boletin_cafe.jpg" width="115" height="115" style="float:right;" />
  11.     <p>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </p>
  12.     <img src="imagenes/menu_principal/boletin_cafe.jpg" width="115" height="115" style="float:left;" />
  13.      <p>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  14. </div>
  15. </body>
  16. </html>
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 12/03/2009, 12:13
 
Fecha de Ingreso: abril-2008
Mensajes: 143
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Mejor metodo para maquetar esto???

muchas gracias willy eso es lo que queria
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 03:19.