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

doom13 · #1 (**permalink**) 07/01/2012, 19:23

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

!

emprear · #2 (**permalink**) 07/01/2012, 19:30

Código CSS:

Ver originalposition fixed;
bottom: 0;

SAludos

doom13 · #3 (**permalink**) 07/01/2012, 19:49

Cita:

Iniciado por emprear

Código CSS:

Ver originalposition fixed;
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

emprear · #4 (**permalink**) 07/01/2012, 20:00

No entiendo bien

si haces

Código HTML:

Ver original<div>
arriba
</div>
<div>
medio
</div>
<div>
abajo
</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

doom13 · #5 (**permalink**) 07/01/2012, 20:58

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

emprear · #6 (**permalink**) 07/01/2012, 21:16

a ver esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
#top-title {
background-color: red;
}
 
#menu{
float: left;
background-color: cyan;
}
 
#mid {
float: left;
background-color: yellow;
}
 
   #bottom{
clear: both;
    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;
   }
 
/*]]>*/
</style>
</head>
 <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> 
</html>

no es fácil entender exactamente

Saludos

doom13 · #7 (**permalink**) 07/01/2012, 21:54

Cita:

Iniciado por emprear

a ver esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
#top-title {
background-color: red;
}
 
#menu{
float: left;
background-color: cyan;
}
 
#mid {
float: left;
background-color: yellow;
}
 
   #bottom{
clear: both;
    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;
   }
 
/*]]>*/
</style>
</head>
 <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> 
</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 ^^.