[HTML] Problemi con visualizzazione Navigation Bar

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
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;}
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.006
295
83
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!!!
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
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.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.006
295
83
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
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
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.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.006
295
83
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
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
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?
 

Allegati

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
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?
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
Codice:
ul, li, a{
margin:0;
padding:0;
}
#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;}
Guarda sembra la configurazione che avevo precedentemente, ma si vede che hai aggiunto il tocco magico, poichè adesso tutto quadra perfettamente. Grazie!
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
Grazie per il consiglio, lo metterò in cassaforte e ne farò buon uso!

Inviato dal mio RNE-L01 utilizzando Tapatalk