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
Css generato
Html5
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>