Foros del Web » Creando para Internet » CSS »

fixed o relative

Estas en el tema de fixed o relative en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/08/2011, 03:22
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 6 años
Puntos: 21
fixed o relative

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4.  
  5.     <head>
  6.         <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  7.         <script type="text/javascript" src="js/jquery.lksMenu.js"></script>
  8.         <link rel="stylesheet" type="text/css" href="css/lksMenuSkin3.css" />
  9.         <link rel="stylesheet" type="text/css" href="css/general.css" />
  10.         <script>
  11.         $('document').ready(function(){
  12.             $('.menu').lksMenu();
  13.         });
  14.         </script>
  15.     </head>
  16.     <body>
  17.    
  18.     <DIV id="cabecera">
  19.         <?php include ('vista/logotipo.php'); ?>
  20.     </DIV>
  21.    
  22.     <DIV id="lateral" align="center">      
  23.         <?php
  24.             include ('vista/marcas.php');
  25.             do_marcas();
  26.         ?>
  27.     </DIV>
  28.  
  29.     <DIV id="principal">
  30.             eggege<br>eggege<br>eggeg3232e<br>
  31.         eggeg3232e<br>eggeg3232e<br>eg666geg3232e<br>eggeg3232e<br>eggeg3232e<br>  
  32.     </DIV>
  33.  
  34.     <DIV id="pie">
  35.  
  36.             eggege<br>eggege<br>eggeg3232e<br>
  37.         eggeg3232e<br>eggeg3232e<br>eg666geg3232e<br>eggeg3232e<br>eggeg3232e<br>
  38.  
  39.     </DIV>
  40.  
  41.  
  42.     </body>
  43. </html>

codigo .css de las cajas

Código CSS:
Ver original
  1. #cabecera {
  2.   position: fixed;
  3.   width: 100%;
  4.   height: 18%;
  5.   top: 5%;
  6.   right: 0;
  7.   bottom: auto;
  8.   border-color: #aaaaaa;
  9.   border-width: 1px;
  10.   border-style: solid;
  11.   text-align:center;
  12. }
  13.  
  14. #lateral {
  15.   position: fixed;
  16.   width: 25%;
  17.   height: auto;
  18.   top: 30%;
  19.   right: auto;
  20.   bottom: 100px;
  21.   left: 0;
  22.   border-color: #aaaaaa;
  23.   border-width: 1px;
  24.   border-style: solid;
  25.  
  26. }
  27.  
  28. #principal {
  29.   position: fixed;
  30.   width: auto;
  31.   height: auto;
  32.   top: 30%;
  33.   right: 0;
  34.   left: 35%;
  35.   bottom: 100px;
  36.   border-color: #aaaaaa;
  37.   border-width: 1px;
  38.   border-style: solid;
  39.   text-align:center;
  40. }
  41.  
  42. #pie {
  43.   position: fixed;
  44.   width: 100%;
  45.   height: 100px;
  46.   top: 90%;
  47.   right: 0;
  48.   bottom: 0;
  49.   left: 0;
  50.   border-color: #aaaaaa;
  51.   border-width: 1px;
  52.   border-style: solid;
  53. }


Gracias de antemano
  #2 (permalink)  
Antiguo 25/08/2011, 03:42
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 2 meses
Puntos: 63
Respuesta: fixed o relative

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
  1. <div id="contenedor">
  2.     <div id="cabecera">
  3.     </div>
  4.     <div id="cuerpo">
  5.         <div id="lateral">
  6.         </div>
  7.         <div id="principal">
  8.         </div>
  9.     </div>
  10.     <div id="pie">
  11.     </div>
  12. </div>
Agrego un contenedor para todo tus div.

Estilos
Código CSS:
Ver original
  1. #contenedor{
  2.     width: 100%;
  3.     height: auto;
  4.     overflow: hidden;
  5.     }
  6.    
  7. #cabecera{
  8.     width: 100%;
  9.     height: 100px;
  10.     }
  11.  
  12. #cuerpo{
  13.     width: 100%;
  14.     height: auto;
  15.     overflow: hidden;
  16.     }
  17.    
  18. #lateral{
  19.     width: 30%;
  20.     height: 450px;
  21.     float: left;
  22.     overflow: hidden;
  23.     }
  24.  
  25. #principal{
  26.     width: 70%;
  27.     height: 450px;
  28.     float: left;
  29.     }
  30.  
  31. #pie{
  32.     width: 100%;
  33.     height: 25px;
  34.     }


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

Última edición por Batan; 25/08/2011 a las 03:49
  #3 (permalink)  
Antiguo 25/08/2011, 04:13
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 6 años
Puntos: 21
Respuesta: fixed o relative

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
  #4 (permalink)  
Antiguo 25/08/2011, 04:20
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 6 años
Puntos: 21
Respuesta: fixed o relative

Ya esat solucionado, queda asi el .css

Código CSS:
Ver original
  1. #contenedor{
  2.     width: 100%;
  3.     height: auto;
  4.     overflow: hidden;
  5.     }
  6.    
  7. #cabecera{
  8.     width: 100%;
  9.     height: 100px;
  10.     }
  11.  
  12. #cuerpo{
  13.     width: 100%;
  14.     height: auto;
  15.     overflow: hidden;
  16.     }
  17.    
  18. #lateral{
  19.     width: 30%;
  20.     height: 450px;
  21.     float: left;
  22.     overflow: hidden;
  23.     }
  24.  
  25. #principal{
  26.     width: 70%;
  27.     height: auto;
  28.     float: left;
  29.     }
  30.  
  31. #pie{
  32.     width: 100%;
  33.     height: auto;
  34.     }

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

Saludos

Etiquetas: contenido, fixed, html, relative
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 13:43.