[HTML] Problemi con visualizzazione Navigation Bar

Discussione in 'HTML e CSS' iniziata da Andrea_Ventura, 14 Giugno 2018.

  1. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Allora premetto che sono alle prese con i miei primi siti, ma come è possibile che utilizzando la medesima formattazione in un caso ottengo una perfetta impaginazione della barra di navigazione e nell'altro ho gli elementi "li"/"a" che non si dispongono correttamente.
    Qualcuno è in grado di suggerirmi dove è l'errore nel codice?
    Codice:
    #navbar {
        width:100%;
        height:60px;
        position:absolute;
        top:90px;
        left:0px;
        background-color:black;
        overflow:hidden;
    }
    /* Navbar links */
    #navbar a {
        float: left;
        color:white;
        text-align: center;
        vertical-align:central;
        line-height: 60px;
        text-decoration: none;
        font-size: 16px;
        width:25%;
    }
    
    
    
    /* Links - change color on hover */
    #navbar a:hover {
        background-color:grey;
        color: black;
    }
    
    #navbar  a:active {
        text-decoration:underline;}
    
    
     
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.802
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
    Allora io ti do un consiglio poi tu fai come vuoi!
    Come avrai notato nelle discussioni che hai aperto tranne me non ti ha risposto nessuno e questo perchè a parte che segui poco i consigli non metti nella condizione di capire bene dove stanno i problemi postando pezzi di codice che presi singolarmente a noi che non vediamo il resto e l'esito dicono ben poco. Pertanto per un aiuto a te più utile e risolutivo divi metterci nelle condizioni di risponderti con cognizione di causa:
    1. Postando il codice non a pezzi costringendo chi ti vuole rispondere di assemblarlo e provarlo, ma il codice completo css e html della pagina tutto insieme.
    2. Ancora meglio mettere le pagine online e darci il link in modo che possiamo vederle in funzione. Io quando faccio un progetto man mano che procedo lo metto online e se ho bisogno di aiuto do il link
    Scusami se mi sono permesso!!!
     
  3. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Chiedo scusa per l'inesperienza e per il metodo con cui posto il codice, ma sono nuovo sul blog e sono qui per imparare e in futuro per aiutare gli altri.
    In questa discussione ho postato solo il codice css poichè non c'era nessun elemento di stile all'interno del codice html, se non i nomi degli id o delle classi.
    Per quanto riguarda il postare online le pagine mi cogli impreparato e non saprei veramente come fare.
    Non voglio essere un peso, voglio solo riuscire a diventare un sviluppatore web junior e ci sto impiegando tutto il mio tempo a disposizione.

    Comunque per quanto riguarda il poter postare il codice html e css insieme non c'è problema, ma avendolo su due pagine separate quale potrebbe essere la soluzione migliore?

    Chiedo esclusivamente di essere compreso come nuovo utente attivo di questo forum e relativo blog.
     
  4. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.802
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
    No guarda che la mia non è una critica e neanche vuole essere offensiva e neanche sei un peso, vuole essere solo consigli per poterti aiutare nel migliore dei modi!!
    Ad esempio con solo il css che hai postato (e parlo per me) non si ci fa niente per capire il tuo problema in quanto non conosciamo il resto dell'impaginazione e non vediamo l'effetto che quel css produce. Se ti dovessi rispondere solo in vase a quello ti dovrei dire che errori non ce ne sono, ma a te una risposta del genere non serve perché tu vedendo la pagina dici che un errore da qualche parte ci deve essere
     
  5. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Spero che così possa essere più chiaro

    Html:
    Codice:
    <!DOCTYPE html>
    <html>
        
        <head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <link rel="stylesheet" href="../css/configG90-2.css" type="text/css" />
            <title>Gelateria 90</title>
            
        </head>
        
        <body>
            
            <div id="topbar">
                <img id="logo" alt="Gelateria 90" src="../images/G90-icon.jpg">
            </div>
            
            <div id="navbar">
                <ul>
                    <li><a class="active" href="Home.html">Home</a></li>
                    <li><a href="Prodotti.html">I Nostri Prodotti</a></li>
                    <li><a href="Chi Siamo.html">Chi Siamo</a></li>
                    <li><a href="Dove Siamo.html">Dove siamo</a></li>
                </ul>
            </div>
            
        </body>
    
    </html>
    css:
    Codice:
    #topbar {
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height: 90px;
        background-color:white;
        text-align: center;
    }
    
    #logo {
        height: 90px;
        width: 90px;
    }
    
    #navbar {
        width:100%;
        height:60px;
        position:absolute;
        top:90px;
        left:0px;
        background-color:black;
        overflow:hidden;
    }
    /* Navbar links */
    #navbar li{
        display: inline;
    }
    #navbar a {
        
        float:left;
        color:white;
        text-align: center;
        vertical-align:central;
        line-height: 60px;
        text-decoration: none;
        font-size: 16px;
        width:25%;
    }
    
    #navbar .active{
        text-decoration: underline;
    }
    
    
    /* Links - change color on hover */
    #navbar a:hover {
        background-color:grey;
        color: black;
    }
    
    #navbar  a:active {
        text-decoration:underline;}
    
    
    Il problema iniziale l'ho risolto inserendo "display:inline" (che nell altro sito non era presente ma ottenenevo comunque una corretta impaginazione)
    Adesso riscontro nella visualizzazione la mancata presa in comando del browser di
    "line-height: 60px"

    Scusate ancora, pago l'inesperienza in questo campo.
     
  6. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.802
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
    Allora con il tuo codice io ottengo questo risultato
    0001.jpg
    Come vorresti che sia?
    I diffetti che trovo io come estetica sono:
    1. Caratteri troppo piccoli
    2. Troppa distanza tra le voci
    3. Rollover poco visibile per poco contrasto
     
  7. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    A me piacerebbe che il testo si disponesse centralmente rispetto all'altezza del div in cui esso è contenuto, come in questo esempio:

    La troppa distanza tra le voci è un elemento ricercato da me per occupare l'intera ampiezza della pagine, forse mi sbaglio ma mi piace di più a livello visivo.

    Il rollover è un altro difetto di codice che mi appare. Non tanto per visibilità poichè secondo me grigio su nero dovrebbe risultare abbastanza visibile, ma poichè non copre interamente la grandezza del div, lasciando quindi una riga nera sovrastante. Riscontra anche lei questo difetto?
     

    Files Allegati:

  8. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Grazie mille per la configurazione. In questo modo il testo è allineato centralmente, ma ottengo un'impostazione sbagliata con l'attributo over. Infatti quando porto il mouse sul link si illumina solo 1/3 della navigation bar corrispondente alla barra del testo.

    C'è un modo per correggerlo?
     
  9. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Guarda sembra la configurazione che avevo precedentemente, ma si vede che hai aggiunto il tocco magico, poichè adesso tutto quadra perfettamente. Grazie!
     
  10. KdC

    KdC Nuovo Utente

    Registrato:
    1 Maggio 2018
    Messaggi:
    7
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    A Andrea_Ventura piace questo elemento.
  11. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Grazie per il consiglio, lo metterò in cassaforte e ne farò buon uso!

    Inviato dal mio RNE-L01 utilizzando Tapatalk
     
Sto caricando...

Condividi questa Pagina