[HTML] Problemi con visualizzazione Navigation Bar

Andrea_Ventura · 14 Giu 2018

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 · 14 Giu 2018

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:

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.
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 · 14 Giu 2018

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 · 14 Giu 2018

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 · 14 Giu 2018

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 · 14 Giu 2018

Allora con il tuo codice io ottengo questo risultato

Come vorresti che sia?
I diffetti che trovo io come estetica sono:

Caratteri troppo piccoli
Troppa distanza tra le voci
Rollover poco visibile per poco contrasto

Andrea_Ventura · 14 Giu 2018

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?

Andrea_Ventura · 16 Giu 2018

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 · 17 Giu 2018

KdC ha scritto:

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!

KdC · 18 Giu 2018

La differenza è questa:

Codice:

ul, li, a{
margin:0;
padding:0;
}

Ogni volta che crei lo stile per un sito ti consiglio di usare un "css reset"
info:
https://www.mrw.it/css/css-reset-pagine-web-stile-veramente-cross-browser_7724.html

Andrea_Ventura · 18 Giu 2018

Grazie per il consiglio, lo metterò in cassaforte e ne farò buon uso!

Inviato dal mio RNE-L01 utilizzando Tapatalk

Cerca

Cerca

[HTML] Problemi con visualizzazione Navigation Bar

Andrea_Ventura

Nuovo Utente

Max 1

Super Moderatore

Andrea_Ventura

Nuovo Utente

Max 1

Super Moderatore

Andrea_Ventura

Nuovo Utente

Max 1

Super Moderatore

Andrea_Ventura

Nuovo Utente

Allegati

Andrea_Ventura

Nuovo Utente

Andrea_Ventura

Nuovo Utente

KdC

Nuovo Utente

Andrea_Ventura

Nuovo Utente

Discussioni simili