[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.449
338
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.449
338
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.449
338
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

  • Cattura2.PNG
    Cattura2.PNG
    3,9 KB · Visite: 484

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
 
Discussioni simili
Autore Titolo Forum Risposte Data
O [HTML] problemi con la regola "background-attachment: fixed" in EDGE HTML e CSS 0
ANDREA20 [HTML] problemi con il footer HTML e CSS 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
G [HTML] Problemi con inserimento immagini HTML e CSS 7
S [HTML] Problemi con Blueimp image gallery su Chrome e Firefox HTML e CSS 2
W [HTML] problemi con sito responsive CMS (Content Management System) 1
A [HTML] Problemi con l'installazione di Disqus HTML e CSS 5
J Problemi grafici con un html tumblr HTML e CSS 1
P Problemi visualizzazione html con phpmailer PHP 6
A html e css problemi con explorer 8 HTML e CSS 0
W Problemi con filtro tabella HTML Javascript 0
F problemi con html nel blog HTML e CSS 2
PoLe [HTML] Per chi ha problemi con Front Page o Dreamweaver HTML e CSS 2
V problemi con invio email in formato html PHP 1
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
asevenx [HTML]Problemi float e adattamento sfondo HTML e CSS 2
L [HTML] Problemi a visualizzare le modifiche eseguite alle pagine del sito. HTML e CSS 2
giuseppe_123 [HTML] Problemi wordpress WordPress 2
giuseppe_123 Problemi form php/html PHP 33
robertolp problemi e html php PHP 9
F Problemi php-html PHP 0
I Risoluzioni problemi html HTML e CSS 7
A Html e visulizzazone explorer 8 - problemi HTML e CSS 1
antonio.amazza Apache-Tomcat : Problemi di visualizzazione pagine HTML Apache 0
T Problemi frames pagina html HTML e CSS 3
P Problemi caricamento suono su codice html HTML e CSS 1
G Pagina html in stringa PHP 2
E Sostituzione Elemento Html PHP 3
G Elementi HTML HTML e CSS 1
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
T Domanda valutazione html LinkedIn 2022 pt3 HTML e CSS 7
T Domanda valutazione html LinkedIn 2023 pt2 HTML e CSS 15
T Domanda valutazione html LinkedIn 2023 pt1 HTML e CSS 1
MarcoGrazia Salvataggio HTML in database PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
peppe0703 Come Estrarre dati da db wordpress e richiamarli in html esterno HTML e CSS 0
L problema collegamento file css con html HTML e CSS 1
D Informazioni da XAMPP su HTML PHP 0
R Immagini html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0
K Aiuto con file audio in html HTML e CSS 1
Antonio67 Lanciare file shell bash da html HTML e CSS 2
M Riportare in tabella HTML dati estratti con query SQL MySQL 0
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 3
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1

Discussioni simili