Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2011
    Messaggi
    14

    Centrare verticalmente il contenuto testuale di una lista dentro la navbar

    Buongiorno, sto facendo un sito molto amatoriale in cui ho una navbar fissata in alto con all'interno una lista e dentro a ciascun elemento della lista un link. Ho un problema con l'allineamento verticale del testo. Spero di non violare le regole postando il link alla pen piuttosto che il codice: PEN

    Ho provato già a mettere vertical-align=middle ad a, ho provato a giocare un po' con margin = auto 0 e 0 auto ma non sono riuscito a risolvere nulla. Ho controllato anche su stackoverflow ma le soluzioni postate non sono riuscito ad applicarle al mio caso.

    Ho anche un'altra domanda: provate a commentare, all'interno di "#nav li a" il margin left e top ed attivare il codice di debug (che mette semplicemente un bordo di 1px nero): perché nonostante "a" erediti tutte le proprietà da "li" si vede sfasato senza questo accorgimento?


    Grazie in anticipo
    Ultima modifica di MC23; 29-11-2017 a 18:05

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Salve
    Spero di non violare le regole postando il link alla pen piuttosto che il codice
    Nessuna violazione, anzi, sullo stesso regolamento di sezione viene consigliato di postare un eventuale link così da poter verificare più agevolmente il problema in questione.

    Ad ogni modo mi permetto di riportare qui stesso il relativo codice di quella pen, così da poter avere dei riferimenti diretti anche su questa discussione.

    codice:
     <header>
        <nav id="nav">
          <ul>
            <li id="home"><a href="#">img</a></li>
            <li class="active"><a href="#">Argomento</a></li>
            <li><a href="#">Argomento</a></li>
            <li><a href="#">Argomento</a></li>
            <li><a href="#">Argomento</a></li>
            <li><a href="#">Argomento</a></li>
            <li><a href="#">Argomento</a></li>
            <li><a href="#">Argomento lungo su due linee</a></li>
          </ul>
        </nav>
      </header>
    codice:
    #nav {
      position: fixed;
      top: 0px;
      left: 1%; right: 1%; /*per lasciare uno spazio a sx e dx*/
      background: #b7967b;
      min-width: 550px;
      border-radius: 10px;
      z-index: 1;
    }
    
    #nav ul {
      text-align: center; /*centra orizzontalmente gli elementi della lista*/
      margin: 0; /*fa coincidere ul con la nav*/
      padding: 5px;
      border: 3px solid #855439;
      border-radius: 10px;
      vertical-align: middle;
    }
    
    #nav li {
      display: inline-block;
      padding: 0px 3px;
      border: 3px solid #855439;
      background-color: #ecdbc6;
      border-radius: 10px;
      margin: 0.5%;
      width: 150px;
      height: 44px;
      text-align: center;
       vertical-align: middle; /*senza di questo tutte le "celle" apparte  l'ultima (e più in generale quelle su due righe) verrebbero traslate  verso il basso*/
    
      /*transizione*/
      -webkit-transition: transform 0.3s ease-in-out;
      -moz-transition: transform 0.3s ease-in-out;
      -o-transition: transform 0.3s ease-in-out;
      -ms-transition: transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out;
    }
    
    #nav li a {
      display: inherit; /*per far sì che erediti le seguenti proprietà correttamente:*/
       border-radius: inherit; padding: inherit; width: inherit; height:  inherit;; /*le ultime due servono per fargli occupare il 100% della li*/
    
      /*proprietà effettive*/
      color: #3d1d0b;
      font-weight: normal; /*necessario perché body a ha i link bold*/
      margin-left: -5px; margin-top: -2px;/*senza di questa non aderisce perfettamente a sx*/
    
      /*transizione*/
      -webkit-transition: font-weight 0.1s ease-in-out;
      -moz-transition: font-weight 0.1s ease-in-out;
      -ms-transition: font-weight 0.1s ease-in-out;
      transition: font-weight 0.1s; ease-in-out;
    
      /*debug*/
      /*border: 2px solid black;*/
    }
    
    /*Probabilmente nulla di quello sotto influisce sul corretto comportamento*/
    #nav li:not(.active):hover{
      background-color: #e0c6a1;
      transform: scale(1.03);
    }
    
    #nav li a:not(.active):hover {
      font-weight: bold;
    }
    
    body {
      background-color: #ebd9c7;
      font-family: sans-serif;
      font-size: 18px;
      text-align: justify;
      min-width: 650px;
    }
    
    body a {
      font-weight: 600;
      text-decoration: none;
      color: #00e;
    }
    
    #nav li.active {
      background-color: #d9b98c;
    }
    
    #nav li.active a {
      font-weight: bold;
    }
    
    #nav #home {
      width: 50px;
    }
    
    #home img {
      width: 40px;
    }
    Ho provato già a mettere vertical-align=middle
    Il modo in cui agisce questa proprietà, sugli elementi a cui è applicata, spesso non è così intuitivo e non è nemmeno così facile né da spiegare né da capire.

    Molto a grandi linee, questa proprietà può essere applicata a celle di tabelle (o elementi che sono opportunamente impostati da CSS come table-cell) per cui l'effetto di allineamento "è applicato" (agisce) non sull'elemento in sé ma sul relativo contenuto; oppure può essere applicata ad elementi inline (o inline-block) per cui l'effetto di allineamento agisce in base alla relazione che c'è tra l'elemento stesso e gli elementi che gli stanno "attorno" (se ce ne sono) nell'ambito dello stesso elemento padre e della stessa linea in cui è presente l'elemento, relativamente al flusso del testo.

    In base a questo, nel tuo codice, il vertical-align:middle che hai applicato ad ul non ha alcun effetto.

    ho provato a giocare un po' con margin = auto 0 e 0 auto
    Questa è un'altra di quelle questioni poco intuitive.
    Sempre molto a grandi linee, per delle questioni legate all'algoritmo usato per il calcolo delle altezze degli elementi, il valore auto applicato alle proprietà margin-top e margin-bottom (quindi "margin: auto 0") viene considerato come valore 0. In poche parole non è possibile applicare un margine verticale automatico per ottenere un allineamento centrale in verticale, mentre invece è possibile farlo nel caso di margini orizzontali, cioè per margin-left e margin-right (quindi "margin: 0 auto") per cui si può ottenere (in generale) un allineamento centrale in orizzontale.

    Per centrare in verticale un qualsivoglia elemento, a seconda dei casi è possibile usare diverse tecniche tra cui flexbox, table-cell(come già accennato), top:50% e margin-top negativo o transform:translateY(-50%), display:inline-block e vertical-align:middle, line-height uguale a height, e altre eventuali.

    Penso che nel tuo caso bisogna andare di table-cell.
    Per li dovrai applicare:
    codice:
    display: inline-table;
    Mentre per a:
    codice:
    display: table-cell;
    vertical-align:middle;
    Vedi se così si risolve. E' possibile che ci siano anche altre soluzioni ma ne ho provato diverse e questa mi pare quella che funziona meglio.

    Ho anche un'altra domanda: provate a commentare, all'interno di "#nav li a" il margin left e top ed attivare il codice di debug (che mette semplicemente un bordo di 1px nero): perché nonostante "a" erediti tutte le proprietà da "li" si vede sfasato senza questo accorgimento?
    Il problema è dovuto a diverse cose, anche queste non troppo semplici né da spiegare né da apprendere se mancano alcuni principi base del CSS. Non per essere scortese ma per spiegare esattamente cosa accade bisognerebbe dilungarsi nell'ulteriore spiegazione di varie altre nozioni, per cui si andrebbe fuori tema rispetto all'oggetto di questa discussione.

    La regola generale è "una discussione" => "un argomento".

    Per ora rispondo qui, cercando di essere quanto più sintetico possibile, ma eventualmente, in casi come questo, ti invito piuttosto ad aprire delle discussioni distinte (se chiaramente c'è il tanto per farlo, e in questo caso, a mio parere, ci sarebbe anche) così da evitare di creare un minestrone di argomenti in un'unica discussione.

    1) Di default nelle dimensioni (width ed height) degli elementi non vengono compresi border e padding (cioè width ed height si riferiscono al content-box). Il tuo elemento li ha un bordo di qualche pixel; di norma, gli elementi figli (e quindi il tuo a) hanno riferimento a partire dal limite del content-box del genitore, cioè dal limite interno del bordo e non da quello esterno. Con la tua riga di debug stai applicando un bordo anche ad a, ma di fatto stai falsando il reale risultato che ti porta a correggere il margin-top, anche se effettivamente in questo caso non ce n'è bisogno proprio perché la dimensione di a (senza bordo) è pari a quella definita per il genitore li (senza bordo).

    2) Per li hai impostato "padding: 0px 3px;", quindi a risulterà spostato di 3px dal lato sinistro, oltre ai 2px del bordo, per i quali hai dovuto correggere margin-left. Il fatto che a stia ereditando lo stesso padding, non cambia questo suo posizionamento, anzi, forse sarebbe meglio se non avesse quel padding perché non sborderebbe a destra ma resterebbe all'interno del content-box di li.

    Ad ogni modo, proprio per "aggiustare" queste discrepanze tra dimensione del content-box e quella invece effettiva che comprende border e padding, spesso viene adoperato box-sizing:border-box, cosa che ti consiglierei anche nel tuo caso, ma il tutto va ovviamente applicato in modo opportuno.
    Ultima modifica di KillerWorm; 30-11-2017 a 06:05
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2011
    Messaggi
    14
    Ciao, grazie dell'esauriente risposta. Il problema dell'allineamento verticale è stato risolto! Darò sicuramente un'occhiata al display table e table cell, l'ho saltato durante lo studio della teoria perché avevo fretta di imparare JavaScript, ma di sicuro ci tornerò sopra.

    Per l'altro problema, nonostante fossi a conoscenza della proprietà box-sizing, non ho pensato ad usarla (EDIT: per ora ho risolto mettendo il padding dentro ad "a", usando table-cell si sono risolti un sacco di problemi!). Darò un'occhiata approfondita anche a quella e sono sicuro riuscirò a risolvere anche il secondo problema. Nel caso avessi problemi aprirò un altro topic. Direi che questo si può chiudere...

    Grazie ancora!
    Ultima modifica di MC23; 30-11-2017 a 10:25

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Bene, mi fa piacere che tu stia riuscendo ad andare avanti.
    Qui lasciamo comunque aperto; per altre richieste puoi aprire chiaramente delle nuove discussioni ma, se hai eventuali ulteriori richieste nell'ambito dell'oggetto di questa discussione, si può continuare qui stesso.

    Buon proseguimento
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Piccolo aggiornamento. Come già indicato, tra le varie tecniche puoi usare flexbox; attualmente sembrerebbe il metodo più versatile e "pulito".
    In riferimento al tuo codice, potresti quindi aggiungere semplicemente queste poche regole direttamente sul solo elemento a:
    codice:
    display: flex;
    align-items: center;
    justify-content: center;
    Ovviamente il valore della proprietà display andrà a sostituire quello che avevi impostato.

    Alla luce di quanto ho provato e in base a varie informazioni reperite online, personalmente ritengo che questo sia il metodo più appropriato in casi del genere e non solo. Ad ogni modo, anche l'uso di altri eventuali metodi, come table-cell che ti ho consigliato, non è da disprezzare se fanno il loro lavoro e si ottiene un risultato accettabile.

    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #6
    Utente di HTML.it
    Registrato dal
    May 2011
    Messaggi
    14
    Grazie dell'aggiornamento, vedo un po' con quale codice mi trovo meglio

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 © 2024 vBulletin Solutions, Inc. All rights reserved.