1. Este sitio usa cookies. Para continuar usando este sitio, se debe aceptar nuestro uso de cookies. Más información.

[Problema] espacio entre header y nav

AntiChupines 13 Nov 2017

  1. AntiChupines

    AntiChupines
    Life to remember

    253
    2
    163
    Buenas gente,
    hace unas horas empece a aprender como hacer webs y estoy terminando mi primera pagina. Es pesima, lo se, pero no tengo muchos conocimientos todavia. Mi pregunta es como puedo sacar este espacio que tengo entre el nav y elheader.

    [​IMG]

    HTML:
    Sólo usuarios registrados pueden ver esto. Click aquí para registrarte!
    Código Fuente (CSS):
    Sólo usuarios registrados pueden ver esto. Click aquí para registrarte!
     
  2. Gelfor

    Gelfor
    Dragón Ancestral Lvl 5

    4.277
    154
    243
    Hace lo siguiente:

    HTML:

    HTML:
    Sólo usuarios registrados pueden ver esto. Click aquí para registrarte!
    CSS:

    Código Fuente (CSS):
    Sólo usuarios registrados pueden ver esto. Click aquí para registrarte!
    lo que hice, fue al header ponerle un ancho y alto y un position: abolsute.

    al nav le puse un ancho y un alto y un margin-top: de la altura del header.

    otra cosa, deja de usar puros DIVS, HTML5, cuenta con etiquetas como: header, footer, nav, asside, etc.

    suerte y caulquier cosa me mandas un mensaje privado o si no te sirvio, me dejas otro comentario aca y apenas pueda paso a verlo!.

    Suerte!
     
  3. AntiChupines

    AntiChupines
    Life to remember

    253
    2
    163
    Gracias por ayudarme. Como dije habia empezado hace maximo un dia a hacer esto y lei etiquetas y aprendi un poco de css, pero todavia no se usar html5, no vi ninguna propiedad. Lo voy a ver entre hoy y manana.
    Con respecto al menu, es lo mismo si pongo el anchor adentro o afuera de <li>?
    Otra cosa.. decis que es bueno establecer un alto fijo en vez de usar el padding para darle alto?

    EDIT: No me funciono la posicion absoluta. Trate de sacarle el padding, ponerle margen 0, pero no se porque queda ese espacio blanco entre el header y el nav..

    EDIT2: Ya lo arregle. Lo que pasaba es que en el css me olvide de declarar el * y ponerle padding 0 y margin 0.

    Código Fuente (CSS):
    Sólo usuarios registrados pueden ver esto. Click aquí para registrarte!
     
    Última edición: 13 Nov 2017
    A Blair le gusta esto.
  4. Gelfor

    Gelfor
    Dragón Ancestral Lvl 5

    4.277
    154
    243
    Con eso que hiciste, le dijiste a todo el proyecto que tiene q tener margen y padding 0. yo en mi ejemplo que lo testie, no lo use y me funciono. yo en mi caso al le doy el ancho y alto al nav, ya que es el contenedor.
     
  5. Geerr

    Geerr
    Newbie Lvl 1

    8
    3
    0
    Empeza directo con html5, hay muchas etiquetas de lenguajes anteriores que ya ni se usan. Ademas html5 contiene todo lo que venia teniendo los lenguajes anteriores... asique.. esta vez es mejor empezar con lo ultimo :p
     
  6. MAB

    MAB
    Observer of the void

    524
    352
    204
    Usar el * es decirle al proyecto completo que queres margin y padding 0 en todos los elementos que vayas a crear. Mientras vos comprendas esto, esta todo perfecto, ya que muchas veces se utiliza el * para resetear en todo el proyecto ciertas propiedades de todos los elementos y evitar problemas a futuro con los diferentes navegadores (como por ejemplo margin, padding, box-sizing, font-family, etc).

    Ahora, nadie te dijo que cuando queres revisar errores, lo mejor es utilizar el inspector de elementos del navegador que uses (Chrome, Mozilla, etc)... te puedo indicar 2 cosas por ejemplo:

    1- Nunca le diste estilo a tu body, es necesario que lo hagas (podes darle width 100%, margin y padding 0 para tener tu cuerpo completo sin nada raro).

    2- Tu error esta en el #nav ul, ya que al no tener una regla global o especificarle al elemento sus propiedades, cada navegador ajusta a gusto los elementos, en tu caso se arregla simplemente haciendo esto:

    Código Fuente (Text):
    Sólo usuarios registrados pueden ver esto. Click aquí para registrarte!
    -----------------------------------------------------------------------------------------------------------------------

    Te recomiendo empezar directamente por HTML5, CSS3 e intentar aprender lo siguiente:

    -Float (descontinuado, podes utilizarlo pero ya no es recomendable)
    -Clearfix hack (descontinuado, podes utilizarlo pero ya no es recomendable)
    -Flexbox (actual)
    -Grid (lo más nuevo)

    En antaño se utilizaba float para acomodar los elementos hacia la izquierda o derecha, esto traía problemas así que inventaron varios recursos para solventar dichos problemas, como por ejemplo el Clearfix hack, que establece selectores :before y :after para alinear los elementos y que no se rompan.

    Luego hace unos pocos años nace Flexbox, una herramienta que hasta el día de hoy se sigue utilizando y funciona perfecto en cualquier navegador. Flexbox te permite orientar los objetos dentro del contenedor padre de manera fácil utilizando una grilla de una dimensión y sin la necesidad de romper todo el diseño como sucedía con float anteriormente... la única desventaja sería el hecho de tener que utilizar un contenedor para cada elemento que quieras alinear.

    Por último tenes Grid, que es un estándar que hace muy poquito (este año para ser más preciso) se volvió oficial, es bastante nuevo y aún se necesita que los navegadores lo pulan un poquitito más, pero grid te permite diseñar en una grilla de dos dimensiones, ordenar los elementos a gusto, e inclusive lo que por muchos años fue imposible: mover el html de un lugar a otro simplemente con css. Además, Grid te posibilita establecer áreas dentro del mismo diseño para que puedas moverlas e identificarlas a gusto, todo mediante propiedades css.
    Se considera que Grid será dentro de muy poco un nuevo estándar y te puedo asegurar que utilizando Grid, cosas como Bootstrap mueren por completo.

    Es bastante para leer y comprender, pero si le dedicas un poquito de tiempo y práctica, una ves que comprendas el funcionamiento de una propiedad te queda grabado y seguramente recuerdes que hace, y si no lo recordas, tenes siempre a mano la w3c.

    Te dejo 2 artículos sobre Flexbox y Grid, están en inglés pero bueno, el que quiere celeste...:

    Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

    Saludos.
     
    A miqueas150 le gusta esto.
  7. AntiChupines

    AntiChupines
    Life to remember

    253
    2
    163
    Wow! muchas gracias por responder. La verdad es que vi un curso super completo de diseno web (sory no tengo la enie en el teclado) y lo estoy haciendo, no tenia idea de nada. Solo leo el material, veo los videos y practico lo mas que puedo las cosas para que me queden grabado. Ya estoy aprendiendo html5 y css3 y me parece super copado lo que se puede hacer.
    Por otro lado, gracias @MAB por tu respuesta. Muy util los articulos y por aclararme lo del selector *. Probé el codigo y me funcionó. Y lo que voy a hacer es una vez que termine con css3 y html5 voy a empezar a ver eso del grid (que parece ser un layout nomas). Ya que estamos, en el curso viene CANVAS y bootstrap3. Me recomendas olvidarme de eso o sirve ? (una vez que termino con bootstrap viene JS, JQuerry, PHP SQL, AJAX, NodeJS y Angular. Son como 200hr de videos y casi 3 libros de contenido xD
     
  8. MAB

    MAB
    Observer of the void

    524
    352
    204
    No, esta perfecto que lo veas porque todavía se sigue utilizando, es más a gusto personal que otra cosa. A mi personalmente no me agrada Bootstrap ya que cargas una librería completa de cosas y posiblemente no utilices ni 1/4 de todo lo que contiene (luego vas a verlo más en detalle).
     
  9. AntiChupines

    AntiChupines
    Life to remember

    253
    2
    163
    jaja todavia no lo veo. terminé con los modulos de css3 y html5. AHora voy a parar un poco y a enfocarme en aprender como hacer una pagina como se debe y despues voy a seguir con bootstrap y demas. Les dejo esta que es mi primera pagina por mi cuenta sin ayuda de tutoriales o nada. estoy bastante contento pero quiero que la critiquen (considerando mi nivel obvio!) y me digan que cambiarian y todo eso (aviso que todavia no se hacer paginas responsive y probablemente se quieran pegar un tiro al leer el codigo, perocabe aclarar que no hace mas de un par de dias empece a estudiar esto..) Ademas no esta 100% terminada y si me pueden ayudar con el header que cuando le pongo transition se corren todas los demas items les agradeceria.

    http://antichupines.byethost7.com/first_page/index.html

    HTML:
    Sólo usuarios registrados pueden ver esto. Click aquí para registrarte!
    Código Fuente (CSS):
    Sólo usuarios registrados pueden ver esto. Click aquí para registrarte!
     
  10. Gelfor

    Gelfor
    Dragón Ancestral Lvl 5

    4.277
    154
    243
    Está muy buena la página, lo que modificaría es el fondo yo dejaría 1 sola imagen, lo de responsibe, es fácil, solo que lleva tiempo. Lo que tenes que usar es:

    Código Fuente (CSS):
    Sólo usuarios registrados pueden ver esto. Click aquí para registrarte!
    Osea el Min-Width es el ancho minimo, y lo que hace es que si la pantalla tiene 480px de ancho o más cambia el color de fondo. también tenes el max-width, min-height, max-height, es ir jugando con las medidas y diciendole al CSS como acomodar las cosas en las diferentes resoluciones.
     

Compartir esta página