centrar web en el explorador

igonfil · #1 (**permalink**) 06/08/2008, 02:36

Hola a tod@s tengo un problema que no se como resolver. Este problema consiste en que tengo creada con html una página web de una resolución de 1024x768px y lo que quisiera es que si una persona tiene una resolución mayor se viera centrada en el navegador no en el lado superior izquierda. Muchas gracias
Un saludo

the_scorpion · #2 (**permalink**) 06/08/2008, 06:41

Hola
Chequea aqui, quizas de aquí puedas resolver tu problema ya que no postea parte de tu codigo inicial.

igonfil · #3 (**permalink**) 06/08/2008, 09:02

Hola the_scorpion. Ya lo probe pero sigue sin funcionarme. La web está creada con capas <Div>. Muchas gracias

K-Yezaad · #4 (**permalink**) 06/08/2008, 11:23

la solucion esta en CSS:
body{margin:auto} o <body style="margin:auto"> si quieres hacerlo directamente.

Es posible que esta solucion o la anterior no te funcionen en IE, para validarlas debes "forzar" a Internet Explorer a que siga estas reglas agregando antes del tag <html>:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

igonfil · #5 (**permalink**) 07/08/2008, 02:55

Muchas gracias, pero sigo sin conseguir que se centre al navegador cuando la resolución sea mayor a 1024x768px y cuando sea la resolucion de 1024x768px la web se mantenga ocupando su lugar en el navegador, no entiendo por que razón no funcionará. Un saludo para todos

Mikmoro · #6 (**permalink**) 07/08/2008, 03:00

Muestra un enlace o tu código para que te podamos ayudar.

igonfil · #7 (**permalink**) 07/08/2008, 03:33

El código de la web que quiero centrar es el siguiente:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>XL Movil</title>
    <link href="res/css/xl.css" rel="stylesheet" type="text/css" />
    
   <script type="text/javascript">
//   Con esta funcion lo que hacemos es que la capa de seguridad, libertad y Ahorro se haga visible o no 
    function cambiaCapa (nombre, action)
    {           
        var oLayer =  document.getElementById(nombre);
               
        if (action == "ocultar")
        {        
            oLayer.className = "oculto";        
        } 
        else
        {
            oLayer.className = "visible";
        }
    }  
</script>
 
</head>

<body Scroll="no">
    <form id="form1" runat="server">
    <div style="position:absolute; left:0px; top:0px">
       <img src="res/img/FondoJunior.jpg">
    </div>
    <!--<div style="position:absolute; left:436px; top:379px">
        <img  src="res/img/TablaTarif.JPG" />
    </div>-->
    <div style="position:absolute; left:880px; top: 4px">
        <img src="res/img/LogoXL.jpg"/>    
    </div>
    <div class="texto" style="position: absolute; left:480px; top:90px; width:500px; float:left">
        Alta e información: 900 85 85 85 o en agencia Marsans
    </div>
 
    
    <div  style="position:absolute; left:865px; top:135px; cursor:pointer">
        <a onclick="cambiaCapa('capa1','ver')"><img alt="" src="res/img/Boton_Segur.jpg" /></a>
    </div>
    <div class="textoPeq" style="position:absolute; left:820px; top:170px; width:150px" >
        Tu hijo podrá hablar cuando lo necesite ...
    </div>    
    <div style="position:absolute; left:865px; top: 219px; z-index:2; cursor:pointer">
        <a onclick="cambiaCapa('capa2','ver')"><img src="res/img/Boton_Liber.jpg"/></a>
    </div>
    <div class = "textoPeq" style="position:absolute; left:850px; top:257px; width:120px">
        también con quien él desee y ...
    </div>
    <div style="position:absolute; left:865px; top:305px; z-index:4; cursor:pointer">
        <a onclick="cambiaCapa('capa4','ver')"><img src="res/img/Boton_Ahorro.jpg"/></a>
    </div>
    <div class ="textoPeq" style="position:absolute; left:850px; top:340px; width:120px">
        tu tienes el control del gasto.
    </div>
    <div style="position:absolute; left:899px; top:420px; z-index:4; cursor:pointer">
        <a onclick="cambiaCapa('capa5','ver')"><img alt="" src="res/img/Boton_TarifasSeJu.jpg"/></a>
    </div>
    <div class="texto" style="position: absolute; left:460px; top:500px; width:460px">
        Con XL JUNIOR tu hijo podrá hablar con hasta diez números que tu elijas sin límite. El coste irá directamente a tu cuenta bancaria, pero además tendrá libertad para llamar al resto de números en prepago.
    </div>
    <div class="textoMay" style="position: absolute; left:460px; top:560px; width:460px">
        GANAS EN SEGURIDAD, LIBERTAD Y AHORRO.
    </div>
    
    
    <div id="capa3"  style="position: absolute; left:424px; top:127px; z-index:0;">
    
        <embed src="res/img/XLJunior.swf" width="299px" height="209px" >
        
        </embed> 
    </div>
    
    
   
   <div style="position: absolute; left:885px; top:560px">
        <a href="index.htm"><img src="res/img/Boton_Volver.jpg" /></a>
    </div>
    
    <div style="position:absolute; top:170px; left:800px; background:white; height:210px; width:200px; border:1; border-color:blue; z-index:15" id="capa1" class="oculto">
        <div style="position:absolute;top:3px; right:5px">
            <button id="opRadioOcultar" name="ocultar" onclick="cambiaCapa('capa1','ocultar');" style="height:21px; width:20px; cursor:pointer; float:left"><img src="res/img/cerrar.jpg" id="IMG1" style="position:absolute; top:3px; left:3px"></button>
        </div>
        <div style="position:absolute; width:160px; top:30px; left:15px" class="textonota">
            SEGURIDAD PARA ÉL O ELLA.  Quien tú has elegido podrá hablar siempre con los números que tú has elegido. Tú le brindas esta posibilidad porque el cargo va a tú cuenta bancaria.
        </div>
    </div>
    <div style="position:absolute; top:250px; left:800px; background:white; height:130px; width:200px; z-index:15" id="capa2" class="oculto">
        <div style="position:absolute;top:3px; right:5px;">
            <button id="Button1" name="ocultar" onclick="cambiaCapa('capa2','ocultar')" style="height:21px; width:20px; cursor:pointer; float:left"><img src="res/img/cerrar.jpg" id="IMG2" style="position:absolute; top:3px; left:3px"></button>
        </div>
        <div style="position:absolute; width:160px; top:30px; left:15px" class="textonota">
            LIBERTAD para que la persona que tú has elegido llame a quien desee sin límite  (mediante tarjeta de prepago).
        </div>
    </div>
    
    <div style="position:absolute; top:115px; left:800px; background:white; height:180px; width:200px; z-index:15" id="capa4" class="oculto">
        <div style="position:absolute;top:3px; right:5px;">
            <button id="Button2" name="ocultar" onclick="cambiaCapa('capa4','ocultar')" style="height:21px; width:20px; cursor:pointer; float:left"><img src="res/img/cerrar.jpg" id="IMG3" style="position:absolute; top:3px; left:3px"></button>
        </div>
        <div style="position:absolute; width:160px; top:30px; left:15px" class="textonota">
            AHORRO. Tú tienes el control del gasto, porque eliges hasta 10 números a los cuales se podrá comunicar quién tú has elegido; con un consumo mínimo mensual de 9 euros y un contrato de permanencia de 18 meses.
        </div>
    </div>
    <div style="position:absolute; top:120px; left:820px; background:white; height:300px; width:200px; border:1; z-index:15" id="capa5" class="oculto">
        <div style="position:absolute;top:3px; right:25px">
            <button id="Button3" name="ocultar" onclick="cambiaCapa('capa5','ocultar');" style="height:21px; width:20px; cursor:pointer; float:left"><img src="res/img/cerrar.jpg" id="IMG4" style="position:absolute; top:3px; left:3px"></button>
        </div>
        <div style="position:absolute; width:130px; top:30px; left:20px" class="textonota">
            TARIFAS NACIONALES. PENÍNSULA Y BALEARES. Precios €
        </div>
        <div style="position:absolute; width:130px; top:95px; left:20px" class="textonota">
            Llamada 0,12 € min (0,14 IVA incl.). 
        </div>
        <div style="position:absolute; width:130px; top:135px; left:20px" class="textonota">
            Establecimiento 0,15 (0,17 IVA incl.).  
        </div>
        <div style="position:absolute; width:130px; top:175px; left:20px" class="textonota">
            SMS 0,12 (0,14 IVA Incl.). 
        </div>
        <div style="position:absolute; width:130px; top:215px; left:20px" class="textonota">
            MMS 0,50 (0,58 IVA incl.). 
        </div>
        <div style="position:absolute; width:130px; top:255px; left:20px" class="textonota">
            Datos 0,50 (0,58 IVA Incl.)
        </div>
    </div>
    
    </form>
</body>
</html>

Muchas gracias

DesignerStudio · #8 (**permalink**) 09/08/2008, 09:45

Prueba a poner una etiqueta div que abarque todo el body.
ejem. <div align="center">aqui todo el resto del código y luego cierra</div>
-------------
Saludos
www.designerstudio.es

Mikmoro · #9 (**permalink**) 09/08/2008, 10:52

Si usas posiciones absolutas no va a poder centrar tu web sin más.
La solución más correcta a mi entender es un combinado de las anteriores con algún añadido:

1.- En primer lugar pon el doctype adecuado como te dice K-Yezaad. El más apropiado en tu caso puede ser este:

Cita:

<!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" lang="es-es">

2.- En segundo lugar encierra todo en un envoltorio general (div) como te dice DesignerStudio, pero en lugar de poner el estilo y el center en él ponle un identificador:

Cita:

<div id="contenedor">... y cierras al final </div>

3.- Ahora en tu hola de estilo añade este selector:

Cita:

#contenedor {margin: 0 auto; position: relative; width: 1000px: (o el ancho que quieras)}

Con esto hemos conseguido por un lado centrar el contenedor (margin: 0 auto;), y por otro, que las posiciones absolutas de las cajas que tendrá dentro lo sean con respecto de él gracias a la posición relativa.

Pruébalo y comentas.

alex1195 · #10 (**permalink**) 13/04/2009, 02:00

Esto tampoco me funciona!!!
y see que se puede!!

ESTAS WEBS LO HACEN!!
www.mentesenfermas.com.mx

Habbolibre

Quiero poder hacerlo!! porfavor ayudenme!!

gVenom · #11 (**permalink**) 13/04/2009, 10:41

Saludos.

Voy a meter la cuchara yo.

.

Creo que falta algo importante, como lo es el código CSS, y asi no trabajar con supuestos, suponiendo que el código esta como nosotros creemos que esta. Asi que si puedes, pon tu CSS

Ulkanova · #12 (**permalink**) 13/04/2009, 23:46

Alinea la <div> con CSS.