[HTML] <nav> con position:fixed copre <main>

Discussione in 'HTML e CSS' iniziata da sass, 10 Agosto 2017.

  1. sass

    sass Nuovo Utente

    Registrato:
    3 Agosto 2017
    Messaggi:
    3
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    Buonasera a tutti!
    Sto procedendo con l'apprendimento del CSS e questa volta stavo tentando di realizzare un semplice menù fisso in alto con del contenuto sotto. Per far ciò mi sono avvalso dei tag semantici di Html5, ossia <nav> e <main>. Il problema che riscontro risiede nel fatto che <nav> copre <main> e perciò vorrei chiedere a voi quale ne sia la causa. Aggiungo il codice Sass, Css ed Html5 che ho scritto per raggiungere il suddetto scopo.

    Sass
    Codice:
    $menu-background-color: #000000;
    $menu-text-color: #ffffff;
    $menu-height: auto;
    $menu-margin: 0;
    $menu-link-position: right;
    $menu-link-color: #fff;
    
    /* Menu orizzontale generico */
    nav.horizontal-menu
    {
        background-color: $menu-background-color;
        width: 100%;
        height: $menu-height;
        margin: $menu-margin;
        color: $menu-text-color;
    
    }
    /* Menu orizzontale fissato in alto */
    nav.horizontal-menu-fixed-top
    {
        @extend nav.horizontal-menu;
        position: fixed;
        top: 0;
        left: 0;
        
    }
    /* Menu orizzontale fissato in basso */
    nav.horizontal-menu-fixed-bottom
    {
        @extend nav.horizontal-menu;
        position:fixed;
        bottom:0;
        left: 0;
        
    }
    body
    {
        height: 120vh; /* Utile per testare lo scrolling*/
    }
    Css generato
    Codice:
    /* Menu orizzontale generico */
    nav.horizontal-menu, nav.horizontal-menu-fixed-top, nav.horizontal-menu-fixed-bottom {
      background-color: #000000;
      width: 100%;
      height: auto;
      margin: 0;
      color: #ffffff; }
    
    /* Menu orizzontale fissato in alto */
    nav.horizontal-menu-fixed-top {
      position: fixed;
      top: 0;
      left: 0; }
    
    /* Menu orizzontale fissato in basso */
    nav.horizontal-menu-fixed-bottom {
      position: fixed;
      bottom: 0;
      left: 0; }
    
    body {
      height: 120vh;
      /* Utile per testare lo scrolling*/ }
    
    Html5
    HTML:
    <!DOCTYPE html>
    <html lang="it">
        <head>   
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Prova</title>
            <link rel="stylesheet" href="horizontal_menu.css"
        </head>
        <body>
            <nav class="horizontal-menu-fixed-top">
                <h1>Titolo</h1>
            </nav>
            <main>
                <!--Il seguente paragrafo non è visibile->
                <p>Ye to misery wisdom plenty polite to as. Prepared interest proposal it he exercise. My wishing an in attempt ferrars. Visited eat you why service looking engaged. At place no walls hopes rooms fully in. Roof hope shy tore leaf joy paid boy. Noisier out brought entered detract because sitting sir. Fat put occasion rendered off humanity has. </p>       
            </main>
        </body>
    </html>
    
     
Sto caricando...

Condividi questa Pagina