fixed o relative

sirdaiz · #1 (**permalink**) 25/08/2011, 02:22

Hola he usado fixed para hacer una pagian web sencilla, se ve correctamente en ie y mozilla lo malo es que no me aparece el scroll vertical, hay contenido mas abajo pero no deja bajar porque no hay scroll, se lo he puesto en el body a fuerza bruta pero tampoco hay la posibilidad de bajar

Entonces he decidido pasar a relative pero en ie me sale todo un churro (supongo que tendre que dar posiciones) pero aqui ya me sale el scroll vertical y puedo moverlo pero en mozilla las cajas salen bien pero no sale el scroll, os dejo el codigo aki

index.php

Código PHP:

Ver original<!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 type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.lksMenu.js"></script>
        <link rel="stylesheet" type="text/css" href="css/lksMenuSkin3.css" />
        <link rel="stylesheet" type="text/css" href="css/general.css" />
        <script>
        $('document').ready(function(){
            $('.menu').lksMenu();
        });
        </script>
    </head>
    <body>
    
    <DIV id="cabecera">
        <?php include ('vista/logotipo.php'); ?>
    </DIV>
    
    <DIV id="lateral" align="center">       
        <?php 
            include ('vista/marcas.php');
            do_marcas();
        ?>
    </DIV>
 
    <DIV id="principal"> 
            eggege<br>eggege<br>eggeg3232e<br>
        eggeg3232e<br>eggeg3232e<br>eg666geg3232e<br>eggeg3232e<br>eggeg3232e<br>  
    </DIV>
 
    <DIV id="pie">
 
            eggege<br>eggege<br>eggeg3232e<br>
        eggeg3232e<br>eggeg3232e<br>eg666geg3232e<br>eggeg3232e<br>eggeg3232e<br>
 
    </DIV>
 
 
    </body>
</html>

codigo .css de las cajas

Código CSS:

Ver original#cabecera {
  position: fixed;
  width: 100%;
  height: 18%;
  top: 5%;
  right: 0;
  bottom: auto;
  border-color: #aaaaaa;
  border-width: 1px;
  border-style: solid;
  text-align:center;
}
 
#lateral {
  position: fixed;
  width: 25%;
  height: auto;
  top: 30%;
  right: auto;
  bottom: 100px;
  left: 0;
  border-color: #aaaaaa;
  border-width: 1px;
  border-style: solid;
 
}
 
#principal {
  position: fixed;
  width: auto;
  height: auto;
  top: 30%;
  right: 0;
  left: 35%;
  bottom: 100px;
  border-color: #aaaaaa;
  border-width: 1px;
  border-style: solid;
  text-align:center;
}
 
#pie {
  position: fixed;
  width: 100%;
  height: 100px;
  top: 90%;
  right: 0;
  bottom: 0;
  left: 0;
  border-color: #aaaaaa;
  border-width: 1px;
  border-style: solid;
}

Gracias de antemano

Batan · #2 (**permalink**) 25/08/2011, 02:42

Ahora ya entiendo lo que quieres. Estabas maquetando el cuerpo de tu página, no hace falta posicionarlo de esa forma. Prueba esta.

Código HTML:

Ver original<div id="contenedor">
    <div id="cabecera">
    </div>
    <div id="cuerpo">
        <div id="lateral">
        </div>
        <div id="principal">
        </div>
    </div>
    <div id="pie">
    </div>
</div>

Agrego un contenedor para todo tus div.

Estilos

Código CSS:

Ver original#contenedor{
    width: 100%;
    height: auto;
    overflow: hidden;
    }
    
#cabecera{
    width: 100%;
    height: 100px;
    }
 
#cuerpo{
    width: 100%;
    height: auto;
    overflow: hidden;
    }
    
#lateral{
    width: 30%;
    height: 450px;
    float: left;
    overflow: hidden;
    }
 
#principal{
    width: 70%;
    height: 450px;
    float: left;
    }
 
#pie{
    width: 100%;
    height: 25px;
    }

Edito: En el HTML me falto poner un div al final para cerrar el contenedor.

sirdaiz · #3 (**permalink**) 25/08/2011, 03:13

Bueno decirte gracias es una buena solución, lo malo que no me sale todo el contenido del div pie, no se porque pero en ie me salen sin bordes los divs y en mozilla con bordes los divs q raro no?
He cambiado

pie{
width: 100%;
height: 25px;
}

por

pie{
width: 100%;
height: auto;
}

Me aparece ya la barra de scroll en ie pero en mozilla no xD

sirdaiz · #4 (**permalink**) 25/08/2011, 03:20

Ya esat solucionado, queda asi el .css

Código CSS:

Ver original#contenedor{
    width: 100%;
    height: auto;
    overflow: hidden;
    }
    
#cabecera{
    width: 100%;
    height: 100px;
    }
 
#cuerpo{
    width: 100%;
    height: auto;
    overflow: hidden;
    }
    
#lateral{
    width: 30%;
    height: 450px;
    float: left;
    overflow: hidden;
    }
 
#principal{
    width: 70%;
    height: auto;
    float: left;
    }
 
#pie{
    width: 100%;
    height: auto;
    }

Muchas gracias tio, ahi va un karma y ya habalre con tu jefe pa q te suba el sueldo xD

Saludos