+ Rispondi al messaggio
Visualizzazione dei risultati da 1 a 3 su 3

gestione responsive di un HEADER

  1. #1
    BennyB non è in linea Scolaretto
    Buongiorno.
    Ho impostato un HEADER contenente un logo e un menu di navigazione. Sono riuscito a sistemare le parti in modo che siano correttamente allineate. Ho cercato pure di utilizzare unità di misura adeguate per rendere responsive la pagina, ma incontro vari problemi.
    Anzitutto ho eliminato il <META> relativo alla viewport.
    codice HTML:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    In questo modo, una parte dei problemi s'è risolta perché almeno sotto una certa dimensione (direi 1000 px) il contenuto dell'HEADER inizia a ridursi.

    Intanto, questo è il formato HTML:
    codice HTML:
    <!DOCTYPE html>
      <html lang="EN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>MENU animato</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
        <link rel="stylesheet" href="page-style.css">
      </head>
    <body>
        <header>
            <div class="logo">
              <a href="#">LOGO</a>
            </div>
            <nav cf>
              <ul class="box">
              <li><a class="home" href="#">HOME</a></li>
              <li><a class="instal" href="#">Installazione</a></li>
              <li><a class="dato" href="#">Consultazione</a></li>
              <li><a class="dato" href="#">Estrazione</a></li>
              <li><a class="dato" href="#">Ricerca</a></li>
              <li><a class="dato" href="#">Gestione</a></li>
              <li><a class="dato" href="#">stampe</a></li>
              <li><a class="dato" href="#">Amministrazione DB</a></li>
            </ul>
          </nav>
        </header>
    </body>
    </html>
    mentre questa è la formattazione CSS:
    codice HTML:
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
      font-family: "Roboto", sans-serif;
      font-weight: 500;
    }
    .cf:before,
    .cf:after {
      content: " ";
      display: table;
    }
    .cf:after {
      clear: both;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    header {
      height: 10vh;
      background-color: #f1f7a9;
    }
    header .logo, header nav {
        display: inline-block;
        vertical-align: middle;
    }
    .logo {
      height: 100px;
      display: inline-block;
      margin: 0 3em;
      border: 1px solid blue;
    }
    .logo > a {
      line-height: 100px;
      font-family: 'Oswald', sans-serif;
      font-size: 2em;
      border: 1px solid black;
    }
    ul.box {
      display: inline-block;
      border: 3px solid green;
      /* width: 70%; */
      /* margin-left: 30px; */
      margin-left: 3em;
      list-style: none;
      width: -moz-fit-content;
      width: -webkit-fit-content;
      width: fit-content;
    }
    ul.box li {
        float: left;
        position: relative;
        list-style: none;
        /* border: 1px solid black; */
    }
    ul.box li a {
        display: block;
        min-width: 10em;
        padding: 1.2em .8em;
        color: #333;
        z-index: 1;
        overflow: hidden;
        text-align: center;
        transition: background-color 100ms ease, box-shadow 150ms ease;
        transition-timing-function: cubic-bezier(0.57, 0.21, 0.69, 3.25);
    }
    Il codice è ovviamente solo parziale.
    Accadono 2 cose:
    • Quanto restringo la finestra subito (circa a 1400 px) la parte del menu va a capo
    • Continuando, i tags li a destra del menu vanno a capo finché non si scende sotto i 1000 px, dove il contenuto inizia a restringersi.
    Al netto delle @media-queries che dovrò impostare, vorrei capire perché il browser si comporta in questo modo. Forse usando flex potrei risolvere, ma prima di provare vorrei capire come il funzionamento del browser per agire in futuro di conseguenza.

    Se qualcuno può spiegarmi, gliene sarei grato.

  2. #2
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Quote Originariamente inviato da BennyB Visualizza il messaggio
    Al netto delle @media-queries che dovrò impostare, vorrei capire perché il browser si comporta in questo modo.
    In genere, utilizzando i float, gli elementi si allineano agli altri in base allo spazio disponibile sulla riga, quindi a seconda della dimensione della pagina questo potrebbe condurre a elementi allineati e/o elementi a capo in base alle condizioni applicate.

    Nel markup sopra, secondo me c'è anche un errore: nell'elemento <nav cf> quel "cf" dovrebbe essere una classe, giusto? Se sì, questo potrebbe essere già la causa di un effetto che ci si aspetta ma che non viene applicato.

    Per verificare che gli attributi di stile siano correttamente applicati, meglio invocare nel browser i Developer Tools con il tasto F12 e andare a ispezionare le proprietà CSS, magari sperimentando direttamente sulla pagina per vederne gli effetti.

    Detto questo, nella maggior parte dei casi è più facile ricorrere alle Media Queries con regole più semplici, piuttosto che tentare di impostare un layout valido per qualsiasi tipo di device e schermo con un singolo foglio di stile che vada bene per tutti. E' possibile, ma estremamente difficile.

    Ciao!
    ℹ️ Leggi di più su _alka_ ...

  3. #3
    BennyB non è in linea Scolaretto
    Grazie della risposta.
    Allora, la classe cf serve per interrompere il float tramite le pseudo-classi, come esplicitato all'inizio del CSS. Quindi, sì, ho modificato introducendo come classe (era così prima di varie modifiche e tentativi appliati, è stata una svista). Corretto segnalarlo, ma non essendoci ancora altro di seguito, il float si interrompe comunque.

    E' pure corretta la spiegazione sui float, però a schermo intero, con una risoluzione di 1920x808 px gli elementi restano su una riga. Poi, riducendo con la simulazione responsive del pannello di ispezione, i primi 3 li vanno sulla seconda riga iniziando con una risoluzione orizzontale di circa 1350 px; finché, raggiunta la risoluzione di circa 1160 px, l'HEADER inizia a rimpicciolirsi. So che dovrò usare le @media-queries, ma mi sembra strano di dover cominciare con 1400 px...
    Addirittura, il menu va a capo sotto il logo con una risoluzione di 1550 px circa... non capisco.
    Ultima modifica di BennyB; 07-09-2021 14:06 

+ Rispondi al messaggio

Potrebbero interessarti anche ...

  1. Risposte: 2
    Ultimo Post: 01-03-2016, 13:33
  2. Modifica slide creata in CSS3 responsive con parametri percentuali
    Da perla0279 nel forum HTML, CSS e JavaScript
    Risposte: 0
    Ultimo Post: 23-08-2015, 21:32
  3. Header
    Da vide91 nel forum PHP
    Risposte: 1
    Ultimo Post: 06-06-2012, 21:54
  4. File Header
    Da linus.paolo nel forum Visual Basic .Net
    Risposte: 3
    Ultimo Post: 27-11-2006, 10:37