Error con nav

mblascog · #1 (**permalink**) 23/04/2014, 12:42

Buenas,
Hace ya mucho le estoy dando vueltas a un tema y no hay manera de ver que es lo que tengo mal.
Resulta que estoy intentando hacer mi primera web con HTML5, CSS3 y Responsive Web Design y tengo el siguiente problema.
Cuando visualizo la web y activo las herramientas para los desarrolladores, voy marcando en el código las etiquetas y automáticamente se marca el elmento en la web.
Resulta que cuando selecciono la etiqueta nav, me marca un lugar equivocado y no veo porqué.
Puede alguien darme alguna idea?
El ejemplo se ve en http://http://www.tepui.cat/foro/index.html
Gracias.

temerariomalaga · #2 (**permalink**) 23/04/2014, 21:37

En apariencia parece estar en su lugar el menú pero revisando el código con firebug cuando pongo el ratón sobre nav no me resalta el menú. También veo que <nav> está dentro de la etiqueta <header> cuando lo más correcto sería que estuviese como una etiqueta independiente en el <body>. Prueba a sacar el menú de la cabecera.

pzin · #3 (**permalink**) 24/04/2014, 00:56

El elemento nav está bien ponerlo dentro de un header, de hecho es una práctica bastante habitual.

El problema son los elementos flotados. Si limpias el flotado a nav:

Código CSS:

Ver originalnav {
  clear: both;
}

Debería de quedar todo en su sitio.

mblascog · #4 (**permalink**) 24/04/2014, 09:32

Gracias a los dos por responder.
Por lo que he leído estoy de acuerdo con pzin, es una práctica bastante habitual poner el nav dentro del header. A pesar de ello, he intentado, tal com dices, temerariomalaga, ponerlo como una etiqueta independiente, en el body, y el comportamiento es el mismo.
Pzin, he añadido el clear:both. Cuando lo miro con el firebug se arregla el problema, en cambio, si lo miro con el Chrome, no sé como se llama, el nav no lo marca correctamente.
De este problema me he dado cuenta por lo siguiente: el texto que aparece a la parte inferior del menú, está dentro de las etiquetas <section><article>.
Si quiero que el texto quede un poco separado del menú, donde tengo que indicarlo, el margen de la parte inferior del menú o de la parte superior del article?
Pruebe lo que pruebe no lo consigo.
Además, no entiendo una cosa: si tengo la siguiente estructura:

Código HTML:

Ver original<body>
   <header>
      <nav>
      </nav>
   </header>
   <section>
      <article>
      </article>
   </section>
</body>

Cuando con el firebug marco header, debería seleccionarme el header y el nav
Cuando con el firebug marco section, me marca todo. No debería marcarme sólo el article y footer?
Gracias

mblascog · #5 (**permalink**) 25/04/2014, 11:16

Buenas,
Sigo con el problema, a ver si alguien puede echarme una mano respecto a la prueba que estoy intentando hacer, que podeis consultar en el siguiente enlace
http://http://www.tepui.cat/foro/index.html
Si activas el inspector, firebug, el que querais, me gustaría saber porqué:
- nav tiene una altura de 57 píxeles. Yo no he indicado ninguna altura, sólo al elemento <li>. No debería, el elemento <nav> ocupar lo mismo que <li>?
- por qué, cuando me situo encima de <section> marca toda la web, no debería marcar a partir de <nav> hasta el final del footer?
- o por qué al marcar <article> no marca sólo el <article>
- por qué tiene un margen izquierdo y derecho el menú? Cuando te posicionas con el ratón en la primera o última opción, deja un margen a la izquierda o derecha, respectivamente.

Muchas gracias.