Centrar Caja... DIV.

cubis · #1 (**permalink**) 14/11/2003, 08: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 · #2 (**permalink**) 14/11/2003, 08: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 · #3 (**permalink**) 14/11/2003, 10: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 · #4 (**permalink**) 14/11/2003, 10: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 · #5 (**permalink**) 14/11/2003, 16: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 · #6 (**permalink**) 14/11/2003, 21: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.