Foros del Web » Creando para Internet » CSS »

Problema de maquetacion

Estas en el tema de Problema de maquetacion en el foro de CSS en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 15/03/2009, 06:28
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Problema de maquetacion

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.
  #2 (permalink)  
Antiguo 15/03/2009, 07:06
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema de maquetacion

Hola:

Prueba flotando la segunda imagen a la derecha.

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

  #3 (permalink)  
Antiguo 15/03/2009, 07:25
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Respuesta: Problema de maquetacion

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.
  #4 (permalink)  
Antiguo 15/03/2009, 08:07
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: Problema de maquetacion

ponele float al piecabecera

o dale un tamaño
  #5 (permalink)  
Antiguo 15/03/2009, 08:09
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: Problema de maquetacion

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>
  #6 (permalink)  
Antiguo 15/03/2009, 09:25
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Respuesta: Problema de maquetacion

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
  #7 (permalink)  
Antiguo 15/03/2009, 10:07
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Sonrisa Respuesta: Problema de maquetacion

Cita:
Iniciado por Ratus-BROWN Ver Mensaje
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.
__________________
Marcos.
  #8 (permalink)  
Antiguo 15/03/2009, 11:58
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Respuesta: Problema de maquetacion

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
  #9 (permalink)  
Antiguo 15/03/2009, 12:09
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema de maquetacion

Cita:
Iniciado por Ratus-BROWN Ver Mensaje
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.

  #10 (permalink)  
Antiguo 15/03/2009, 12:25
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Respuesta: Problema de maquetacion

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.
  #11 (permalink)  
Antiguo 15/03/2009, 13:04
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Problema de maquetacion

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>
__________________
Marcos.
  #12 (permalink)  
Antiguo 15/03/2009, 13:17
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Respuesta: Problema de maquetacion

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.........
  #13 (permalink)  
Antiguo 15/03/2009, 13:22
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Problema de maquetacion

Bueno, subí la web a un servidor y pasanos el link así lo miramos.
__________________
Marcos.
  #14 (permalink)  
Antiguo 15/03/2009, 15:16
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema de maquetacion

Cita:
Iniciado por Ratus-BROWN Ver Mensaje
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.

  #15 (permalink)  
Antiguo 15/03/2009, 15:42
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Respuesta: Problema de maquetacion

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
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 09:44.