Como Puedo hacer dimensiones de la web

moises9633 · #1 (**permalink**) 31/01/2011, 07:48

Buenas tengo un problema como hago para que mi web 800*600 se vea bien en 1440*900 y al contrario también, osea quiero que se vea bien en todas las resoluciones y visto varias webs que pueden hacer eso, alguien me explica como ? es un script?

IsaBelM · #2 (**permalink**) 31/01/2011, 08:19

en vez de usar unidades absolutas, usa unidades relativas

jomaruro · #3 (**permalink**) 31/01/2011, 09:08

Hola:

Sin ver tu código las respuestas son simples divagaciones pero prueba incluyendo toda tu página en un div contenedor con el ancho fijo que quieras y aplícale margin:0 auto.

IsaBelM, la solución que indicas generalmente no va a solucionar el problema.

Saludos.

moises9633 · #4 (**permalink**) 31/01/2011, 09:34

Cita:

Iniciado por jomaruro

Hola:

Sin ver tu código las respuestas son simples divagaciones pero prueba incluyendo toda tu página en un div contenedor con el ancho fijo que quieras y aplícale margin:0 auto.

IsaBelM, la solución que indicas generalmente no va a solucionar el problema.

Saludos.

me podrías pasar algún link profa soy novato en este thema.

sanxuan · #5 (**permalink**) 31/01/2011, 09:38

El utilizar un modelo de ancho fijo y centrarlo en la página es sólo una de las posibilidades existentes. Es muy utilizada porque evita tener que pensar, tener que probar y tener que saber para enfrentarse a las dificultades que en principio puedan causar otras configuraciones.
Para alguien que empieza, apoyo la idea de usar esa configuración, pero hay otras alternativas.
Se pueden usar medidas en em en lugar de en pixels o combinaciones de las dos unidades.
Se pueden usar tamaños proporcionales en lugar de fijos en algunos elementos.
Se pueden usar las propiedades min-height, min-width, max-height y max-width para evitar que las medidas proporcionales se salgan de madre, etc...
Todo eso se logra cambiando sólo el CSS.
Javascript será necesario donde no exista la posibilidad de usar CSS.

IsaBelM · #6 (**permalink**) 31/01/2011, 16:37

Cita:

Iniciado por jomaruro

Hola:
IsaBelM, la solución que indicas generalmente no va a solucionar el problema.

Saludos.

puede que no haya comprendido lo que moises9633 explica. como tu dominas mucho mas que yo este campo, te dejo un ejemplo de a qué me refería con unidades relativas, para que me corrijas

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" dir="ltr" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin titulo</title>
<style type="text/css">
html, body {
height: 100%;
background-color: red;
margin: 0;
}

#cont {
background-color: yellow;
min-height: 100%;
height: auto !important;
height: 100%;
max-width: 95%;
margin: 0 auto -1em;
}

#cont2 {
background-color: green;
min-height: 100%;
height: auto !important;
height: 100%;
max-width: 95%;
margin: 0 auto -1em;
}
</style>
</head>
<body>
<div align="center">
<div id="cont">
bloque contenedor
<div id="cont2">
otro bloque
</div>
</div>
</div>
</body>
</html>

kseso? · #7 (**permalink**) 31/01/2011, 18:55

IsaBelM
Según el doctype que declara (strict) no puede usar el <div align="center">
Y creo que ese css es una parte de un ejemplo de "pie abajo" y el resto de toda la altura ocupada por el contenedor (#cont) (sin el align), alque le falta el mini reset y el footer. Y de todas formas, no necesitaría el align, bastaría con declarar una posición a #cont distinta al valor por defecto (static)

moises9633:
Creo que debería definir qué entiende (o quiere lograr) con su expresión:

Cita:

que mi web 800*600 se vea bien en 1440*900 y al contrario también

porque caben varias interpretaciones.

moises9633 · #8 (**permalink**) 31/01/2011, 20:43

Cita:

Iniciado por kseso?

IsaBelM
Según el doctype que declara (strict) no puede usar el <div align="center">
Y creo que ese css es una parte de un ejemplo de "pie abajo" y el resto de toda la altura ocupada por el contenedor (#cont) (sin el align), alque le falta el mini reset y el footer. Y de todas formas, no necesitaría el align, bastaría con declarar una posición a #cont distinta al valor por defecto (static)

moises9633:
Creo que debería definir qué entiende (o quiere lograr) con su expresión:
porque caben varias interpretaciones.

es que estoy diseñando una pag. en photoshop y quiero que se vea bien en todas las resoluciones

IsaBelM · #9 (**permalink**) 01/02/2011, 06:36

Cita:

Iniciado por kseso?

Según el doctype que declara (strict) no puede usar el <div align="center">

no lo sabía, pero solo se trataba de centrar el texto de una manera rápida, sin usar otro selector

Cita:

Iniciado por kseso?

Y creo que ese css es una parte de un ejemplo de "pie abajo" y el resto de toda la altura ocupada por el contenedor (#cont) (sin el align),

yo no lo uso como footer únicamente, también lo uso como cuerpo. no es correcto??

Cita:

Iniciado por kseso?

alque le falta el mini reset y el footer. Y de todas formas, no necesitaría el align, bastaría con declarar una posición a #cont distinta al valor por defecto (static)

no sé que es el mini reset y has de pensar que es solo un ejemplo hecho al vuelo.
si fueras tan amable de responder a mi pregunta y explicarme que es un mini reset

gracias

ayukkonen · #10 (**permalink**) 01/02/2011, 08:36

Inserta esto en tu hoja de estilos, y no lo modifiques.

* {
margin: 0px;
padding: 0px;
}

Un saludo.

kseso? · #11 (**permalink**) 01/02/2011, 08:46

Cita:

Iniciado por moises9633

es que estoy diseñando una pag. en photoshop y quiero que se vea bien en todas las resoluciones

Como le decía, debería explicar qué entiende por "verse bien". Y el trasladar un diseño gráfico a código (y multinavegador) no es algo "automático. Dependerá de cada diseño en particular.

Cita:

Iniciado por IsaBelM

no lo sabía, pero solo se trataba de centrar el texto <- para ello existe text-align de una manera rápida, sin usar otro selector

Cita:

Iniciado por IsaBelM

yo no lo uso como footer únicamente, también lo uso como cuerpo. no es correcto?? <-- No era mi intención calificarlo de correcto/apropiado o incorrecto/inapropiado

Cita:

Iniciado por IsaBelM

no sé que es el mini reset y has de pensar que es solo un ejemplo hecho al vuelo.
si fueras tan amable de responder a mi pregunta y explicarme que es un mini reset <-- Qué es el reset css? Lo de llamarlo mini reset es algo de mi cosecha. Sería algo así como: * {margin:0, padding:0; border: none;} Y suelo añadirle en cosas sencillas /position: relative/ pero siendo consciente de que eso rompe a ie6
De todas formas, es un tema muy tratado, y una búsqueda le arrojará los distintos css más utilizados

Cita:

Iniciado por IsaBelM

gracias<--no hay porqué

IsaBelM · #12 (**permalink**) 01/02/2011, 17:06

gracias ayukkonen y kseso? por responder.

Cita:

Iniciado por kseso?

<- para ello existe text-align

sí, que tonta. aun me falta mucho manejo

Cita:

Iniciado por kseso?

Sería algo así como: * {margin:0, padding:0; border: none;} Y suelo añadirle en cosas sencillas /position: relative/ pero siendo consciente de que eso rompe a ie6

he visto muchas veces el selector universal con esas propiedades, pero nunca las he usado, basicamente por que no comprendo para que se usan.
el código que expuse anteriormente ha quedado así. esto es lo que me comentabaís??

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" dir="ltr" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin titulo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
height: 100%;
background-color: red;
}

#cont {
background-color: yellow;
min-height: 100%;
height: auto !important;
height: 100%;
max-width: 95%;
margin: 0 auto -1em;
text-align: center;
}

#cont2 {
background-color: green;
min-height: 100%;
height: auto !important;
height: 100%;
max-width: 95%;
margin: 0 auto -1em;
text-align: center;
}
</style>
</head>
<body>
<div id="cont">
bloque contenedor
<div id="cont2">
otro bloque
</div>
</div>
</body>
</html>

daPhyre · #13 (**permalink**) 01/02/2011, 17:15

Cita:

Iniciado por moises9633

es que estoy diseñando una pag. en photoshop y quiero que se vea bien en todas las resoluciones

Lo mejor es, hacer el diseño al ancho máximo de la pantalla mínima (996px para una pantalla de 1024px de ancho), y centrarlo:

Código:

#container{max-width:996px;margin:0 auto}

Y como fondo, usar un color sólido o una imagen que pueda reproducirse como mosaico. Con eso, tu diseño no se verá mal, independiente del tamaño de la pantalla.