Ciao a tutti, da poco ho iniziato a studiare html e css e sto provando a creare una pagina web. Purtroppo ho un problema che non riesco proprio a risolvere, cioè quando si fa lo zoom nella pagina web, lo sfondo della navbar (#C0C0C0) si taglia ed alcune sezioni vengono visualizzate senza lo sfondo della navbar e quindi nel background che ho caricato tramite la cartella images. E' la quarta volta che riprovo a fare tutto perché ci sono tanti metodi per farlo, perciò posto il codice html e css, in modo che qualcuno possa aiutarmi.
HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<title> Home </title>
<!-- Metadata e descrizione pagina -->
<meta name="author" content="Claudio"/>
<meta name="description" content="Questo e' un sito che tratta videogiochi di qualsiasi piattaforma, se vuoi rimanere aggiornato sulle ultime uscite o leggere delle recensioni, clicca in alto!"/>
<meta name="keywords" content="giochi,videogiochi,videogames,console"/>
<!--Collego css e html-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--Collego il font che voglio usare-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Press+Start+2P&displ ay=swap" rel="stylesheet">
</head>
<!-- Corpo -->
<body>
<header>
<nav>
<!-- Logo del sito, che se cliccato porta alla home -->
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="logo"/></a>
</div>
<!--Creo il menù con i collegamenti alle varie pagine(dentro l'header)-->
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">RECENSIONI</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#chisiamo">CHI SIAMO</a></li>
</ul>
</nav>
</header>
CSS:
body{
margin: 0;
background-image: url('../images/sfondo.png');
background-image: no-repeat;
background-attachment: fixed;
}
/*---- Blocco l'header durante lo scroll ----*/
header{
top: 0;
position: sticky;
}
/*---- Tolgo la sottolineatura dai testi con link e metto il loro colore sul nero ----*/
a{
text-decoration: none;
color: black;
}
/*---- Creo la navbar ----*/
nav{
background: #C0C0C0;
font-family: 'Press Start 2P', cursive;
display: flex;
align-items: center; /*Li allineo al centro*/
justify-content: space-between; /*Li allineo uno di fronte all'altro*/
white-space: nowrap; /*Serve a non farli andare uno sotto l'altro durante lo zoom*/
font-weight: bold;
}
/*---- Allineo il menù su una riga ----*/
nav ul{
display: flex;
padding-right: 90px; /*Ho messo 90 perché dovrò mettere un icona sulla destra*/
}
/*---- Sistemo gli spazi nella barra menù e tolgo i pallini con list-style ----*/
nav ul li{
list-style: none;
}
nav ul li a{
padding: 5px; /*Grandezza navbar*/
margin-left: 25px; /*Margine tra home,recensioni,news e chi siamo*/
}
nav ul li a:hover{
background: white;
box-shadow: 0 0 0 11px white; /*Avevo bisogno che l'hover coprisse più spazio*/
}
/*---- Sistemo il logo del sito a sinistra ----*/
.logo img{
height: 35px;
width: 300px;
padding-left: 30px;
}
Grazie anticipatamente a chi mi aiuterà!
Rispondi quotando
Originariamente inviata da leonardoanselmo
