Foros del Web » Creando para Internet » HTML »

dilema con layout

Estas en el tema de dilema con layout en el foro de HTML en Foros del Web. hola [email protected], tengo el diseño de una web, pero no se como realizarlo porque es un poco complicado (para mi) y todo lo que he ...
  #1 (permalink)  
Antiguo 07/04/2008, 18:44
 
Fecha de Ingreso: octubre-2007
Ubicación: barcelona
Mensajes: 10
Antigüedad: 10 años, 1 mes
Puntos: 0
dilema con layout

hola [email protected],

tengo el diseño de una web, pero no se como realizarlo porque es un poco complicado (para mi) y todo lo que he probado no me funciona.

El diseño es sencillo:
se trata de un div contenedor con dos divs dentro, uno de ancho fijo que va enganchado siempre a la derecha (caja02), y el otro, tb de ancho fijo, va centrado en el espacio sobrante de la izquierda (caja01).


Pues no se como hacer que el de la izquierda (caja01) se centre en el espacio sobrante, he probado flotando la caja02 a la derecha para que siempre este enganchada a la derecha, pero no se como continuar para centrar la caja01 en el espacio sobrante de la izquierda... estoy liadisima, como puedo hacer realidad este diseño?? es bien sencilla la idea, pero no consigo trasladarlo al css

creo que tanto rato dandole vueltas me esta volviendo loca...

muchas gracias!
  #2 (permalink)  
Antiguo 07/04/2008, 18:50
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
Re: dilema con layout

Hola, Matahari (buen nick, da un poco de miedo contestar )

¿Por qué no pones lo que tienes ahora de html y css para ver cuál podría ser la solución? Es que tal caja de un ancho fijo, la otra también... sin ver las medidas es un poco complicado.

Mikel.
  #3 (permalink)  
Antiguo 08/04/2008, 03:21
 
Fecha de Ingreso: octubre-2007
Ubicación: barcelona
Mensajes: 10
Antigüedad: 10 años, 1 mes
Puntos: 0
Re: dilema con layout

hola,

no puedo poner lo que tengo porque es demasiado complicado, pero os pongo un ejemplo:

Código:
<!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>Untitled Document</title>
<style type="text/css">
<!--

#caja01 {
	height: 100px;
	width: 250px;
}

#caja02 {
	height: 500px;
	width: 600px;
}
-->
</style>
</head>

<body>

<div id="container">
<div id="caja01">
</div>
<div id="caja02">
</div>
</div>

</body>
</html>
El tema es que quisiera que la caja02 estuviese siempre pegada a la derecha, y la caja01 estuviese centrada en el espacio sobrante de la izquierda.

Gracias por la ayuda,
pero no encuentro un sistema por mi sola.

Gracias!!!

PD: se puede con javascript o css3 p.e. "width: 100% - 600px" ?? Gracias!!
  #4 (permalink)  
Antiguo 08/04/2008, 03:24
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
Re: dilema con layout

¿Y qué tamaño tiene "container"? ¿será fluido? ¿porcentaje? ¿exacto?
Porque ahí radica la cuestión.

Mikel.
  #5 (permalink)  
Antiguo 08/04/2008, 03:28
 
Fecha de Ingreso: octubre-2007
Ubicación: barcelona
Mensajes: 10
Antigüedad: 10 años, 1 mes
Puntos: 0
Re: dilema con layout

pues en principio habia puesto 100%
  #6 (permalink)  
Antiguo 08/04/2008, 03:38
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
Re: dilema con layout

Vale, pues entonces podrías usar este código, que se basa en que la caja derecha está flotada a la derecha, la de la izquierda sin flotar, y el centrado lo marcas con los márgenes:

Cita:
<!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" lang="es-es">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
#caja01 { border-style: solid;
border-color: rgb(255, 102, 0);
height: 100px;
background-color: rgb(51, 153, 153);
margin-right: 210px;
margin-left: 4px;
}

#caja02 { border-style: solid;
border-color: rgb(255, 102, 0);
height: 500px;
background-color: rgb(51, 102, 102);
float: right;
width: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="caja02"></div>
<div id="caja01"></div>
</div>
</body>
</html>
Te he puesto bordes para que lo veas claramente. Recuerda que si los quitas, las cantidades de margen hay que retocarlas.

Espero que te sirva para adaptarlo a tu caso.

Mikel.
  #7 (permalink)  
Antiguo 08/04/2008, 03:42
 
Fecha de Ingreso: octubre-2007
Ubicación: barcelona
Mensajes: 10
Antigüedad: 10 años, 1 mes
Puntos: 0
Re: dilema con layout

voy a probarlo en mi caso,

muchas gracias mikel!!
  #8 (permalink)  
Antiguo 08/04/2008, 03:52
 
Fecha de Ingreso: octubre-2007
Ubicación: barcelona
Mensajes: 10
Antigüedad: 10 años, 1 mes
Puntos: 0
Re: dilema con layout

pues no me funciona del todo bien. He introducido una subcaja dentro de caja01, y he intentado centrarla mediante margin auto, pero no me funciona, dejo el codigo con la subcaja sin posicionar, como lo harias?

Código:
<!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" lang="es-es">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0px;
padding: 0px;
}

#container {
min-width: 900px;
}

#caja01 {
	border-style: solid;
	border-color: rgb(255, 102, 0);
	height: 100px;
	background-color: rgb(51, 153, 153);
	margin-right: 210px;
	margin-left: 4px;
}

#caja02 { border-style: solid;
border-color: rgb(255, 102, 0);
height: 500px;
background-color: rgb(51, 102, 102);
float: right;
width: 600px;
}
#subcaja01 {
	background-color: #99FF33;
	width: 250px;
	height: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="caja02"></div>
<div id="caja01">
<div id="subcaja01">caja que quiero centrar dentro de la caja01</div>
</div>
</div>
</body>
</html>
  #9 (permalink)  
Antiguo 08/04/2008, 04:07
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
Re: dilema con layout

Supongo que has visto por qué hay que ser más específico/a en las consultas: una cosa es centrar la caja y otra centrar las cosas dentro de la caja.

Le echo un vistazo a ver si se me ocurre algo.

Mikel.
  #10 (permalink)  
Antiguo 08/04/2008, 04:11
 
Fecha de Ingreso: octubre-2007
Ubicación: barcelona
Mensajes: 10
Antigüedad: 10 años, 1 mes
Puntos: 0
Re: dilema con layout

tienes razon, pero le he metido la subcaja porque he visto que tu le habias quitado el ancho a la caja01 para que ocupara el espacio restante. Entonces ahora la question es centrar esa subcaja dentro de la caja01.

Gracias por las molestias mikel!
  #11 (permalink)  
Antiguo 08/04/2008, 04:13
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
Re: dilema con layout

La cosa es que no has retocado las medidas que te he dado para adaptarlas a tu ejemplo .

Si tu caja derecha mide 600px de ancho, entonces el margin-right de la caja 01 debe ser de 610px.
de esa manera, si pones a la subcaja margin: 0px auto; se centra automáticamente.

Cita:
#caja01 {
border-style: solid;
border-color: rgb(255, 102, 0);
height: 100px;
background-color: rgb(51, 153, 153);
margin-right: 610px;
margin-left: 4px;
}

#caja02 { border-style: solid;
border-color: rgb(255, 102, 0);
height: 500px;
background-color: rgb(51, 102, 102);
float: right;
width: 600px;
}
#subcaja01 {
background-color: #99FF33;
width: 250px;
height: 50px;
margin: 0px auto;
}
Mikel.
  #12 (permalink)  
Antiguo 08/04/2008, 04:20
 
Fecha de Ingreso: octubre-2007
Ubicación: barcelona
Mensajes: 10
Antigüedad: 10 años, 1 mes
Puntos: 0
Re: dilema con layout

Muchas gracias Mikel,
Te lo agradezco muchisimo!!

ahora me lo mirare detalladamente, es verdad que antes he canviado anchos sin cuidado, disculpas por eso.

Gracias!!
  #13 (permalink)  
Antiguo 08/04/2008, 04:26
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
Re: dilema con layout

De nada, es un placer.

Seguro que de esta forma te funcionará. Otra cosa es lo que vayas a hacer después. Ya contarás. Si necesitas ayuda consulta.

Mikel.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:47.