Foros del web, para los que viven de bits

cubis · 14-nov-2003, 07:51

Que tal foreros.

Hace algún tiempo estoy aprendiendo el modelo de cajas, usando XHTML + CSS, para dejar de lado las tablas. EL punto es que por ahora las webs las crearé solo para resoluciones 800x600, el problema radica en que cuando alguien vé una página en 1024x700 verá la primera caja en la izquierda.. por consiguiente las de adentro también.. lo que me gustaria saber es como hago para centrar la primera caja y asi las otras también para que cuando alguien vea la web en 1024x700 la vea centrada, uso la etiqueta DIV y me gustaria más si fuera agregandole algún estilo al CSS.

Les dejo un ejemplo por si no me entienden.. pero este es en tablas.

http://cubis.tribuxml.org/perfil.php

Lo que pueden hacer es cambiar la resolución de 800x600 a 1024x700y verán lo que pasa.

Gracias de antemano.

Saludos!

tunait · 14-nov-2003, 07:58

Para los navegadores que respetan los estándares se hace facil, basta con que pongas un margin:auto y listos.

Lo malo es que no furula para Explorer así que habrás de usar algún script que se encarge de centrar esa caja

cubis · 14-nov-2003, 09:17

Mmmm.. ya veo.. voy a probar en Mozilla a ver que pasa.. si alguien tiene por casualidad la solución o el Script del que habla tunait me podria ser de mucha ayuda.

Gracias!

cubis · 14-nov-2003, 09:30

Ya lo probé... y si.. con Mozilla si me lo centra en 1024x700 pero en IE nop... entonces... alguien tiene una solución para poder que me trabaje en los dos?

tunait · 14-nov-2003, 15:11

A ver si te sirve esto

function centra(){
if(navigator.appName == "Microsoft Internet Explorer"){
anchoVentana = document.body.scrollWidth
document.getElementById('pepe').style.left =(anchoVentana - document.getElementById('pepe').offsetWidth)/2
}
}

window.onload = centra;
window.onresize = centra;

Eso suponiendo que tu caja principal tuviera por id = "pepe"

cubis · 14-nov-2003, 20:56

Si tunait.. si sirvio!!!, pero como sabes, estoy trabajando XHTML y pues de esto surge otra duda que tu o alguien más me puede resolver:

En un principio tenia esto [prueba.htm]:

Código:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!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">
<head>
<script language="Javascript">
function centra(){
if(navigator.appName == "Microsoft Internet Explorer"){
anchoVentana = document.body.scrollWidth
document.getElementById('prueba').style.left =(anchoVentana - document.getElementById('prueba').offsetWidth)/2
}
}
window.onload = centra;
window.onresize = centra;
</script>
<title>Prueba</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="prueba.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="prueba"></div>
</body>
</html>

Y tenia unas CSS [prueba.css]

Código:

#prueba {
	background-color: #000000;
	height: 700px;
	width: 600px;
	margin: auto;
}

Y pues.. frustradamente me falló.. entonces pues lo primero que probé fue quitarle esta linea:

Código:

<?xml version="1.0" encoding="iso-8859-1" ?>

Y entonces.. si funciono.. entonces me entra la duda.. será que alguien sabe la forma de que pueda servir el Script si necesidad de quitar la linea del XML.

Saludos y de antemano gracias.

14-nov-2003, 07:51	#1 (permalink)
cubis Fecha de Ingreso: noviembre-2002 Ubicación: Medellín Mensajes: 1.056	Centrar Caja... DIV. Que tal foreros. Hace algún tiempo estoy aprendiendo el modelo de cajas, usando XHTML + CSS, para dejar de lado las tablas. EL punto es que por ahora las webs las crearé solo para resoluciones 800x600, el problema radica en que cuando alguien vé una página en 1024x700 verá la primera caja en la izquierda.. por consiguiente las de adentro también.. lo que me gustaria saber es como hago para centrar la primera caja y asi las otras también para que cuando alguien vea la web en 1024x700 la vea centrada, uso la etiqueta DIV y me gustaria más si fuera agregandole algún estilo al CSS. Les dejo un ejemplo por si no me entienden.. pero este es en tablas. http://cubis.tribuxml.org/perfil.php Lo que pueden hacer es cambiar la resolución de 800x600 a 1024x700y verán lo que pasa. Gracias de antemano. Saludos! __________________ [color=gray][size=1]Usuario Registrado de Linux #315639

14-nov-2003, 09:17	#3 (permalink)
cubis Fecha de Ingreso: noviembre-2002 Ubicación: Medellín Mensajes: 1.056	Mmmm.. ya veo.. voy a probar en Mozilla a ver que pasa.. si alguien tiene por casualidad la solución o el Script del que habla tunait me podria ser de mucha ayuda. Gracias! __________________ [color=gray][size=1]Usuario Registrado de Linux #315639

14-nov-2003, 09:30	#4 (permalink)
cubis Fecha de Ingreso: noviembre-2002 Ubicación: Medellín Mensajes: 1.056	Ya lo probé... y si.. con Mozilla si me lo centra en 1024x700 pero en IE nop... entonces... alguien tiene una solución para poder que me trabaje en los dos? __________________ [color=gray][size=1]Usuario Registrado de Linux #315639

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

14-nov-2003, 07:58	#2 (permalink)
tunait Moderadora Fecha de Ingreso: noviembre-2002 Ubicación: Terok Nor Mensajes: 14.964	Para los navegadores que respetan los estándares se hace facil, basta con que pongas un margin:auto y listos. Lo malo es que no furula para Explorer así que habrás de usar algún script que se encarge de centrar esa caja

14-nov-2003, 15:11	#5 (permalink)
tunait Moderadora Fecha de Ingreso: noviembre-2002 Ubicación: Terok Nor Mensajes: 14.964	A ver si te sirve esto function centra(){ if(navigator.appName == "Microsoft Internet Explorer"){ anchoVentana = document.body.scrollWidth document.getElementById('pepe').style.left =(anchoVentana - document.getElementById('pepe').offsetWidth)/2 } } window.onload = centra; window.onresize = centra; Eso suponiendo que tu caja principal tuviera por id = "pepe"