Tema: Problema con posicionamiento fijo
Ver Mensaje Individual
  #12 (permalink)  
Antiguo 29/03/2013, 09:22
Avatar de temerariomalaga
temerariomalaga
 
Fecha de Ingreso: marzo-2013
Ubicación: Londres
Mensajes: 156
Antigüedad: 11 años, 8 meses
Puntos: 9
Respuesta: Problema con posicionamiento fijo
Cita:
Iniciado por Bonez Ver Mensaje
Sin ver el código completo o a trozos es más difícil saber lo que pasa.

Como ya dije, en caso de haber una imagen de fondo se va a volver más difícil hallar una solución, y eventualmente llegar a ser imposible sólo con CSS.
Pues ahí va el código completo de HTML de dicha página y el CSS correspondiente a las clases que se encuentran en esta página. A ver que se puede hacer, si no pues a acortar la página para que no salga el scroll en el índice
Código HTML: 
Ver original
  1. <body>
  2.         <div id="banner">
  3.             <img src="images/banner.gif">
  4.         </div>
  5.         <div id="menu">
  6.             <ul>
  7.                 <li><a href="index.html">inicio</a>
  8.                 <li><a href="firmas.html">firmas</a>
  9.                 <li><a href="productos.html">productos</a>
  10.                 <li><a href="descargas.html">descargas</a>
  11.                 <li><a href="contacto.php">contacto</a>
  12.             </ul>
  13.         </div>
  14.         <div id="text">
  15.             <div id="notice">
  16.                 <p id="cabecera">Novedades</p>
  17.                 <!--<p class="noticia"><img src="images/arrow.jpg"/>En la sección de contacto encontrará un formulario que puede rellenar para realizar cualquier pregunta o solicitar su clave de descarga.<br><span class="fecha"> Publicado el 30/03/13</span></p>
  18.                 <p class="noticia"><img src="images/arrow.jpg"/>Nueva página!! Ahora podrá acceder desde la siguiente dirección: <a href="http://representacionessuviri.t15.org/">representacionessuviri.t15.org</a><br><span class="fecha"> Publicado el 30/03/13</span></p>-->
  19.                 <p class="noticia"><img src="images/arrow.jpg"/>El día 30 de marzo se procederá a cambiar el servidor de la web, cambiando también su dirección. Más noticias el día 30.<br><span class="fecha"> Publicado el 28/03/13</span></p>
  20.                 <p class="noticia"><img src="images/arrow.jpg"/>Ya está disponible el catálogo de Rovimat de 2013. Búsquelo en la sección de descargas y no olvide solicitar su clave.<br><span class="fecha"> Publicado el 28/03/13</span></p>
  21.                 <p class="noticia"><img src="images/arrow.jpg"/>Próximamente la web cambiará de dirección, permanezca atento al tablón de novedades.<br><span class="fecha"> Publicado el 27/03/13</span></p>
  22.                 <p class="noticia"><img src="images/arrow.jpg"/>En esta sección podrá ver las novedades referentes a la web.<br><span class="fecha"> Publicado el 27/03/13</span></p>
  23.             </div>
  24.             <div id="c_9d860e05b22e7fbbfb77830a8c791734" class="tiempo"></div><script type="text/javascript" src="http://www.eltiempo.es/widget/widget_loader/9d860e05b22e7fbbfb77830a8c791734"></script>
  25.             <h1>Representaciones Suviri</h1>
  26.             <p>Jesús Suviri, desde 1989 dedicado a la representacion de firmas relacionadas con la cocina, el baño, materiales de construccion, etc... trabajando directamente con profesionales especializados en el sector, en toda la Provincia de Málaga.</p>
  27. </div>
Código CSS: 
Ver original
  1. body {
  2.     background: url('images/background.jpg') repeat-y;
  3.     }
  4. #banner {
  5.     position: fixed;
  6.     top: 0px;
  7.     background: url('images/background.jpg') repeat-x;
  8.     padding-left: 300px;
  9.     }
  10. #menu {
  11.     text-align: center;
  12.     list-style-type: none;
  13.     position: fixed;
  14.     top: 130px;
  15.     background: url('images/background.jpg');
  16.     padding-left: 400px;
  17.     }
  18. #menu li a {
  19.     color: #000;
  20.     font-size: 25px;
  21.     font-family: "Comic Sans MS";
  22.     font-weight: bold;
  23.     text-transform: uppercase;
  24.     text-decoration: none;
  25.     padding-left: 20px;
  26.     padding-right: 20px;
  27.     padding-top: 7px;
  28.     padding-bottom: 7px;
  29.     }
  30. #menu li {
  31.     display: inline;
  32.     background-color: #CC6600;
  33.     text-align: center;
  34.     padding-top: 24px;
  35.     padding-bottom: 17px;
  36.     }
  37. #menu a:hover {
  38.     background-color: #00FFFF;
  39.     }
  40. #text {
  41.     margin-left: 30px;
  42.     padding-top: 250px;
  43.     }
  44. #notice{
  45.     float: right;
  46.     border: 3px solid #CC6600;
  47.     height: 300px;
  48.     width: 300px;
  49.     overflow:auto;
  50.     }
  51. #notice p{
  52.     text-align: center;
  53.     }
  54. #cabecera{
  55.     background-color: #CC6600;
  56.     margin-top: -3px;
  57.     position: fixed;
  58.     width: inherit;
  59.     }
  60. #notice img{
  61.     margin-left: 0px;
  62.     margin-right: 5px;
  63.     }
  64. .fecha {
  65.     font-size: 15px;
  66.     }
  67. .noticia{
  68.     padding-top: 5px;
  69.     }
  70. .tiempo{
  71.     float: right;
  72.     clear: right;
  73.     margin-top: 20px;
  74.     }
__________________
Málaga Club de Fútbol: Memoria, Compromiso, Fe