Mejor metodo para maquetar esto???

Dustito · #1 (**permalink**) 12/03/2009, 10:25

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!!

Hocker · #2 (**permalink**) 12/03/2009, 10:35

Si pones el codigo es mas facil que te ayudemos

Dustito · #3 (**permalink**) 12/03/2009, 10:43

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; 
	}

willyfc · #4 (**permalink**) 12/03/2009, 10:49

fijate si te sirve de esta manera:

Código html:

Ver original<!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>Documento sin t&iacute;tulo</title>
<style type="text/css">
.contenedor{width:500px; height:auto; overflow:auto; border:1px solid #333; margin:0 auto;}
</style>
</head>
 
<body>
<div class="contenedor">
    <img src="imagenes/menu_principal/boletin_cafe.jpg" width="115" height="115" style="float:right;" />
    <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>
    <img src="imagenes/menu_principal/boletin_cafe.jpg" width="115" height="115" style="float:left;" />
     <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>
</div>
</body>
</html>

Dustito · #5 (**permalink**) 12/03/2009, 11:13

muchas gracias willy eso es lo que queria