Ver Mensaje Individual
  #4 (permalink)  
Antiguo 14/02/2012, 15:36
kseso?
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Problemas con un diseño fluid

Hay algunas cosillas...

Mira esta estructura, especialmente el css y compara las diferencias con la tuya. En especial con la barra del scroll (que se te "esconde").
Sólo visto en ff. Y suprimido el nav
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>Kseso? jugando con css</title>
  4. <style type="text/css">
  5. * {margin:0; padding:0;}
  6. html, body {
  7.   background: #CD3335;
  8.   height: 100%;
  9.   margin: 0;
  10.   overflow: hidden;
  11. }
  12. #page-wrapper {
  13.   width: 968px;
  14.   margin: 0 auto;
  15.   background: #FF9966;
  16. }
  17. #header {
  18.   background: #0060F0;
  19.   position: relative;
  20.   height: 50px;
  21. }
  22. #footer {  
  23.   background: #0060F0;
  24.   position: absolute;
  25.   bottom: 0;
  26.   height: 50px;
  27.   width: 968px;
  28. }
  29. #content-wrapper {
  30.   background: #FF9966;
  31.   bottom: 50px;
  32.   overflow: auto;
  33.   position: absolute;
  34.   top: 50px;
  35.   width: 968px;
  36. }
  37.  </style>
  38. </head>
  39. <div id="page-wrapper">
  40.     <div id="header">
  41.     </div>
  42.     <div id="content-wrapper">
  43.       <section>
  44. <p>Tempus Vivamus sollicitudin Morbi scelerisque pede velit mus egestas eros dui. Sed condimentum metus Donec ante convallis ut consectetuer nunc senectus pretium. Ornare congue massa est consequat tortor congue dolor fermentum nibh wisi. Et Curabitur pellentesque convallis.</p>
  45.       <p>Lorem ipsum dolor sit amet consectetuer Nunc Quisque wisi tincidunt molestie. Massa Nullam cursus Curabitur Vestibulum Nunc pede auctor cursus lacus ante. Aliquam magnis Duis tincidunt eget sollicitudin tincidunt laoreet ac dolor ac. Nam.</p>
  46. <p>Et eros laoreet mi pretium sem mauris at malesuada id eleifend. Pretium sed neque congue quis eleifend amet Pellentesque dictumst semper tellus. Enim nibh et commodo laoreet natoque Donec In non Phasellus Quisque. At Curabitur faucibus elit pede dolor elit quis pretium tortor turpis. Elit orci pretium risus semper at.</p>
  47. <p>Lorem congue ut Curabitur tortor pretium ipsum et Integer risus Donec. Auctor et sit cursus mauris ullamcorper amet et id consectetuer urna. Consequat nibh sapien velit leo nascetur massa est tristique tincidunt id. Pellentesque condimentum Duis velit Vivamus nibh natoque Curabitur congue nibh Vestibulum. Id nec vel Vivamus condimentum massa pharetra dis dolor justo consequat. Gravida velit Lorem et nibh Curabitur id hendrerit ac nonummy laoreet. Justo lobortis tincidunt nunc cursus lorem ac cursus lobortis Lorem vel. Pretium metus tempus mollis wisi.</p>
  48. <p>Tortor consequat nibh Morbi nec senectus suscipit justo fringilla porttitor Nam. Vestibulum id sem massa condimentum Morbi volutpat mauris Curabitur laoreet porttitor. Consectetuer fringilla fermentum semper vitae eros ullamcorper amet rutrum lorem habitasse. Dui libero laoreet Quisque turpis semper laoreet mi sed adipiscing semper. Consequat ac sem nec et vel ullamcorper volutpat venenatis Phasellus Nunc. Lorem scelerisque Aliquam turpis Nunc sit consequat vel vitae augue accumsan. Et mauris vitae volutpat Phasellus.</p>
  49. <p>Sed condimentum dapibus dui In et Integer enim penatibus et euismod. At laoreet sollicitudin orci et at sem volutpat ac tempor arcu. Magna nulla nulla consequat interdum eu Lorem in tempor cursus massa. Sed semper adipiscing sed gravida eget id urna interdum urna sit. Pretium semper habitant sed cursus quis consequat in Donec Aliquam augue. Nibh tincidunt dui In magna molestie tellus malesuada nibh pretium magnis. At metus turpis magna adipiscing sit ut sed egestas malesuada Nunc. Quis dolor fringilla eget molestie ac adipiscing vel ridiculus cursus mollis. Dui accumsan mauris justo convallis semper pede vel mauris at convallis. </p>
  50. <p>Elit Nulla nulla et urna congue lorem et nulla enim dignissim. Interdum quis consectetuer in quis Pellentesque augue ac turpis justo tincidunt. Congue velit nulla et ac quis leo in pede vel pellentesque. Orci Aenean pellentesque nunc nibh Donec feugiat hendrerit id semper senectus. Sed malesuada montes risus at at montes ac semper velit leo. Eu ullamcorper fringilla accumsan Aenean aliquam Vestibulum Vivamus consequat adipiscing tellus. Tellus convallis Vestibulum quis Suspendisse suscipit Morbi ac Aenean nibh laoreet. Fermentum tellus cursus Vestibulum condimentum odio tellus Quisque Nulla quis pede. Vivamus metus ipsum orci risus Nam sed justo ac.</p>
  51. <p>Nibh Nullam auctor dapibus faucibus purus Nullam Duis tincidunt elit vel. Pellentesque Sed mauris gravida elit elit dolor lacinia Curabitur Ut et. Dui laoreet malesuada Nam sagittis pede id Ut Pellentesque Donec Mauris. Elit elit et dui Nulla gravida consectetuer et congue Proin risus. Orci mus non Aenean nulla Nullam pretium tortor non libero convallis. Ipsum et tincidunt at interdum nec sem quis nibh justo dignissim. Curabitur fringilla dui tincidunt penatibus nibh tellus tristique neque ultrices Curabitur. Lacinia Sed ligula Vivamus amet ut vitae pharetra consequat eros Sed. Et dictum enim Lorem Donec Nulla.</p>
  52. <p>Tempus Vivamus sollicitudin Morbi scelerisque pede velit mus egestas eros dui. Sed condimentum metus Donec ante convallis ut consectetuer nunc senectus pretium. Ornare congue massa est consequat tortor congue dolor fermentum nibh wisi. Et Curabitur pellentesque convallis.</p>
  53. <p>FIN</p>
  54.       </section>        
  55.     </div>    
  56.     <div id="footer">
  57.     </div>
  58. </div>
  59. </body>
  60. </html>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++