Foros del Web » Creando para Internet » CSS »

Header siempre visible en HTML5

Estas en el tema de Header siempre visible en HTML5 en el foro de CSS en Foros del Web. Hola! como andan? alguien me podria ayudar, como puedo hacer para conseguir en la siguiente estructura que el HEADER se mantenga siembre visible cuando scrolleo ...
  #1 (permalink)  
Antiguo 13/02/2014, 22:03
 
Fecha de Ingreso: junio-2010
Mensajes: 76
Antigüedad: 14 años, 5 meses
Puntos: 0
Header siempre visible en HTML5

Hola!
como andan?
alguien me podria ayudar,
como puedo hacer para conseguir en la siguiente estructura
que el HEADER se mantenga siembre visible cuando scrolleo
para abajo...
trate de hacerlo con position fixed, pero no estoy consiguiendo
dicha posicion con max-width...

alguna sugerencia?
muchas gracias por la ayuda como siempre!

  #2 (permalink)  
Antiguo 14/02/2014, 00:18
Avatar de websensemx  
Fecha de Ingreso: febrero-2014
Mensajes: 29
Antigüedad: 10 años, 9 meses
Puntos: 4
Respuesta: Header siempre visible en html5

Código HTML:
Ver original
  1. <div id="nav">
  2. <p class="title"><a href="#">Pagina Web<span class="subtitle"></span></a></p>
  3. <ul id="navigation">
  4.  <li><a href="#">A</a></li>
  5.  <li><a href="#">B</a></li>
  6.  <li><a href="#">C</a></li>
  7.  <li><a href="#">D</a></li>
  8.  <li><a href="#">E</a></li>
  9. </ul>
  10. </div>
  11.  
  12. <div id="body">
  13. TU PAGINA AQUI
  14. </div>

CSS : EL MARGEN DEBE SER 0px.

Código CSS:
Ver original
  1. body
  2. {
  3.  margin:0px;
  4. }
  5.  
  6.  
  7.  
  8. #nav
  9.  {
  10.  background-color:#262626;
  11.  width:100%;
  12.  height:50px;
  13.  box-shadow: 0px 1px 50px #5E5E5E;
  14.  position:fixed;
  15.  top:0px;
  16. }
  17.  
  18.  
  19. .title
  20.  {
  21.  color:#EDEDED;
  22.  font-family:verdana;
  23.  font-size:25px;
  24.  width:350px;
  25.  margin-top:6px;
  26.  margin-left:150px;
  27.  font-weight:bold;
  28.  float:left;
  29. }
  30. .subtitle
  31. {
  32.  color:#EDEDED;
  33.  font-family:verdana;
  34.  font-size:15px;
  35. }
  36.  
  37.  
  38. #navigation
  39. {
  40.  list-style-type:none;
  41. }
  42. li
  43. {
  44.  display:inline;
  45.  padding:10px;
  46. }
  47. #nav a
  48. {
  49.  font-family:verdana;
  50.  text-decoration:none;
  51.  color:#EDEDED;
  52. }
  53. #nav a:hover
  54. {
  55.  color:#BDBDBD;
  56. }

Última edición por pzin; 14/02/2014 a las 02:34 Razón: formato código
  #3 (permalink)  
Antiguo 14/02/2014, 02:36
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Header siempre visible en html5

juanete50 tendrías que ser más específico con eso de "no lo estoy consiguiendo". ¿Qué es lo que no consigues exactamente? Una posición fija, fija el elemento, que es lo que quieres, entonces a menos que esté mal aplicado:

Código CSS:
Ver original
  1. position: fixed;

debería funcionarte bien.
  #4 (permalink)  
Antiguo 14/02/2014, 18:56
 
Fecha de Ingreso: junio-2010
Mensajes: 76
Antigüedad: 14 años, 5 meses
Puntos: 0
Respuesta: Header siempre visible en HTML5

Hola! Gracias por las respuestas
claro el position fixed anda ok...
pero cuando por ejemplo quiero que quede como la imagen
o sea que me quede el contenido de la web centrado + el max widht para que
se vaya adaptando segun el navegador, ahi es donde surge el problema
o sea si uso
position fixed + width no tengo problema
el problema es cuando uso position fixed + width

Muchas gracias websensemx y pzin por su ayuda!!!

Etiquetas: header, html5, siempre, visible
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:24.