Foros del Web » Creando para Internet » HTML »

Centrar Caja... DIV.

Estas en el tema de Centrar Caja... DIV. en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/11/2003, 08:51
Avatar de cubis  
Fecha de Ingreso: abril-2002
Ubicación: Medellín
Mensajes: 1.040
Antigüedad: 15 años, 7 meses
Puntos: 2
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
  #2 (permalink)  
Antiguo 14/11/2003, 08:58
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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
  #3 (permalink)  
Antiguo 14/11/2003, 10:17
Avatar de cubis  
Fecha de Ingreso: abril-2002
Ubicación: Medellín
Mensajes: 1.040
Antigüedad: 15 años, 7 meses
Puntos: 2
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
  #4 (permalink)  
Antiguo 14/11/2003, 10:30
Avatar de cubis  
Fecha de Ingreso: abril-2002
Ubicación: Medellín
Mensajes: 1.040
Antigüedad: 15 años, 7 meses
Puntos: 2
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
  #5 (permalink)  
Antiguo 14/11/2003, 16:11
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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"
  #6 (permalink)  
Antiguo 14/11/2003, 21:56
Avatar de cubis  
Fecha de Ingreso: abril-2002
Ubicación: Medellín
Mensajes: 1.040
Antigüedad: 15 años, 7 meses
Puntos: 2
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.
__________________
[color=gray][size=1]Usuario Registrado de Linux #315639
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:27.