800x600 y 1200

exagono · #1 (**permalink**) 08/02/2005, 12:48

hola saben que me he fijado que cuando uno hace una web para 800 x 600
y esta misma la visualisamos en una resolucion mayor pues queda espacio sobrando en el cual vemos pues solamente el color de fondo, ahora lo que quiero hacer y no se como , es que mi web que es de 800 x 600 quede almenos centrada cuando se vea en un monitor de resolucion mayor , ya que la mia se ve pero toda queda cargada a la izquierda ,

La Pantera Rosa · #2 (**permalink**) 08/02/2005, 13:05

Hola Socio:
fijate en el <center></center> ok?

<html>
<head><title>lo que quieras</title></head>
<body>
<center>
- - aqui viene el contenido de tu web, lo que interesa son las etiquetas<center> y </center> justo despues de la etiqueta <body> y antes del </body>
</center>
</body>
</html>

suerte................................

Khronos · #3 (**permalink**) 08/02/2005, 16:18

Lo del elemento <center></center>, es una idea, pero el mismo está desaprobado según las normas W3C sobre HTML 4.01

Cita:

El elemento CENTER es exactamente equivalente a especificar el elemento DIV con el atributo align igual a "center". El elemento CENTER está desaprobado.

Fuente: http://html.conclase.net/w3c/html401.../graphics.html

Podrías usar CSS para que el Body (y todo su contenido) esté centrado:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
 <STYLE type="text/css">
  BODY {text-align: center}
 </STYLE>
</head>

<body>
<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#FF0000">&nbsp;</td>
  </tr>
</table>
<p>Texto Centrado</p>
</body>
</html>

Sin embargo, haciendo esto se presenta un problema. Internet Explorer te mostrará todo centrado, ya sea el texto o la tabla. No así con Firefox, donde la tabla no te va a quedar centrada.

¿Entonces qué hacer?

Te voy a responder en base a lo que he aprendido por mi cuenta y por medio de FDW.

Cuando tengo una página cuyo contenido quiero que se vea centrado en todos los navegadores y a resoluciones mayores de 800x600, hago lo siguiente:

Primero creo una tabla a la que normalmente llamo contenedora y luego dentro de ella es donde coloco todo el contenido.

Anteriormente, para que esta tabla contenedora se viera centrada a 1024x768, le aplicaba el atributo align="center" para que se ubicara justo al medio del documento.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>

<body>

<!-- Inicio Tabla contenedora -->
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    <p>AQUI PONGO EL CONTENIDO</p>
    <p>TEXTO</p>
    <p>IMAGENES</p>
    <p>ETC</p>
    </td>
  </tr>
</table>
<!-- Fin Tabla contenedora -->

</body>
</html>

Pero ahora, gracias a un post de la moderadora tunait que recientemente descubrí, encontré una solución para centrar esa tabla contenedora sin el atributo align="center".
Para esto, me valgo del uso de CSS mediante margin-left y margin-right.

Te muestro:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
 <STYLE type="text/css">
  #Center_Tab {
	margin-left: auto;
	margin-right: auto;
}	
 </STYLE>
</head>

<body>

<!-- Inicio Tabla contenedora -->
<table width="780" border="0" cellpadding="0" cellspacing="0" id="Center_Tab">
  <tr>
    <td>
    <p>AQUI PONGO EL CONTENIDO</p>
    <p>TEXTO</p>
    <p>IMAGENES</p>
    <p>ETC</p>
    </td>
  </tr>
</table>
<!-- Fin Tabla contenedora -->

</body>
</html>

Cuando asignas el estilo CSS Center_Tab a la tabla contenedora, logras el mismo fin que con el atributo align="center", pero en forma más elegante y apegada a las normas de diseño.

Claro, estos Estilos CSS puedes colocarlos dentro del mismo documento, pero lo ideal es que crees una hoja de estilos externa y luego la vincules al mismo.

Por otro lado, mientras te escribía esta respuesta, me puse a probar un poco y me fijé que también, en vez de usar como contenedor una tabla, se puede usar un div aplicando Center_Tab y una clase que especifique el tamaño del mismo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
 <STYLE type="text/css">
  #Center_Tab {
	margin-left: auto;
	margin-right: auto;
}	
  .Contenedor {
	width:780px;
}
 </STYLE>
</head>

<body>
<!-- Inicio Div contenedor -->
<div class="Contenedor" id="Center_Tab">
    <p>AQUI PONGO EL CONTENIDO</p>
    <p>TEXTO</p>
    <p>IMAGENES</p>
    <p>ETC</p>
</div>
<!-- Fin Div contenedor -->
</body>
</html>

En fin, esta es la forma en que yo soluciono el problema.

Sin embargo, otra manera es, que no trabajes con medidas en píxeles sino con porcentajes para que así la página se ajuste automáticamente a la resolución de pantalla.

Como comentario final, te doy un tip que también aprendí aquí en FDW.

A veces, con navegadores como Opera (no recuerdo si en Firefox también sucede) se pierde algo de espacio, es decir, la página se ve algo descuadrada *(ver más abajo).

Para solventar esto y aprovechar todo el espacio, simplemente agrega a una CSS en elemento Body lo siguiente:

Código:

	padding: 0px;
	border: 0px;
	width: 100%;

En mi hoja de estilos CSS lo tengo así:

Código:

body {
	background-color: Black;
	color: #D7D7D7;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	padding: 0px;
	border: 0px;
	width: 100%;
        }

Bueno, eso es todo, espero que esto te sirva de algo. Si tienes alguna duda, vuelve a postear para ayudarte.

---------------------------------------------------------------------------------

*Edite el mensaje porque no fue claro el comentario del problema con Opera. Realmente no es que se vea descuadrada la página, al menos no me refiero a un sentido absoluto.

Lo que sucede es que en Opera, las instrucciones con respecto a los márgenes de la página (margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;), no se interpretan igual que en Internet Explorer y Firefox.

Supongan que tienen un documento XHTML con un ancho de 780px, si hacen una vista previa con Opera, notarán que sobra espacio entre el margen superior del documento y el inicio del mismo e igualmente entre el final y el margen inferior. Claro, el contenido puede verse totalmente centrado horizontalmente, pero queda un sobrante a nivel inferior y superior.

Entonces, para que el navegador aproveche todo el espacio, se agrega lo que les comenté anteriormente (padding: 0px; border: 0px; width: 100%;)

exagono · #4 (**permalink**) 08/02/2005, 23:47

wow s i que me dejaron boquiabierto,..

jam1138 · #5 (**permalink**) 09/02/2005, 04:50

Simplemente

.

ajmataurus · #6 (**permalink**) 10/02/2005, 15:30

Buena, em funciona con pagians individuales pero cómo lo hago si mi pagina tiene marcos (cabecera, izquierda, centro y pie), donde le pogo tu codigo???
Gracias

Khronos · #7 (**permalink**) 10/02/2005, 15:55

Cita:

Iniciado por ajmataurus

Buena, em funciona con pagians individuales pero cómo lo hago si mi pagina tiene marcos (cabecera, izquierda, centro y pie)

Un frameset?

Cita:

Iniciado por ajmataurus

donde le pogo tu codigo???

Depende... Qué es lo que quieres centrar?

MadridVsBarsa · #8 (**permalink**) 10/02/2005, 17:27

Cita:

Iniciado por Khronos

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
 <STYLE type="text/css">
  #Center_Tab {
	margin-left: auto;
	margin-right: auto;
	width:780px;
}	
 </STYLE>
</head>

<body>
<!-- Inicio Div contenedor -->
<div id="Center_Tab">
    <p>AQUI PONGO EL CONTENIDO</p>
    <p>TEXTO</p>
    <p>IMAGENES</p>
    <p>ETC</p>
</div>
<!-- Fin Div contenedor -->
</body>
</html>

Otra variante mas a lo que pusistes...no lo he probado pero vamos, es lo mismo, pero para no tener un identificador y una clase, juntarlo los dos en uno

ajmataurus · #9 (**permalink**) 10/02/2005, 17:43

Hola Kronos, quiero centrarlo todo, empezando por el frame principal que contiene a los otros cuatro subframes (cabecera, izquierda,centro, pie). me dejo entender??? y en el frame pricnipal no hay nada de body solo llamadas a los frmaes
Gracias
Att. Taurus

Khronos · #10 (**permalink**) 10/02/2005, 20:02

Cita:

Iniciado por ajmataurus

Hola Kronos, quiero centrarlo todo, empezando por el frame principal que contiene a los otros cuatro subframes (cabecera, izquierda,centro, pie). me dejo entender??? y en el frame pricnipal no hay nada de body solo llamadas a los frmaes
Gracias
Att. Taurus

y no se supone que cuando trabajas con framesets, esto queda ajustado a la pantalla?

Tienes tu página online para verla?

ajmataurus · #11 (**permalink**) 11/02/2005, 08:54

es: no se burle que recien empiezo ehhhh...!!!!
http://www.mastic.com.pe

Khronos · #12 (**permalink**) 11/02/2005, 09:39

La verdad, nunca he trabajado com framesets.

Por que no intentas centrar las páginas individuales que van dentro del frameset?

Claro, ahi creo que sólo podrias centrar el "top", "centro" y "down".

Tienes que calcular las medidas para adaptar los estilos de acuedo a las proporciones.

Por cierto, una sana recomendación: Si tienes posibilidad de adquirir Dreamweaver, NO DUDES EN HACERLO. Frontpage no es un buen editor web

Ah, y no tengo por que burlarme de tu trabajo. Yo tambien estoy empezando. Tengo errores y hay cantidad de cosas que no se.

ajmataurus · #13 (**permalink**) 11/02/2005, 15:31

Hola Khronos:
Sabes cual es el truco de este siguiente site: http://www.juninserver.com ; osea a la pagina de Mastic deseo ponerle esa sombrita que tiene especialmente cunado se ve en resoluciones mayores de 800x600.
gracias
bye
Att. Taurus

Khronos · #14 (**permalink**) 11/02/2005, 16:11

Mmmm, lo que veo es que trabajaron con una imagen de background dentro de las celdas laterales, ademas colocaron un div

exagono · #15 (**permalink**) 11/02/2005, 17:42

a karay nunca pense ke este team fuera a cuasar tanto alboroto

Khronos · #16 (**permalink**) 11/02/2005, 17:49

Cita:

Iniciado por exagono

a karay nunca pense ke este team fuera a cuasar tanto alboroto

Oye... y como te fue con lo del centrado?

programeitor · #17 (**permalink**) 11/02/2005, 19:44

Me parece una estupidez que el elemento <CENTER> este desaprobado, cuando es simple y sobre todo funciona. Estos del WC3 es que tienen unas cosas.....

exagono · #18 (**permalink**) 11/02/2005, 19:47

entoses si funciona ?

Khronos · #19 (**permalink**) 11/02/2005, 20:56

Cita:

Iniciado por exagono

entoses si funciona ?

Claro... Sí funciona, sólo que está desaprobado

Cita:

Desaprobado
Un elemento o atributo desaprobado es aquel que ha quedado anticuado por la presencia de estructuras nuevas. Los elementos desaprobados se definen en el manual de referencia en los lugares apropiados, pero claramente marcados como desaprobados. Los elementos desaprobados pueden declararse obsoletos en versiones futuras de HTML.

Los agentes de usuario deberían seguir dando soporte a los elementos desaprobados por razones de compatibilidad con versiones anteriores.

Las definiciones de elementos y atributos indican claramente cuáles son desaprobados.

Esta especificación incluye ejemplos que ilustran cómo evitar el uso de elementos desaprobados. En la mayoría de los casos estos ejemplos dependen de que el agente de usuario soporte hojas de estilo. En general, los autores deberían usar hojas de estilo para lograr efectos estilíticos y de formato de presentación en lugar de utilizar atributos presentacionales de HTML. Los atributos de presentación de HTML han sido desaprobados cuando existen alternativas con hojas de estilo (véase, por ejemplo, [CSS1]).

Fuente: http://html.conclase.net/w3c/html401...tml#deprecated

ajmataurus · #20 (**permalink**) 15/02/2005, 13:48

Hola Khronos: Ahora què hago para eso de los frames centrados???? he intendado con el frame principal y no funciona.
Còmo es eso de celdas laterales, quieres decir que todo es una tabla con de tres columnas en eso de (juninserver.com)
saludos.
Att.
Taurs