Foros del Web » Creando para Internet » HTML »

centrar web en el explorador

 Estas en el tema de centrar web en el explorador en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/08/2008, 02:36
 
Fecha de Ingreso: junio-2008
Mensajes: 250
Antigüedad: 15 años, 10 meses
Puntos: 1
centrar web en el explorador
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
  #2 (permalink)  
Antiguo 06/08/2008, 06:41
Avatar de the_scorpion  
Fecha de Ingreso: mayo-2006
Ubicación: Cuba
Mensajes: 696
Antigüedad: 17 años, 11 meses
Puntos: 3
Respuesta: centrar web en el explorador
Hola
Chequea aqui, quizas de aquí puedas resolver tu problema ya que no postea parte de tu codigo inicial.
__________________
Que hablen mal de uno es espantoso. Pero hay algo peor: que no hablen.
Quien hace, puede equivocarse. Quien nada hace, ya está equivocado".
  #3 (permalink)  
Antiguo 06/08/2008, 09:02
 
Fecha de Ingreso: junio-2008
Mensajes: 250
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: centrar web en el explorador
Hola the_scorpion. Ya lo probe pero sigue sin funcionarme. La web está creada con capas <Div>. Muchas gracias
  #4 (permalink)  
Antiguo 06/08/2008, 11:23
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 18 años, 6 meses
Puntos: 3
Respuesta: centrar web en el explorador
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">
  #5 (permalink)  
Antiguo 07/08/2008, 02:55
 
Fecha de Ingreso: junio-2008
Mensajes: 250
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: centrar web en el explorador
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
  #6 (permalink)  
Antiguo 07/08/2008, 03:00
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: centrar web en el explorador
Muestra un enlace o tu código para que te podamos ayudar.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 07/08/2008, 03:33
 
Fecha de Ingreso: junio-2008
Mensajes: 250
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: centrar web en el explorador
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
  #8 (permalink)  
Antiguo 09/08/2008, 09:45
Avatar de DesignerStudio  
Fecha de Ingreso: agosto-2008
Mensajes: 6
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: centrar web en el explorador
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
  #9 (permalink)  
Antiguo 09/08/2008, 10:52
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: centrar web en el explorador
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.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 13/04/2009, 02:00
 
Fecha de Ingreso: diciembre-2008
Ubicación: Mi Casa =D
Mensajes: 292
Antigüedad: 15 años, 4 meses
Puntos: 5
Respuesta: centrar web en el explorador
Esto tampoco me funciona!!!
y see que se puede!!

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

Habbolibre


Quiero poder hacerlo!! porfavor ayudenme!!
  #11 (permalink)  
Antiguo 13/04/2009, 10:41
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.458
Antigüedad: 15 años, 9 meses
Puntos: 53
Respuesta: centrar web en el explorador
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
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #12 (permalink)  
Antiguo 13/04/2009, 23:46
 
Fecha de Ingreso: julio-2008
Mensajes: 8
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: centrar web en el explorador
Alinea la <div> con CSS.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:42.