"Cuadrar" capas

kurtco · #1 (**permalink**) 21/05/2010, 02:59

Hola, ya hice un post para el tema de las capas y demás funciona genial, pero ahora tengo un problema, en el safari en mac, al no verse al tope de la pantalla, es decir que se ve al contenido se ve de la siguiente forma.

Pero en Chrome a pantalla completa:

Lo que yo quería saber es que atributos le tengo que poner al div para que quede bien adaptado a la cabecera en todos los navegadores.

Tengo lo siguiente: position:absolute;right: 20%;left: 30%; eso para los de contenido

y para el menú: position:absolute;left:20%; width:10%; top:310px

PD: Por ahora botones y demás tienen el mismo nombre vamos para ir probando...

MUCHAS GRACIAS A VER SI PODEIS AYUDARME!!

nakiox · #2 (**permalink**) 21/05/2010, 03:07

Hola, porqué utilizas posiciones absolutas? Eso te lo recomiendo para menús desplegables ocultos.. o cualquier contenido con algún efecto de movimiento.

Una forma fácil de cuadrar cualquier div.. es por ejemplo:

margin-left:auto;margin-right:auto;width:950px;display:block;

pensando en esa fórmula.. puedes crear dos bloques, uno para el header con ese estilo y otro debajo para el cuerpo del contenido.. en ese caso tendrás dos contenedores centrados.

Y dentro del segundo contenedor creas dos secciones, una para el menú y otra para los textos del cuerpo del contenido.

Espero sea eso lo que dices..
Saludos!

kurtco · #3 (**permalink**) 21/05/2010, 03:38

Sí, es exactamente eso, muchas gracias pero solo una cosa, a ver si lo he entendido bien, para la cabecera coloco el estilo que me has puesto no?, y luego para el menu hago otra capa y otra más para el contenido? y con que estilo para que no se pongan una encima de la otra? muchas gracias de verdad

nakiox · #4 (**permalink**) 21/05/2010, 03:46

Holas, si eso que te pasé puedes utilizarlo para centrar cualquier div.. y adentro hacer lo que tengas que hacer.
en este caso, seria uno para el header.. y otro para el cuerpo. Los contenedores, imagínatelos como bloques horizontales con otros contenedores en linea o no dentro.

Dentro del cuerpo, irian dos capas. Una para el menú en linea y otro para el contenido en sí, también en línea que no hace falta que lo centres... porque lo deberías hacer ajustado al ancho.

No se deberian poner una arriba de la otra si están en linea.. al menos que tengas margenes negativos.
Por si las dudas, leete este post: http://www.forosdelweb.com/f91/problema-con-scroll-horizontal-808794/#post3411502

Intenta no meter paddings sobre los contenedores, es lo que digo en ese post.. ya que quizás se te superpone por eso.
Saludos!

kurtco · #5 (**permalink**) 21/05/2010, 04:12

Perdón otra vez, lo he probado pero el menú no se queda a la altura de la cabecera, ni el menú ni el contenido, mira te pongo mi css:

Código:

th {
	text-decoration: none;
	color: #181a12;
	font: normal 10px "Lucida Grande", Lucida, Verdana, sans-serif;
}

H1 {
	text-shadow: white 2px 2px 1px;
	text-align: justify;
	color: #000;
	font: bold 16px "Lucida Grande", Lucida, Verdana, sans-serif;
}

font {
	text-transform: capitalize;
	text-align: justify;
	font-size: 10px;
	color: #b2b2b2;
}

* {
	color: #7d7d7d;
	font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
}

a {
	text-decoration: none;
	
}

BODY {
	background: url('./img/fon.png');
   
}



input {
	color: #000;
	border-style: double;
}

img {
	position: static;
	border-style: solid;
}

/* CLASES */



.header { width:100%;display:block;margin-left:auto;margin-right:auto }

.menu { width:30%;display:inline;float:left; margin-left:auto;margin-right:auto}

.cuerpo { width:70%;display:inline;float:left;
	background-color: #d2ddac;
}


.padd { padding:20px; }

.clear { clear:both;display:block; }

A ver si tu ves la solución xD, es que llevo sin ver css muchisimo...

nakiox · #6 (**permalink**) 21/05/2010, 04:21

Holas, mira, lo mejor sería que pases una URL para ver el código desde el código mismo..

Seguramente sea que te queda a la izquierda porque tienes un float:left; pero si lo estás haciendo al 100% el header.. todo debería quedar al 100%, osea completo de izq a derecha.

Posiblemente el problema esté en el contenido..

Tienes una dirección con eso subido?..
Si me haces un .rar y me lo subes te lo soluciono.

Saludos!

kurtco · #7 (**permalink**) 21/05/2010, 04:33

Aquí está el zip con imágenes y todo lo necesario. Muchisimas gracias te debo unas cuantas:

http://www.mediafire.com/?qv4cma1zzkd

nakiox · #8 (**permalink**) 21/05/2010, 05:06

Bueno, ahi te pasé por mensaje privado el link.

Le he dado un poco de forma.. no dispongo de mucho tiempo.
Espero te sirva..
Saludos!

kurtco · #9 (**permalink**) 21/05/2010, 05:35

Muchas gracias, creo que ya con eso me averiguaré bien, de verdad muchas gracias!!

un saludo!

nakiox · #10 (**permalink**) 21/05/2010, 05:40

De nadas, saludos!

Por cierto, la etiqueta <center> se descatalogará próximamente..

Y en las tablas, asegurate de cerrar los tr..

y th no es lo mismo que td.. cuidado con eso.
Saludos!

JavierB · #11 (**permalink**) 21/05/2010, 07:50

Hola kurtco

Muevo tu tema al foro de CSS desde Web general.

Saludos,

kurtco · #12 (**permalink**) 21/05/2010, 07:56

Hola! gracias no sabia lo del center...y lo de los td, los he sustituido y va mejor..gracias otra vez jaja, ya si me sale esto te dejo...y es que la capa de noticias si se pone en su lugar, sin embargo si pongo otra debajo de ésta, evidentemente se coloca debajo, yo lo que quiero hacer es sustituirla...ya espero que sea mi última consulta, al menos en el foro de diseño...xD

muchas gracias!