Problemas colocacion capas(DIVs)

Yaneth · 24 Oct 2007, 23:50 · Solicitar retirada

manejar porcentajes es complicado
(yo no lo uso)

pero es mas o menos asi:

global 100%

cabecera 100% (ancho)
menu derecho 20% (ancho)
contenido central 60% (ancho)
publicidad 20% (abcho)
pie 100% (ancho)

yo alguna vez lo intenté, pero como puse una imagen en la cabecera,
con una resolución mayor se miraba muy mal, ya que las imagenes no se expanden, y ya no quedaba bien, por eso me decidí a dejarlo con ancho fijo

Volviendo a tu caso, he hecho varias pruebas, pero se me complica la barra que quieres a la derecha y que quede a un lado de la cabecera
sería más sencillo dejarla debajo

en un rato te lo muestro

saludos

Sengirr · 25 Oct 2007, 00:25 · Solicitar retirada

hombre yo en la cabecera kiero poner un logo, con ancho en % no podria hacerlo?? entonces como hago pa q la pagina ocupe el 100% de la pantalla?

y lo de la barra de la derecha no seria una barra, seria para poner un par de banners y nose acaso algo de texto

Yaneth · 25 Oct 2007, 00:29 · Solicitar retirada

mira esto:

<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="estilo-general.css" media="all" />
<title>Documento sin título</title>
</head>

<body>
<div id="global">
<div id="cabecera">cabecera</div>
<div id="navegacion">navegacion</div>
<div id="contenido">
<div id="definicion">definicion</div>
<div id="noticias">noticias</div>
</div>
<div id="publicidad">publicidad</div>
<div id="pie">pie</div>

</div>

</body>
</html>

estilo-general.css

@charset "utf-8";
* {margin:0px; padding:0px}

#global {
position:absolute;
width:1000px;
margin:4px auto;}

#cabecera {width:1000px; height:63px
; background-color:#66CC00;
float:left }
#contenido {width:640px; float:left}

#navegacion {width:150px; height:500px;
background-color:#66FF00; float:left;
margin:8px 8px 0px 0px}

#definicion {width:640px; background-color: green;
height:185px; float:left;
margin:8px 8px 8px 0px}

#noticias {
background-color: #CCCCCC;
width: 640px;
height: 306px;
float:left;
margin:0px 0px 8px 0px

}

#pie {
background-color: #FFFF99;
height: 62px;
width: 1000px;
float:left
;}

#publicidad {

background-color: #33FFCC;
height: 500px;
width: 189px;
float:right;
margin:8px 0px 0px 0px

}

pd, creo que en base de aqui podemos usar los porcentajes

pero te repito, las imagenes no se expanden esas quedan fijas

lo checas y me avisas

saludos

Yaneth · 25 Oct 2007, 00:42 · Solicitar retirada

ahora prueba este,que está en porcentajes

<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="estilo-general.css" media="all" />
<title>Documento sin título</title>
</head>

<body>
<div id="global">
<div id="cabecera">cabecera</div>
<div id="navegacion">navegacion</div>
<div id="contenido">
<div id="definicion">definicion</div>
<div id="noticias">noticias</div>
</div>
<div id="publicidad">publicidad</div>
<div id="pie">pie</div>

</div>

</body>
</html>

estilo-general.css

@charset "utf-8";
* {margin:0px; padding:0px}

#global {
position:absolute;
width:100%;
margin:4px auto;}

#cabecera {width:100%; height:63px
; background-color:#66CC00;
float:left }
#contenido {width:60%; float:left}

#navegacion {width:20%; height:500px;
background-color:#66FF00; float:left;
margin:8px 8px 0px 0px}

#definicion {width:100%; background-color: green;
height:185px; float:left;
margin:8px 8px 8px 0px}

#noticias {
background-color: #CCCCCC;
width: 100%;
height: 306px;
float:left;
margin:0px 0px 8px 0px

}

#pie {
background-color: #FFFF99;
height: 62px;
width: 100%;
float:left
;}

#publicidad {

background-color: #33FFCC;
height: 500px;
width:18%;
float:right;
margin:8px 0px 0px 0px;

}

Pd, los checas y me avisas

saludos

Sengirr · 25 Oct 2007, 00:56 · Solicitar retirada

aver el primero q pusiste me sale como lo kiero pero el problema es k no me ocupa toda la pantalla apartir de los 1000px a la derecha deja un hueco en blanco.y por abajo pasa iwal tambien hay espacio en blanco
una cosa, xq le pones a todas las divs float left?
y otra cosa, segun lei si usas posiciones absolutas, si por ejemplo el contenido esta en posicion absoluta si en el contenido escribo un texto q baja mas q la altura absoluta de la capa global keria fuera de la capa o no hay problema?

Sengirr · 25 Oct 2007, 01:04 · Solicitar retirada

la segunda opcion es sencillamente tal como lo kiero pero el problema esta en k la altura no se k pasa pero pasa iwal q antes debajo del pie hay pixeles en blanco.

aver tengo unas preguntas, al global dandolo en posicion absolute no pasa nada luego si pongo mas tengo por ejemplo en la div contenido no?
luego tengo muxas dudas sobre las alturas, anchuras y lo de relative y absolute, no llego a entender esas 4 cosas aunk me haya leido los tutoriales 14 veces.

si le asignas una altura a las divs no podre escribir mas contenido del k kepa en esa altura no?
y respecto a las imagenes y banners me dices q con porcentajes no podria poner?

Yaneth · 25 Oct 2007, 01:45 · Solicitar retirada

Asi es

si le pones una altura a los divs, no puedes escribir mas alla de lo que ya especificaste,

para evitar eso

le quitamos la altura a todas las divs

y listo, ya puedes extenderte todo lo que necesites

la div global por no tener una altura fija no deberías tener problemas

les pongo float:left, para que se alineen una a lado de otra

y no se pongan donde se les antoje

saludos

Yaneth · 25 Oct 2007, 01:57 · Solicitar retirada

y las imagenes y baners, no se extienden, esas si deben tener un ancho fijo

pero las puedes acomodar segun desees

saludos

Sengirr · 25 Oct 2007, 02:02 · Solicitar retirada

ah vale esk hice la prueba con la imagen, puse una en la cabecera cambie de resolucion todo el rato y no se deformaba.

lo del espacio blanco de debajo del pie de pagina xq es, x poner altura a las divs?

www.usuarios.lycos.es/iav1985
aki puedes ver lo k te digo

lo de las posiciones relativas y absolutas kreo q lo dejare como me lo has exo y yasta...
otra cosa mas, como hago para mover la foto a donde yo kiera? esk puse body text-align:center y m movio la foto al medio de la cabecera.
la cuestion es como colocar las imagenes?

Yaneth · 25 Oct 2007, 02:06 · Solicitar retirada

si la imagen la has puesto dentro de una div

pues lo indicas asi:

#cabecera {text-align:left}

y todo lo que esté dentro de esa div te lo movera a la izquierda

saludos

Sengirr · 25 Oct 2007, 02:28 · Solicitar retirada

vale solucionado.

otra cosa ahora si kiero dejar por ejemplo un margen de 5px por arriba por la izkierda y por la derecha xq al poner margin 5px 5px me ocurre esto?
http://www.usuarios.lycos.es/iav1985/index.html

si te fijas esta bien por la izkierda y arriba pero por la izkierda no lo da, es mas hace q el ancho no kepa en la pagina y tengas q darle a desplazarlo...

miralo con resolucion de 1200x1000

y xq debajo del pie de pagina hay tanto espacio blanco?

Sengirr · 25 Oct 2007, 02:31 · Solicitar retirada

keria decir q me ekivoke q por la parte izkierda no aplica el borde y para colmo hace q la pagina sea mas ancha de lo normal

Sengirr · 25 Oct 2007, 02:57 · Solicitar retirada

llevo probando todo el rato y por lo k se ve el problema esta en k si dejo aunk sea 5px de margen por la izkierda por ejemplo a la capa cabecera automaticamente al visualizarla la ensancha y tengo q scrollear
cual es la manera de k pueda dejar margenes por los lados y por arriba sin k ensanche la pagina?

Yaneth · 25 Oct 2007, 17:10 · Solicitar retirada

Hola

el margin (recuerdas que le puse 4px) es para que se separen entre capa y capa (exterior)

si lo que quieres es un margen interior (especio entre los bordes internos, y los objetos) tienes que usar el padding

padding: 0px 0px 0px 0px

y van asi: arriba, derecha, abajo, izquierda

si solo lo pones asi:

padding: 0px

entonces, te lo pone igual en los cuatro lados

como ejemplo:

#cabecera {padding: 5px 0px 5px 5px}

saludos

Yaneth · 25 Oct 2007, 17:21 · Solicitar retirada

No se a lo que te refieres con el espacio en blanco del pie

esto es lo que yo veo

[contenido no disponible]

saludos

Sengirr · 25 Oct 2007, 17:33 · Solicitar retirada

yo tengo 1200x1000 de resolucion y debajo del pie veo un gran espacio en blanco debajo del pie...
luego hay otro problema si te fijas no ocupa toda la pantalla de ancho sino q ocupa un poco mas y te obliga a scrollear? como arreglo eso y poder dar margen?

otra cosa q me he dado cuenta esk si la ventana la achicas muxo llega un punto en el cual la div publicidad se pasa hacia abajo. es solo esa pero weno nose xq pasa.
prueba a poner la ventana mas pekeña y te pasara.

Yaneth · 25 Oct 2007, 18:01 · Solicitar retirada

para arreglar lo del ancho, tendríamos que ponerle a la div global, un ancho del 95%

lo de la bajada de la capa publicidad, no se... tendría que hacer mas pruebas

lo de..... el espacio que ves en blanco en la parte de abajo del pie (con resolución mayor...)

es logico, ya que la altura depende, del contenido

imagina, le ponemos un alto tambien al 100%, si es mucho contenido, creo que igual se ajustará a que ocupe el alto no crees??

intenta ponerle, a la global asi:

{width::95%; height: 95%)

y veremos que pasa

recuerda hacer la prueba, con mucho contenido y con poco

saludos

Yaneth · 25 Oct 2007, 18:22 · Solicitar retirada

he cambiado la capa global y la he dejado asi:

#global {
width:98%;
margin:4px auto;
position:relative
}

y la capa publicidad asi:

#publicidad {
background-color: #33FFCC;
width:17%;
float:right;
margin:8px 0px 0px 0px;
}

saludos

Sengirr · 25 Oct 2007, 19:24 · Solicitar retirada

la barra de publicidad ya no se baja si la achico eso ta arreglado, pero lo del ancho sigue iwal me he dado cuenta de k si le pongo 95% de ancho a la global o le pongo 97% no veo ningun cambio,
puede ser k xq el pie lo tenga en ancho 100% falle? no tendria nada q ver no? xq el 100% del pie esta relacionado con el 97% de la global no?

otra cosa, ahora a la global le has puesto position relative y antes estaba en absolute, xq ese cambio? aun no entiendo bien lo de relative y absolute

aki tienes el codigo para comprobarlo:

@charset "utf-8";
* {margin:0px; padding:0px}

body {text-align:center;}
#global {
	
width:95%;
height:95%;
margin:4px auto;
position:relative;
} 
	


#cabecera {
	width:100%;
	height:63px;
	background-color:#66CC00;
	float:left;
	margin-top: 0px;
	margin-right: 0px;
}
#logo {
	float: left;
	text-align:left;
	
}

#contenido {
	width:67%;
	float:left;
	
}

#navegacion {
	width:15%;
	height:500px;
	background-color:#66FF00;
	float:left;
	list-style-type: disc;
	margin-top: 5px;
	margin-bottom: 5px;
}

#definicion {
	width:100%;
	background-color: green;
	height:185px;
	float:left;
	margin:0px 0px 0px 0px;
}

#noticias {
	background-color: #CCCCCC;
	width: 100%;
	height: 306px;
	float:left;
	margin:0px 0px 0px 0px;

}

#pie {
	background-color: #FFFF99;
	height: 62px;
	width: 100%;
	float: left;
	
}
#navegacion ul {
	list-style: none;
}



#publicidad {
background-color: #33FFCC;
width:17%;
float:right;
margin:8px 0px 0px 0px;
}

lo k intento buskar esk no pase lo del ancho y tambien intento dar un margen por todos los lados de 5 px o algo asi pa k no empiecen las capas justo al borde de la pantalla

Sengirr · 25 Oct 2007, 19:26 · Solicitar retirada

acabo de probar a verlo con IE y sale todo complemtanete descolocado

Yaneth · 25 Oct 2007, 19:36 · Solicitar retirada

primero una cosa:

Estamos aprendiendioo juntos,

le cambie absolute por relative, por que no me lo quería centrar

ahora recuerda, que le estas poniendo alto a la global, pero
las capas de adentro deberán tener, tambien un alto no crees??

ahora, lo del alto, yo no lo veo necesario, por que te afectará con mucho o poco contenido, ya que si te excedes, no abra scroll haca abajo, me explico????

hare otras pruebas y te aviso

Sengirr · 25 Oct 2007, 22:45 · Solicitar retirada

vale entiendo eso, entonces no le doy alto a ningun elemento no? solo a los elementos q se desde ya q alto tendran como por ejemplo la cabecera q no cambiara y la barra de navegacion tambien se la altura q tendra, osea le doy altura a todo lo k permanecera iwal y al contenido no le doy altura para k vaya variando segun el contenido q meta no¿?

y lo del internet explorer xq es? xq en mozilla lo veo bien y en IE no

Yaneth · 25 Oct 2007, 22:49 · Solicitar retirada

Asi es

de hecho solo la cabecera y el pie, tienen un ancho mas o menos fija

los demás varian en contenido

saludos

Sengirr · 25 Oct 2007, 23:03 · Solicitar retirada

acabo de retokar todo, al global le kite lo de relative y puse mas o menos los bordes como kiero q se vean, kedaria asi dime aver q tal:
www.usuarios.lycos.es/iav1985

el codigo es asi pa k veas si hay fallos:

@charset "utf-8";
* {margin:0px; padding:0px}
body {text-align:center;}
#global {
	width:99%;
	left: 0px;
	top: 0px;
	margin: 5px;
}

#cabecera {width:100%; height:63px
; background-color:#66CC00;
float:left }
#logo {
	float: left;
	text-align:left;
	
}

#contenido {
	width:67%;
	float:left;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 7px;
	margin-left: 5px;
}

#navegacion {
	width:15%;
	height:500px;
	background-color:#66FF00;
	float:left;
	margin: 5px 5px 5px 0px;
	list-style-type: disc;
}

#definicion {width:100%; background-color: green;
height:185px; float:left;
}

#noticias {
	background-color: #CCCCCC;
	width: 100%;
	height: 315px;
	float:left;
}

#pie {
	background-color: #FFFF99;
	height: 62px;
	width: 100%;
	float:left
;
	margin-right: 5px;
}
#navegacion ul {
	list-style: none;
}


#publicidad {
	background-color: #33FFCC;
	height: 500px;
	width:16%;
	float:right;
	margin-top: 5px;
	margin-left: 0px;
	margin-bottom: 5px;
 }

Sengirr · 25 Oct 2007, 23:05 · Solicitar retirada

asi es como kerria el diseño pero me acabo de dar cuenta q si achico la ventana me pasa como antes q la capa publicidad se pasa abajo
q anda mal?