Tema: Copiar la nav bar de Twitter!
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 24/07/2011, 03:55
Avatar de Pixeltwo
Pixeltwo
 
Fecha de Ingreso: mayo-2011
Mensajes: 32
Antigüedad: 13 años, 7 meses
Puntos: 2
Respuesta: Copiar la nav bar de Twitter!
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. body{
  6.     margin:0px;
  7.     background-color:gold;
  8.     }
  9.     
  10. /*Div fixed*/   
  11. #a1{
  12.     background-color:white;
  13.     width:100%;
  14.     position:fixed;
  15.     top:0;
  16.     left:0;
  17.     height:80px;
  18.     z-index:20;
  19.     margin:0px;
  20.     }
  21. /*Contenido dentro del div fixed*/  
  22. #a2{
  23.     position:relative;
  24.     text-align:center;
  25.     color:#fafafa;
  26.     width:910px;
  27.     background-color:blue;
  28.     margin-left:auto;
  29.     margin-right:auto;
  30.     
  31.     }
  32. /*div contenedor principal*/
  33. #a3{
  34.     margin-left:auto;
  35.     margin-right:auto;
  36.     width:910px;
  37.     min-height:700px;
  38.     margin-top:100px;
  39.     background-color:#fafafa;
  40.     }
  41. /*contenido dentro de contenedor*/  
  42. #a4{
  43.     color:#000;
  44.     font-size:16px;
  45.     margin-left:30px;
  46.     margin-right:30px;
  47.     }
  48. </style>
  49. </head>
  50. <body>
  51.  
  52. <div id="a1"><!--El reto es conseguir que este div se mueva a la vez que el contenedor cuando se hace scroll horizontal al poner la ventana del navegador mas pequeña o mismamente usar un monitor con baja resolución.-->
  53.     <div id="a2">Esto tiene que estar centrado</div>
  54. </div>
  55. <div id="a3">
  56.     <div id="a4">Contenido aqui...</div>
  57. </div>
  58.  
  59. </body>
  60. </html>

No es mas que un codigo que he hecho para la cuestión, no el que ando desarrollando (claramente).


Está comentada esa parte que tanto menciono.. por el momento sigo probando y pensando, pensando pero nada... CSS me limita... estoy empezando a pensar que en twitter han usado javascript...
Saludos!