Problema de maquetacion

Ratus-BROWN · #1 (**permalink**) 15/03/2009, 05:28

Hola buenas a todos/as,

tengo un problemilla que no se como solucionarlo, se trata de lo siguiente:

<div id="piecabecera"><img src="img/beach.jpg" width="400" height="166">
<img src="img/icono.png" width="129" height="166"></div>

#piecabecera {
margin-left:260px;
}

tengo un DIV con dos imagenes dentro, la primera img "beach" esta puesta a 260px de margin-left con CSS y la siguiente se llama "icono" el problema viene al querer poner el icono a la derecha del todo de la pagina. He probado meter dentro del DIV de piecabecera otro DIV que encierre a la imagen icono, pero cuando hago esto me pone la imagen debajo de la de "beach" asi que he decidio meter las dos imagenes dentro del mismo DIV.......¿pero como puedo colocar la segunda imagen "icono" a la derecha del todo en el mismo DIV "piecabecera"?

Saludos y gracias.
R,Brown.

jomaruro · #2 (**permalink**) 15/03/2009, 06:06

Hola:

Prueba flotando la segunda imagen a la derecha.

Código:

<img src="img/icono.png" style="width:129px; height:166px; float:right;">

Saludos.

Ratus-BROWN · #3 (**permalink**) 15/03/2009, 06:25

Hola Jomaruro,

gracias por el consejo, no habia pensado en los estilos en linea, .....ahora ya flota la imagen a la derecha.......pero me la coloca debajo del DIV, es decir a la derecha pero debajo del DIV donde esta contenida......¿a que es debido esto?

Gracias.

Newbie001 · #4 (**permalink**) 15/03/2009, 07:07

ponele float al piecabecera

o dale un tamaño

talmente · #5 (**permalink**) 15/03/2009, 07:09

Yo lo haría así:

Código:

#imag1 {
	float: left;
	padding-left: 5px;
	padding-top: 10px;
}
#imag2 {
	float: right;
	padding-top: 10px;
	padding-right: 5px;
}
div {
	background: #0099FF;
	float: left;
	width: 100%;
}

HTML:
<div><img src="imagen
/tu_imag.png" alt="" id="imag1" /><img src="imagen/tu_otra_imag.png" alt="" id="imag2" /></div>

Ratus-BROWN · #6 (**permalink**) 15/03/2009, 08:25

Gracias a todos, ya he conseguido poner el icono a la derecha en el div.........pero ahora me surge otra duda.........es lo siguiente: Quiero que al hacer mas pequeño el browser no se me deforme la pagina.....lo consigo para todos los elemento.....esto lo hago dando a cada DIV un ancho y un alto fijo, de forma que cuando hago mas pequeño el browser simplemente solo se ve la porcion que dejo mostrar, pero no se ajustan al tamaño del browser..........el problema es que ahora cuando hago mas pequeño el browser.......una de las imagenes del DIV se me recoloca abajo......no quiero que ocurra esto.......¿que puedo hacer para que los contenidos no se "autocoloquen" segun el tamaño del browser?............no se si me explico bien......

Gracias.
R,Brown

marcosnc_08 · #7 (**permalink**) 15/03/2009, 09:07

Cita:

Iniciado por Ratus-BROWN

Gracias a todos, ya he conseguido poner el icono a la derecha en el div.........pero ahora me surge otra duda.........es lo siguiente: Quiero que al hacer mas pequeño el browser no se me deforme la pagina.....lo consigo para todos los elemento.....esto lo hago dando a cada DIV un ancho y un alto fijo, de forma que cuando hago mas pequeño el browser simplemente solo se ve la porcion que dejo mostrar, pero no se ajustan al tamaño del browser..........el problema es que ahora cuando hago mas pequeño el browser.......una de las imagenes del DIV se me recoloca abajo......no quiero que ocurra esto.......¿que puedo hacer para que los contenidos no se "autocoloquen" segun el tamaño del browser?............no se si me explico bien......

Gracias.
R,Brown

Coloca la dos imágenes en div con un ancho y alto fijo.

Ratus-BROWN · #8 (**permalink**) 15/03/2009, 10:58

Hola Marcosnc_08,

te comento lo que he hecho, porque aún poniendo un ancho y alto fijo se me deforma la web al hacer mas pequeño el browser:

<div id=contenedor>
<img src="img/icono.png" width="129" style="float:right;" height="166" border="0" />
<img src="img/beach.jpg" width="400" style="margin-left:260px;" height="166" border="0" />
</div>

estas son las lineas en Html, se trata de dos imagenes en un DIV, una esta posicionada a 260 px por la izquierda y la otra imagen esta posicionada al otro lado del DIV en la derecha.

Para el control del DIV "contenedor" uso esta regla CSS:

#contenedor {
margin-left:auto;
margin-right:auto;
border:solid #CC0000;
height:166px;
}

pues aun teniendo la altura fija.....al mover el browser se me descoloca la imagen "beach.jpg" y se pone abajo........ya no se que hacer, porque he visto páginas (las de este foro mismo) que cuando muevo el browser todo se queda en su sitio.....

Gracias
R,brown

jomaruro · #9 (**permalink**) 15/03/2009, 11:09

Cita:

Iniciado por Ratus-BROWN

Hola Jomaruro,

gracias por el consejo, no habia pensado en los estilos en linea, .....ahora ya flota la imagen a la derecha.......pero me la coloca debajo del DIV, es decir a la derecha pero debajo del DIV donde esta contenida......¿a que es debido esto?

Gracias.

Hola:

Posiblemente a que el tamaño de las dos imágenes es mayor que el div que las contiene.

Saludos.

Ratus-BROWN · #10 (**permalink**) 15/03/2009, 11:25

Si ya se lo que quieres decir Jamuro, pero es que el DIV crece si aumentamos el tamaño del browser, lo que quiero es que al contrario respete las cosas en su posicion y no las descoloque al hacer mas pequeña la ventana del browser.

Saludos

Gracias.

marcosnc_08 · #11 (**permalink**) 15/03/2009, 12:04

Proba poner así:

Código:

<div id=contenedor>
<img src="img/icono.png" width="129px" style="float:right;" height="166px" border="0" />
<img src="img/beach.jpg" width="400px" style="margin-left:260px;" height="166px" border="0" />
</div>

Ratus-BROWN · #12 (**permalink**) 15/03/2009, 12:17

Muchas gracias marcosnc_08, pero sigue sin funcionar correctamente..............he podido comprobar que se me desmonta todo cuando pongo la otra imagen flotada a la derecha, es decir si quito la imagen flotada a la derecha, cuando muevo el browser para que sea mas pequeño la imagen de la playa no se desplaza hacia ningun lado.....asi que la inconsistencia viene cuando floto la otra imagen a la derecha.........

marcosnc_08 · #13 (**permalink**) 15/03/2009, 12:22

Bueno, subí la web a un servidor y pasanos el link así lo miramos.

jomaruro · #14 (**permalink**) 15/03/2009, 14:16

Cita:

Iniciado por Ratus-BROWN

Si ya se lo que quieres decir Jamuro, pero es que el DIV crece si aumentamos el tamaño del browser, lo que quiero es que al contrario respete las cosas en su posicion y no las descoloque al hacer mas pequeña la ventana del browser.

Pero si la ventana del browser es más pequeña habrá menos sitio para unas imagenes que tienen un tamaño fijo, entonces el div decrece pero las imágenes no que es lo que hace que se descoloque la página. Lo que necesitas es una página con diseño líquido, léete este artículo a ver si te sirve.

Saludos.

Ratus-BROWN · #15 (**permalink**) 15/03/2009, 14:42

Hola buenas noches a todos,

dejo un link aqui con la pagina para que veais lo que ocurre, el icono de la derecha resbala por debajo de la foto, lo que quiero es que no resbale por debajo:

viviendascostablanca.com/inicio.html

Gracias Jomaruro por el articulo, lo leere detenidamente.

Gracias