Hola amigos, este es mi primer aporte espero les sea de utilidad, como el titulo lo dise este post se trata de como crear una barra esilo facebook, que se mantenga siempre visibe en la parte de arriba de la pagína y ademas centrada y con transparencia, para los que son principiantes les dejo desde el principio primero en cualquier editor de texto (yo recomiendo Notepad++) creen un archivo llamado estilos.css y otro que digamos llamare barra_flotante.html, bueno, despues de esto pasamos al codigo, el cual lo describo acontinuacion.
Codigo HTML
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>
Vicente Madrid
</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all"> <!--aEsta linea vincula el archivo HTML con la hoja de estilos, deven de estar en la misma carpeta ambos-->
</head>
<body>
<!--comienza la tabla-->
<div class="menu_top">
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
</div>
<!--termina la tabla-->
<!--comienza div para de mi nombre -->
<div class="barra">
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
</div>
<!--termina div para de mi nombre -->
</body>
</html>
Hasta aqui todo facil y sin mucho chiste...Vamos ahora con el codigo de Estilos CSS
a:link{text-decoration:none; color:white; } <!-- estado del link antes de alguna accion-->
a:visited{text-decoration:none; color:#BDBDBD;}<!-- estado del link cuando ya le has dado click -->
a:hover{text-decoration:none; color:#81BEF7; font-size:100%;}<!-- estado del link cuando el raton pasa sobre el-->
a:active{text-decoration:none; color:white; font-size:100%}<!-- estado del link en el momento del click-->
.menu_top{position: fixed; font-family:arial; background-color:#134578;
width: 55%; height: 5%; font-size: 80%; text-align:center;z-index: 10000;opacity:0.90;font-weight:bold;margin-left: -27.5%;top: 1%; left: 50%;}
<!-- position:fixed es lo que hace este vicible en todo momento, font-family:arial#la#letra#sera#arial, background-color:#134578 el color de fondo sera el idicado, width: 55% height: 5% ancho y alto indicado en % es mejor en porcentaje qu en PX, font-size: 80% tamaño de la fuetne en %, text-align:center centrado del trexto, z-index: 10000 hace que este ensima de los demas elementos;opacity:0.90 hace la tranasparencia, font-weight:bold tipo de letra negrita-->
<!--
Esta es la parte del centrado
left: 50%; primero lo recoremos a la mitad desde la izquierda, esto hara que la esquina superior izquierda quede al centro horizontal.
margin-left: -27.5%; como la esquina superior izquierda quedo en el centro horizontal. temos que correrla a la izquierda un poco esto sera recorrer la a la izquierda la mitad de el total de lo que mida la barra esto es 27.5% ya que la barra mide width: 55% pero como sera secorrido hacia atras por decirlo asi tendra que ser en negativo margin-left: -27.5%
top: 1%; la distancia de arriba hacia abajo
-->
.barra{position: absolute;left: 50%;top: 10%;width: 10%;height: 125%;margin-top: 0%;margin-left: -5%; margin-bottom: -5%; background-color:#848484 }
<!--Este es lo de la barra con mi nombre solo tiene largo alto y color de fondo-->
.info_pie{position: fixed; bottom:0%; left: 50%;font-family:arial; width: 65%; margin-left: -32.5%; height: 5%;font-size: 70%;text-align:center }
<!-- esta es la da informacionde abajo para que aparesca siempre abajo se utiliza position: fixed; bottom:0% -->
Espero les sirva, comenten y le den like
Codigo HTML
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>
Vicente Madrid
</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all"> <!--aEsta linea vincula el archivo HTML con la hoja de estilos, deven de estar en la misma carpeta ambos-->
</head>
<body>
<!--comienza la tabla-->
<div class="menu_top">
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
<a href="#">
   
Opcion 1
</a>
</div>
<!--termina la tabla-->
<!--comienza div para de mi nombre -->
<div class="barra">
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
Vicente Madrid elmc2 <br/><br/><br/>
</div>
<!--termina div para de mi nombre -->
</body>
</html>
Hasta aqui todo facil y sin mucho chiste...Vamos ahora con el codigo de Estilos CSS
a:link{text-decoration:none; color:white; } <!-- estado del link antes de alguna accion-->
a:visited{text-decoration:none; color:#BDBDBD;}<!-- estado del link cuando ya le has dado click -->
a:hover{text-decoration:none; color:#81BEF7; font-size:100%;}<!-- estado del link cuando el raton pasa sobre el-->
a:active{text-decoration:none; color:white; font-size:100%}<!-- estado del link en el momento del click-->
.menu_top{position: fixed; font-family:arial; background-color:#134578;
width: 55%; height: 5%; font-size: 80%; text-align:center;z-index: 10000;opacity:0.90;font-weight:bold;margin-left: -27.5%;top: 1%; left: 50%;}
<!-- position:fixed es lo que hace este vicible en todo momento, font-family:arial#la#letra#sera#arial, background-color:#134578 el color de fondo sera el idicado, width: 55% height: 5% ancho y alto indicado en % es mejor en porcentaje qu en PX, font-size: 80% tamaño de la fuetne en %, text-align:center centrado del trexto, z-index: 10000 hace que este ensima de los demas elementos;opacity:0.90 hace la tranasparencia, font-weight:bold tipo de letra negrita-->
<!--
Esta es la parte del centrado
left: 50%; primero lo recoremos a la mitad desde la izquierda, esto hara que la esquina superior izquierda quede al centro horizontal.
margin-left: -27.5%; como la esquina superior izquierda quedo en el centro horizontal. temos que correrla a la izquierda un poco esto sera recorrer la a la izquierda la mitad de el total de lo que mida la barra esto es 27.5% ya que la barra mide width: 55% pero como sera secorrido hacia atras por decirlo asi tendra que ser en negativo margin-left: -27.5%
top: 1%; la distancia de arriba hacia abajo
-->
.barra{position: absolute;left: 50%;top: 10%;width: 10%;height: 125%;margin-top: 0%;margin-left: -5%; margin-bottom: -5%; background-color:#848484 }
<!--Este es lo de la barra con mi nombre solo tiene largo alto y color de fondo-->
.info_pie{position: fixed; bottom:0%; left: 50%;font-family:arial; width: 65%; margin-left: -32.5%; height: 5%;font-size: 70%;text-align:center }
<!-- esta es la da informacionde abajo para que aparesca siempre abajo se utiliza position: fixed; bottom:0% -->
Espero les sirva, comenten y le den like