Foros del Web » Creando para Internet » CSS »

Una barra que se pegue en el bottom de toda la página

Estas en el tema de Una barra que se pegue en el bottom de toda la página en el foro de CSS en Foros del Web. Que tal a todos! Tengo un problemón: Vieron las webs que visitan? que tienen una barra que se pega bién abajo de todo, mostrando un ...
  #1 (permalink)  
Antiguo 07/01/2012, 19:23
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos Aires, GBA Zona Norte
Mensajes: 10
Antigüedad: 12 años, 10 meses
Puntos: 0
Una barra que se pegue en el bottom de toda la página

Que tal a todos!

Tengo un problemón:

Vieron las webs que visitan? que tienen una barra que se pega bién abajo de todo, mostrando un copyright, año, etc?

bueno, lo intenté en mi código, googleando por varios sitios, intentando parecidos de un pedazo de código a otro.
El resultado es el mismo: Al tener más contenido en la mísma página (fuera del margen de visión), al scrollear se ve que está colgado en la misma posición, y no se mantiene pegado debajo de todo.

Les dejo el código CSS que escribí:
Código HTML:
   #bottom{
    position: absolute;
    bottom: 0px; 
    width: 600px;
    height: 25px;
    background: #222;
    box-shadow: 0px 0px 4px rgba(255,255,255,1);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
   }
y el html que es simplemente:
Código HTML:
<div id="bottom">
</div> 
Si por las dudas necesitan el código completo, pidanmeló (no es mucho, menú, el medio, y el título)
¿Me equivoqué en algo? ¿Me faltó más código?...
Bueno eso no más, me embolé pensando qué tengo que escribir, puede ser un error muy de salame y que no me esté dando cuenta :S

¡Gracias, es un buen foro y ejemplar! ¡de programadores para programadores !

Última edición por doom13; 07/01/2012 a las 19:28
  #2 (permalink)  
Antiguo 07/01/2012, 19:30
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Una barra que se pegue en el bottom de toda la página

Código CSS:
Ver original
  1. position fixed;
  2. bottom: 0;

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 07/01/2012, 19:49
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos Aires, GBA Zona Norte
Mensajes: 10
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Una barra que se pegue en el bottom de toda la página

Cita:
Iniciado por emprear Ver Mensaje
Código CSS:
Ver original
  1. position fixed;
  2. bottom: 0;

SAludos
¡Me sirve para el menú! :D Al parecer me expresé mal.

La idea es que quede abajo de toda la página, no que se pegue al browser

Te pido disculpas si me expresé mal :S
  #4 (permalink)  
Antiguo 07/01/2012, 20:00
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Una barra que se pegue en el bottom de toda la página

No entiendo bien

si haces

Código HTML:
Ver original
  1. <div>
  2. arriba
  3. </div>
  4. <div>
  5. medio
  6. </div>
  7. <div>
  8. abajo
  9. </div>

sin darle posicionamiento alguno a las capas, el div abajo, va a quedar siempre abajo, es el orden natural. sacale el absolute y el bottom a esa capa que tenes, aver si es eso lo que querés

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 07/01/2012, 20:58
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos Aires, GBA Zona Norte
Mensajes: 10
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Una barra que se pegue en el bottom de toda la página

Mi estructura es la siguiente:

Código HTML:
 <body>
 <!-- Esto está arriba de todo-->
 <div id="top-title"><center>D4mnat1on</center></div>

 <!-- Esto debería estar a la izquierda del contenido-->
 <div id="menu">
   Menu <br> <br>
   <a href="index.htm">Intro</a><br>
   <a href="otro link">otra web</a><br>
   <a href="otro link">otro lugar</a><br>
  </div>

  <!-- Contenido -->
  <div id="mid">
   Texto a escribir <br>
   <br>
   <br>
   <br>
   espacio para demostrar que al scrollear la barra HACIA abajo el bottom se queda en un punto de la página, y no que se queda abajo de todo.
   <br>
   <br>
   <br>
   <br>
   <br>
   a
  </div>
  
  <!-- Esto debe estar siempre debajo de toda la web, pero no pegado al browser sino que, al scrollear abajo de todo, se vea esto:... -->
  <div id="bottom">
   Diseñado a código por doom13. 2012. Todos los derechos reservados.
  </div>
 </body> 
o sea quiero que salga de la siguiente forma:

[top-title]
[menu]
| [mid]
[bottom]



:S
  #6 (permalink)  
Antiguo 07/01/2012, 21:16
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Una barra que se pegue en el bottom de toda la página

a ver esto
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. #top-title {
  10. background-color: red;
  11. }
  12.  
  13. #menu{
  14. float: left;
  15. background-color: cyan;
  16. }
  17.  
  18. #mid {
  19. float: left;
  20. background-color: yellow;
  21. }
  22.  
  23.   #bottom{
  24. clear: both;
  25.    width: 600px;
  26.    height: 25px;
  27.    background: #222;
  28.    box-shadow: 0px 0px 4px rgba(255,255,255,1);
  29.    border-top-left-radius: 100px;
  30.    border-top-right-radius: 100px;
  31.    border-bottom-left-radius: 0px;
  32.    border-bottom-right-radius: 0px;
  33.   }
  34.  
  35. /*]]>*/
  36. </head>
  37.  <body>
  38.  <!-- Esto está arriba de todo-->
  39.  <div id="top-title"><center>D4mnat1on</center></div>
  40.  
  41.  <!-- Esto debería estar a la izquierda del contenido-->
  42.  <div id="menu">
  43.    Menu <br /> <br />
  44.    <a href="index.htm">Intro</a><br />
  45.    <a href="otro.link">otra web</a><br />
  46.    <a href="otro.link">otro lugar</a><br />
  47.   </div>
  48.  
  49.   <!-- Contenido -->
  50.   <div id="mid">
  51.    Texto a escribir <br />
  52.    <br />
  53.    <br />
  54.    <br />
  55.    espacio para demostrar que al scrollear la barra HACIA abajo el bottom se queda en un punto de la página, y no que se queda abajo de todo.
  56.    <br />
  57.    <br />
  58.    <br />
  59.    <br />
  60.    <br />
  61.    a
  62.   </div>
  63.  
  64.   <!-- Esto debe estar siempre debajo de toda la web, pero no pegado al browser sino que, al scrollear abajo de todo, se vea esto:... -->
  65.   <div id="bottom">
  66.    Diseñado a código por doom13. 2012. Todos los derechos reservados.
  67.   </div>
  68.  </body>
  69. </html>

no es fácil entender exactamente

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 07/01/2012, 21:54
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos Aires, GBA Zona Norte
Mensajes: 10
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Una barra que se pegue en el bottom de toda la página

Cita:
Iniciado por emprear Ver Mensaje
a ver esto
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. #top-title {
  10. background-color: red;
  11. }
  12.  
  13. #menu{
  14. float: left;
  15. background-color: cyan;
  16. }
  17.  
  18. #mid {
  19. float: left;
  20. background-color: yellow;
  21. }
  22.  
  23.   #bottom{
  24. clear: both;
  25.    width: 600px;
  26.    height: 25px;
  27.    background: #222;
  28.    box-shadow: 0px 0px 4px rgba(255,255,255,1);
  29.    border-top-left-radius: 100px;
  30.    border-top-right-radius: 100px;
  31.    border-bottom-left-radius: 0px;
  32.    border-bottom-right-radius: 0px;
  33.   }
  34.  
  35. /*]]>*/
  36. </head>
  37.  <body>
  38.  <!-- Esto está arriba de todo-->
  39.  <div id="top-title"><center>D4mnat1on</center></div>
  40.  
  41.  <!-- Esto debería estar a la izquierda del contenido-->
  42.  <div id="menu">
  43.    Menu <br /> <br />
  44.    <a href="index.htm">Intro</a><br />
  45.    <a href="otro.link">otra web</a><br />
  46.    <a href="otro.link">otro lugar</a><br />
  47.   </div>
  48.  
  49.   <!-- Contenido -->
  50.   <div id="mid">
  51.    Texto a escribir <br />
  52.    <br />
  53.    <br />
  54.    <br />
  55.    espacio para demostrar que al scrollear la barra HACIA abajo el bottom se queda en un punto de la página, y no que se queda abajo de todo.
  56.    <br />
  57.    <br />
  58.    <br />
  59.    <br />
  60.    <br />
  61.    a
  62.   </div>
  63.  
  64.   <!-- Esto debe estar siempre debajo de toda la web, pero no pegado al browser sino que, al scrollear abajo de todo, se vea esto:... -->
  65.   <div id="bottom">
  66.    Diseñado a código por doom13. 2012. Todos los derechos reservados.
  67.   </div>
  68.  </body>
  69. </html>

no es fácil entender exactamente

Saludos
Gracias, me quedé pensando y comparando, me dí cuenta que hice cualquiera jajajaj. Te agradezco por recordar el concepto básico de las capas.

¡Finalmente lo pude arreglar! Gracias por tu atención y paciencia y te pido disculpas. A veces soy muy duro en pensamiento ^^.

Etiquetas: barra, bottom, html, página, fondo
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 11:35.