Problema restringimento menu

**Grinko** · 05-02-2020, 10:44

Buongiorno a tutti! Sto creando un sito web e ho un problema con il menu orizzontale a lista. Quando restringo la schermata le scritte all'interno delle caselle escono e invadono lo spazio sottostante e l'ultima casella scivola sotto la prima.Come posso risolvere? Questo è il codice

codice:

<!DOCTYPE html>
<html lang="it">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">    
<meta name="author" content="Nicolo Fiore, Martina Aghemo">
<meta name="description" content="Innovazione sociale, comunicazione e nuove tecnologie">
<meta charset="UTF-8" />
<meta name="viewpoint" content="width=device-width, initial-scale=1.0>
<meta name="keywords" content="HTML, CSS, ICT, UNITO, LAUREA, MEDIA, INNOVAZIONE SOCIALE, COMUNICAZIONE, NUOVE TECNOLOGIE,">
<title> Laurea in Innovazione sociale, comunicazione e nuove tecnologie </title>
</head>
<body>
<header><img src="Immagini/logo.jpg" width="70" height="119" hspace="20" alt=""/>Innovazioe sociale, comunicazione e nuove tecnologie</header>                                                                               
<ul id="menu">
  <li><a href="#">Home</a></li>
    <li><a href="#">Corso di laurea</a></li>
    <li><a href="#">Insegnamenti e orari</a></li>
    <li><a href="#">Docenti</a></li>
    <li><a href="#">Dopo la laurea</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contatti</a></li>
</ul>
</heade>
</body>
</html>

Questo è il css:

codice:

header  {
      padding: 5px;
      margin: 0;
      background-color: #82C0FF;
      font-size:40px;
      text-align: center;
      font-family: Elephant, Comic Sans MS
      }
      
    ul#menu {
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin: 0;
    padding:0;
    list-style: none;
    text-align:center;
}
ul#menu li {
    background-color: #D2D2D2;
    border-bottom: 10px solid #54BAE2;
    border-top:1px solid #54BAE2;
    border-left: 1px solid #54BAE2;
    border-right: 1px solid #54BAE2;
    display:block;
    width: 14%;
    height: 40px;
    margin-bottom: 10px;
    float: left;
}
ul#menu li a {
    color: #000;
    display: block;
    font-weight: bold;
    line-height: 30px;
    text-decoration: none;
    width: auto;
    height: 100%;
    text-align: center;
}
 ul#menu li:hover {
    background-color: #82C0FF;
    border-bottom: 10px solid #D2D2D2;
}


body {
    background-color:blue;
    background-image: url("sfondo.jpg");
    background-attachment: fixed;
    background-repeat:repeat;
    background-size:contain;
}


#container   {
    background-color:floralwhite;
    text-align:left;
    padding:20px;
    height:auto;
    box-size: 18px;
    box-sizing: border-box;
}


h1  {
    color:darkcyan;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-size:30px;
    margin:10px;
    font-weight:bold;
    text-align:left;
}
p {
    line-height:40px;
    font-size:20px;
}

Grazie in anticipo!

**DavideMancuso** · 19-02-2020, 12:44

Ciao, per prima cosa assicurati di avere il codice HTML corretto. Manca un doppio apice di chiusura (") in viewpoint e c'è un header di chiusura di troppo (il primo).

Riguardo invece il problema principale, devi utilizzare i media queries del CSS - che già avevi usato nel tuo footer - per lavorare sulla visualizzazione del menu. Ti occorrerà anche utilizzare JS per rendere funzionale il nav lato mobile.

Lato UX funziona così: in mobile il nav viene nascosto e compare un pulsante. Questo pulsante ti consente di far apparire o nascondere il nav; su schermi grandi invece, il pulsantino scompare e il nav è sempre visibile.

Se non hai esperienza con CSS e JS, ti suggerisco di utilizzare un CSS framework pronto all'uso, come Bootstrap, per semplificare il layout del tuo progetto.

**debugger84** · 05-03-2020, 18:10

Me la scrivi la tua email che ti invio il file corretto?

**debugger84** · 05-03-2020, 18:11

Oppure copia da qua:

codice:

<!DOCTYPE html>
<html lang="it">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">    
<meta name="author" content="Nicolo Fiore, Martina Aghemo">
<meta name="description" content="Innovazione sociale, comunicazione e nuove tecnologie">
<meta charset="UTF-8" />
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML, CSS, ICT, UNITO, LAUREA, MEDIA, INNOVAZIONE SOCIALE, COMUNICAZIONE, NUOVE TECNOLOGIE,">
<title> Laurea in Innovazione sociale, comunicazione e nuove tecnologie </title>
</head>
<body>
<header><img src="Immagini/logo.jpg" width="70" height="119" hspace="20" alt="Innovazioe sociale, comunicazione e nuove tecnologie"/></header>                                                                               
<ul id="menu">
  <li><a href="#">Home</a></li>
    <li><a href="#">Corso di laurea</a></li>
    <li><a href="#">Insegnamenti e orari</a></li>
    <li><a href="#">Docenti</a></li>
    <li><a href="#">Dopo la laurea</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contatti</a></li>
</ul>
</header>
</body>
</html>

Il css non l'ho cambiato

**debugger84** · 05-03-2020, 18:19

per restringere la finestra senza problemi ti consiglio di usare in css la tecnica @media only screen and () e ti invio a questo link

Discussione: Problema restringimento menu

Strumenti discussione

Ricerca discussione

Visualizza

Problema restringimento menu

Tag per questa discussione

Permessi di invio