Pregunta Contestada N°2
Esta pregunta la respondí en un foro bastante conocido, la pregunta era la siguiente:
Eso es … me he estado cabeceando caleta de rato pero no me cunde nada, lo que necesito es crear una barra que quede en el tope de la web (wordpress) para promocionar el foro y la misma barra en el foro para promocionar el blog.
A continuación, el mini tutorial de hoy, que entregué a modo de respuesta, esto es bastante básico y si hay buen manejo de CSS, puede dar resultados mas que magníficos.
Mi respuesta a dicha pregunta fue es la siguiente :
Pongamonos en los siguientes casos:
- Quieres hacer una barra como la de fayerwayer, que al bajar el scroll desaparezca.
- Hacer una barra superior, que aunque sea desplazado el scroll se mantenga en su posición.
Te invito a probar ambas opciones y ves cual te gusta mas.
La primera – La barra de fayerwayer se hace con el siguiente código:
<html>
<head>
<title> Aquí tu título </title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#menubar{
background-color:black;
color: white;
font:8pt Arial;
}
</style>
</head>
<body>
<!-- Aquí la barrita -->
<div>
<table id="menubar" width="100%" cellpadding=0 cellspacing=0>
<tr>
<td>Menu 1</td>
<td>Menu 2</td>
</tr>
</table>
</div>
<div id="header"><!-- Aquí el header --></div>
<div id="content"><!-- Aquí el cuerpo --></div>
<div id="footer"><!-- Aquí el footer --></div>
</body>
</html>
La segunda – La barra de estática se hace con el siguiente código:
<html>
<head>
<title> Aquí tu título </title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#bar{
position:static;
top:0;
}
#menubar{
background-color:black;
color: white;
font:8pt Arial;
}
</style>
</head>
<body>
<!-- Aquí la barrita -->
<div id="bar">
<table id="menubar" width="100%" cellpadding=0 cellspacing=0>
<tr>
<td>Menu 1</td>
<td>Menu 2</td>
</tr>
</table>
</div>
<div id="header"><!-- Aquí el header --></div>
<div id="content"><!-- Aquí el cuerpo --></div>
<div id="footer"><!-- Aquí el footer --></div>
</body>
</html>
Esto es simple, basta con ocupar el molde anterior, y ya está la barra.
Para que la segunda barra quede estática, solo basta con ocupar ésta propiedad en la definición CSS:
position:static;
Cargando ...
También es bueno que el código CSS para el estilo de la página (lo que deja flotando la barra también), esté en un archivo .css. De modo que sea menor la carga para el navegador, ya que los navegadores no descargan todos los archivos en casos así (tienen un caché por lo mismo).
Luego, sería cosa de colar en el header del HTML:
No apareció el código, acá una segunda vez.
<link rel='stylesheet' href='nombre-archivo.css' type='text/css' />
Ahh claro, eso es cierto, lo que pasa es que el estilo lo puse ahi para acortar trabajo al momento de presentar el tutorial, más que nada para mostrar la funcionabilidad de la página, pero creo que de ahora en adelante empezaré a separar los archivos de ejemplo, para que la gente no se confunda tampoco.
Gracias por la sugerencia
!.