Problemas con resoluciones de pantallas panorámicas

haga41 · #1 (**permalink**) 04/11/2008, 14:07

Hola a todos,

Estoy diseñando una web y poniendole margin-left y margin-right: auto a la capa contenedor, que es la primera capa que hay después del boy, se ve perfectamente en resoluciones de pantallas de 4:3, es decir: 800x600, 1024x768, etc. Pero en un portátil con pantalla panorámica y una resolución de 1280x800 no se ve centrada.

Estos son los estilos principales:

body {
padding:0;
margin:0;
background-color:#204661;
display:block;
}
.contenedor{
width:767px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
background-color:#ebf6fe;
}

Si alguien me puede dar algun consejo se lo agradecería mucho, en principio la capa contenedor debería tener la anchura definida en pixels ya que si lo pongo en % podría darme bastantes problemas con algunas imágenes que tengo.

kseso? · #2 (**permalink**) 04/11/2008, 14:20

y una vez más la pregunta del millón (de veces hecha)
aquí

Cita:

.contenedor{
width:767px;
margin: 0 auto;
background-color:#ebf6fe;
}

al final soy un blando y me arrepentí ;)

Puedes definir en % la anchura del contenedor tranquilamente, sólo tienes que definir el max-width y min-width para evitar problemas en pantalla muy anchas o que colapse en bajas resoluciones.

willyfc · #3 (**permalink**) 04/11/2008, 14:27

mira:

primero creo que necesitas display:block en el body, pero bueno puedes probar poniendolo de esta manera:

Código:

*{padding:0;
margin:0;}
body {
background-color:#204661;
display:block;
}
.contenedor{
width:767px;
height:auto;
margin:0 auto;
display:table;
background-color:#ebf6fe;
}

si el contenedor no va a tener un alto y quieres que el fondo se repita le pones display table.

ya lo probé en una sony con la resolución que dices y se ve bien.

espero te sirva

Mikmoro · #4 (**permalink**) 04/11/2008, 16:35

¿Cuál es tu doctype en la cabecera?

willyfc · #5 (**permalink**) 04/11/2008, 17:17

Cita:

Iniciado por Mikmoro

¿Cuál es tu doctype en la cabecera?

Mikmoro
Disculpa la ignorancia, que tendría que ver el doctype

Mikmoro · #6 (**permalink**) 04/11/2008, 17:19

Sin un doctype en la cabcera como este por ejemplo:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">

IE no la centraría con margin: 0 auto;

willyfc · #7 (**permalink**) 04/11/2008, 17:28

Mikmoro:

Buen dato (como siempre mikmoro), eso no lo sabia gracias.
ahh por cierto gracias por crear www.araudi.net, excelente trabajo y de mucha ayuda para los que no llevamos mucho tiempo en este trabajo

Mikmoro · #8 (**permalink**) 04/11/2008, 17:32

Las cosas de Explorer, ya sabes.

haga41 · #9 (**permalink**) 05/11/2008, 12:33

Muchisímas gracias a todos por las respuestas, siento no haber podido responder antes pero he estaedo muy liado.

En cuanto vi lo de margin 0 auto me recordó que hace una semanas había usado esos estilos porque alguien me lo había dicho sin explicarmelo pero como me dió error el padding 0 auto al validar los css quite los 2 "0 auto". Como desde entonces sólo lo había comprobado en pantallas de 4:3 no me había dado cuenta de lo que hacía ese 0.

Mikmoro, el doctype de la cabecera es:

Código HTML:

<!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">

Es verdad que hace tiempo me dió falló el IE6 por no tener bien declarado el DOCTYPE, pero ahora con el estilo 0 auto va perfecto en la pantallas panorámicas y en las normales.

Al final he dejado el estilo así y funciona perfectamente:

Código:

body {	 
	 background-color:#204661;
	 display:block;
	 padding: 0;
	 margin:0 auto; 
}
.contenedor{
	width:767px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
	background-color:#ebf6fe;
}