Foros del Web » Creando para Internet » CSS »

"Cuadrar" capas

Estas en el tema de "Cuadrar" capas en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 21/05/2010, 03:59
 
Fecha de Ingreso: junio-2009
Mensajes: 16
Antigüedad: 8 años, 6 meses
Puntos: 0
"Cuadrar" capas

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!!
  #2 (permalink)  
Antiguo 21/05/2010, 04:07
 
Fecha de Ingreso: diciembre-2007
Mensajes: 104
Antigüedad: 10 años
Puntos: 4
Respuesta: "Cuadrar" capas

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!
  #3 (permalink)  
Antiguo 21/05/2010, 04:38
 
Fecha de Ingreso: junio-2009
Mensajes: 16
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: "Cuadrar" capas

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
  #4 (permalink)  
Antiguo 21/05/2010, 04:46
 
Fecha de Ingreso: diciembre-2007
Mensajes: 104
Antigüedad: 10 años
Puntos: 4
Respuesta: "Cuadrar" capas

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!

Última edición por nakiox; 21/05/2010 a las 04:55
  #5 (permalink)  
Antiguo 21/05/2010, 05:12
 
Fecha de Ingreso: junio-2009
Mensajes: 16
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: "Cuadrar" capas

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...
  #6 (permalink)  
Antiguo 21/05/2010, 05:21
 
Fecha de Ingreso: diciembre-2007
Mensajes: 104
Antigüedad: 10 años
Puntos: 4
Respuesta: "Cuadrar" capas

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!
  #7 (permalink)  
Antiguo 21/05/2010, 05:33
 
Fecha de Ingreso: junio-2009
Mensajes: 16
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: "Cuadrar" capas

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

http://www.mediafire.com/?qv4cma1zzkd
  #8 (permalink)  
Antiguo 21/05/2010, 06:06
 
Fecha de Ingreso: diciembre-2007
Mensajes: 104
Antigüedad: 10 años
Puntos: 4
Respuesta: "Cuadrar" capas

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!
  #9 (permalink)  
Antiguo 21/05/2010, 06:35
 
Fecha de Ingreso: junio-2009
Mensajes: 16
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: "Cuadrar" capas

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

un saludo!
  #10 (permalink)  
Antiguo 21/05/2010, 06:40
 
Fecha de Ingreso: diciembre-2007
Mensajes: 104
Antigüedad: 10 años
Puntos: 4
Respuesta: "Cuadrar" capas

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!
  #11 (permalink)  
Antiguo 21/05/2010, 08:50
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola kurtco

Muevo tu tema al foro de CSS desde Web general.

Saludos,
  #12 (permalink)  
Antiguo 21/05/2010, 08:56
 
Fecha de Ingreso: junio-2009
Mensajes: 16
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: "Cuadrar" capas

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!

Etiquetas: capas
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 16:29.