Foros del Web » Diseño de Sitios web » 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, 18:23
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos Aires, GBA Zona Norte
Mensajes: 10
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 18:28
  #2 (permalink)  
Antiguo 07/01/2012, 18:30
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: Castelar
Mensajes: 4.702
Respuesta: Una barra que se pegue en el bottom de toda la página
Código CSS: 
Ver originalCopiar
  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, 18:49
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos Aires, GBA Zona Norte
Mensajes: 10
Respuesta: Una barra que se pegue en el bottom de toda la página
Cita:
Iniciado por emprear Ver Mensaje
Código CSS: 
Ver originalCopiar
  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, 19:00
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: Castelar
Mensajes: 4.702
Respuesta: Una barra que se pegue en el bottom de toda la página
No entiendo bien

si haces

Código HTML: 
Ver originalCopiar
  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, 19:58
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos Aires, GBA Zona Norte
Mensajes: 10
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, 20:16
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: Castelar
Mensajes: 4.702
Respuesta: Una barra que se pegue en el bottom de toda la página
a ver esto
Código HTML: 
Ver originalCopiar
  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. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.  
  8. <style type="text/css">
  9. /*<![CDATA[*/
  10. #top-title {
  11. background-color: red;
  12. }
  13.  
  14. #menu{
  15. float: left;
  16. background-color: cyan;
  17. }
  18.  
  19. #mid {
  20. float: left;
  21. background-color: yellow;
  22. }
  23.  
  24.    #bottom{
  25. clear: both;
  26.     width: 600px;
  27.     height: 25px;
  28.     background: #222;
  29.     box-shadow: 0px 0px 4px rgba(255,255,255,1);
  30.     border-top-left-radius: 100px;
  31.     border-top-right-radius: 100px;
  32.     border-bottom-left-radius: 0px;
  33.     border-bottom-right-radius: 0px;
  34.    }
  35.  
  36. /*]]>*/
  37. </style>
  38. </head>
  39.  <body>
  40.  <!-- Esto está arriba de todo-->
  41.  <div id="top-title"><center>D4mnat1on</center></div>
  42.  
  43.  <!-- Esto debería estar a la izquierda del contenido-->
  44.  <div id="menu">
  45.    Menu <br /> <br />
  46.    <a href="index.htm">Intro</a><br />
  47.    <a href="otro.link">otra web</a><br />
  48.    <a href="otro.link">otro lugar</a><br />
  49.   </div>
  50.  
  51.   <!-- Contenido -->
  52.   <div id="mid">
  53.    Texto a escribir <br />
  54.    <br />
  55.    <br />
  56.    <br />
  57.    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.
  58.    <br />
  59.    <br />
  60.    <br />
  61.    <br />
  62.    <br />
  63.    a
  64.   </div>
  65.   
  66.   <!-- Esto debe estar siempre debajo de toda la web, pero no pegado al browser sino que, al scrollear abajo de todo, se vea esto:... -->
  67.   <div id="bottom">
  68.    Diseñado a código por doom13. 2012. Todos los derechos reservados.
  69.   </div>
  70.  </body> 
  71. </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, 20:54
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos Aires, GBA Zona Norte
Mensajes: 10
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 originalCopiar
  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. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.  
  8. <style type="text/css">
  9. /*<![CDATA[*/
  10. #top-title {
  11. background-color: red;
  12. }
  13.  
  14. #menu{
  15. float: left;
  16. background-color: cyan;
  17. }
  18.  
  19. #mid {
  20. float: left;
  21. background-color: yellow;
  22. }
  23.  
  24.    #bottom{
  25. clear: both;
  26.     width: 600px;
  27.     height: 25px;
  28.     background: #222;
  29.     box-shadow: 0px 0px 4px rgba(255,255,255,1);
  30.     border-top-left-radius: 100px;
  31.     border-top-right-radius: 100px;
  32.     border-bottom-left-radius: 0px;
  33.     border-bottom-right-radius: 0px;
  34.    }
  35.  
  36. /*]]>*/
  37. </style>
  38. </head>
  39.  <body>
  40.  <!-- Esto está arriba de todo-->
  41.  <div id="top-title"><center>D4mnat1on</center></div>
  42.  
  43.  <!-- Esto debería estar a la izquierda del contenido-->
  44.  <div id="menu">
  45.    Menu <br /> <br />
  46.    <a href="index.htm">Intro</a><br />
  47.    <a href="otro.link">otra web</a><br />
  48.    <a href="otro.link">otro lugar</a><br />
  49.   </div>
  50.  
  51.   <!-- Contenido -->
  52.   <div id="mid">
  53.    Texto a escribir <br />
  54.    <br />
  55.    <br />
  56.    <br />
  57.    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.
  58.    <br />
  59.    <br />
  60.    <br />
  61.    <br />
  62.    <br />
  63.    a
  64.   </div>
  65.   
  66.   <!-- Esto debe estar siempre debajo de toda la web, pero no pegado al browser sino que, al scrollear abajo de todo, se vea esto:... -->
  67.   <div id="bottom">
  68.    Diseñado a código por doom13. 2012. Todos los derechos reservados.
  69.   </div>
  70.  </body> 
  71. </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: background, barra, bottom, html, página
Respuesta

¿Nuevo en el foro? Regístrate

« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:47.
SEO by vBSEO 3.3.2