Tema: Pie siempre abajo dentro de un marco
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/03/2011, 11:34
Oscareverb
 
Fecha de Ingreso: febrero-2011
Ubicación: Vigo
Mensajes: 32
Antigüedad: 13 años, 8 meses
Puntos: 2
Pie siempre abajo dentro de un marco
Hola a todos, tengo un un problema a la hora de diseñar una web con el pie siempre abajo, he probado con varios manuales los cuales me han servido a la perfección pero... el problema viene cuando ese contenedor lo meto dentro de otro para aplicarle un marco de de otro color o unos bordes de otro color.

Supongo que con esto no me he explicado lo suficientemente bien, a si que os dejo el código para que le echeis un vistazo. Gracias.
Código HTML: 
Ver original
  1. <head>
  2. </head>
  3. <body>
  4.  
  5. <div id="contenedor">
  6.  
  7. <div id="marco">
  8.  
  9.    <div id="contenido">
  10.        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis pellentesque odio, quis lacinia libero euismod in. Vestibulum eget magna et libero malesuada faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi semper augue purus, nec tristique nisl. Nam varius dictum consequat. Nulla volutpat, tortor ut vestibulum feugiat, mauris velit congue nunc, a consequat quam enim eget tortor. Nullam pulvinar bibendum massa in ullamcorper. Duis consequat tortor eu velit elementum nec viverra eros congue. Aliquam erat volutpat. Ut elementum lectus ut est egestas mattis. Integer non elit non ante tristique lobortis. Etiam lacinia tempus nulla et suscipit. Nullam sem metus, facilisis id faucibus sed, fringilla a quam. Etiam volutpat vestibulum euismod. Integer vel massa at risus aliquet semper eget ut massa. Proin dapibus, lacus dignissim ullamcorper molestie, justo nisl bibendum nisi, eget cursus quam nisi sit amet tellus. Aenean pharetra pretium pharetra. Nam id urna justo, sit amet interdum nunc. Maecenas rhoncus varius dolor, eget tristique risus volutpat ac. Aenean vitae auctor justo. 
  11.        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis pellentesque odio, quis lacinia libero euismod in. Vestibulum eget magna et libero malesuada faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi semper augue purus, nec tristique nisl. Nam varius dictum consequat. Nulla volutpat, tortor ut vestibulum feugiat, mauris velit congue nunc, a consequat quam enim eget tortor. Nullam pulvinar bibendum massa in ullamcorper. Duis consequat tortor eu velit elementum nec viverra eros congue. Aliquam erat volutpat. Ut elementum lectus ut est egestas mattis. Integer non elit non ante tristique lobortis. Etiam lacinia tempus nulla et suscipit. Nullam sem metus, facilisis id faucibus sed, fringilla a quam. Etiam volutpat vestibulum euismod. Integer vel massa at risus aliquet semper eget ut massa. Proin dapibus, lacus dignissim ullamcorper molestie, justo nisl bibendum nisi, eget cursus quam nisi sit amet tellus. Aenean pharetra pretium pharetra. Nam id urna justo, sit amet interdum nunc. Maecenas rhoncus varius dolor, eget tristique risus volutpat ac. Aenean vitae auctor justo. 
  12.        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis pellentesque odio, quis lacinia libero euismod in. Vestibulum eget magna et libero malesuada faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi semper augue purus, nec tristique nisl. Nam varius dictum consequat. Nulla volutpat, tortor ut vestibulum feugiat, mauris velit congue nunc, a consequat quam enim eget tortor. Nullam pulvinar bibendum massa in ullamcorper. Duis consequat tortor eu velit elementum nec viverra eros congue. Aliquam erat volutpat. Ut elementum lectus ut est egestas mattis. Integer non elit non ante tristique lobortis. Etiam lacinia tempus nulla et suscipit. Nullam sem metus, facilisis id faucibus sed, fringilla a quam. Etiam volutpat vestibulum euismod. Integer vel massa at risus aliquet semper eget ut massa. Proin dapibus, lacus dignissim ullamcorper molestie, justo nisl bibendum nisi, eget cursus quam nisi sit amet tellus. Aenean pharetra pretium pharetra. Nam id urna justo, sit amet interdum nunc. Maecenas rhoncus varius dolor, eget tristique risus volutpat ac. Aenean vitae auctor justo.</p> 
  13.    </div>  
  14.   
  15. </div>
  16.  <div id="corte"></div> 
  17.    </div>
  18. <div id="pie">
  19. </div>
  20.  
  21. </body>
[/HTML]

Aquí os dejo el CSS, la caja id="marco" es la que utilizo para crear un marco gris de 10px en ambos lados, mi objetivo es que esos marco lleguen hasta abajo de la página aun que el texto del contenido este por la mitad, pero al darle la "position:absolute" el texto pasas por debajo del pie y se me descuadra el diseño.
Código CSS: 
Ver original
  1. * {
  2.     margin:0;
  3.     padding:0;
  4.     border:0;
  5.     outline:0;
  6. }
  7. html, body {
  8.     height:100%;
  9. }
  10. body {
  11.     background-color:#555555;
  12. }
  13. p {
  14.     padding:10px;
  15. }
  16. #contenedor {
  17.     width:960px;
  18.     min-height:100%;
  19.     height:auto !important;
  20.     height:100%;
  21.     margin:0 auto -40px;
  22.     border-left:1px solid #fff;
  23.     border-right:1px solid #fff;
  24.     background-color:#eaeaea;
  25. }
  26. #marco {
  27.     width:960;
  28.     position:absolute;
  29.     height:100%;
  30.     min-height:100%;
  31.     height:auto !important;
  32.     margin:0 auto;
  33.     border-right:10px solid #a0a0a0;
  34.     border-left:10px solid #a0a0a0;
  35. }
  36.     
  37. #contenido {
  38.     position:relative;
  39.     width:940px;
  40.     height:100%;
  41.     margin:0 auto;
  42. }
  43. #corte {
  44.     clear:both;
  45.     height:40px;
  46. }
  47. #pie {
  48.     clear:both;
  49.     width:940px;
  50.     height:40px;
  51.     margin:0 auto;
  52.     border-right:10px solid #a0a0a0;
  53.     border-left:10px solid #a0a0a0;
  54.     background-color:#000;
  55. }

No se si con esto me he explicado bien, pondre una imagen si hace falta.