Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2020
    Messaggi
    3

    Problema restringimento menu

    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!
    Ultima modifica di carlomarangoni; 05-02-2020 a 18:34

  2. #2
    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.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.