nav menù

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
Ciao a tutti,
ho questo piccolo problema con un munù di navigazione, praticamente se riduco le dimensioni della pagina del browser mi spariscono alcune voci.
Il codice html è questo:
HTML:
<nav id="menu">
		<ul id="menu">
			<li><a href="index.html">HOME</a></li>
			<li><a href="galleria.html">GALLERIA FOTOGRAFICA</a></li>
			<li><a href="eventi.html">EVENTI</a></li>
			<li><a href="prezzi.html">PREZZI</a> </li>
			<li><a href="contatti.html">CONTATTI</a> </li>
			<li><a href="promozioni.html">PROMOZIONI</a> </li>
			<li><a href="territorio">TERRITORIO</a> </li>
			<li><a href="dove.html">DOVE SIAMO</a> </li>
		</ul>

</nav>

e questo è il codice css:
Codice:
#menu {background:#A89070; height:30px; }
#menu ul { list-style:none; padding:0px; margin:0px; float:center;}
#menu ul li { float:left; display: inline; }
#menu ul li a { color:#fff; text-decoration:none; padding:5px 20px; display:block; font-family: "Arial";}
#menu ul li a:hover { background:#D2B49C;}

è da un po' che non faccio siti web quindi non infamatemi :D
comunque ho provato ad utilizzare bootstrap ma ancora non ho capito come funziona
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Ovvio che spariscono voci! Se il menu è stato progettato per estendersi in orrizzontale su una sola riga e ha una certa dimensione, stringendo la finestra in una dimensione inferiore al menu ovviamente le voci che non ci stanno più spariscono. Cosa docrebbero fare diversamente?
Io poi non capisco la preoccupazione di stringere la finestra, un visitatore del sito non entra nel sito con una finestra ridotta ai minimi termini ma con una larghezza sufficiente per visitare le pagine
 

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
Non è che stringono la finestra ma ad esempio testando il sito su un monitor 16:9 il menù si vede perfettamente, mentre su 4:3 le due ultime voci del menù spariscono.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Fino a che usi misure fisse sarà sempre così! Se vuoi che si adatti usa misure in em
 

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
Ok ho capito, però anche con le em diciamo che il risultato non cambia, gli <li> mi vanno a finire nella parte sotto e l'unico modo che mi viene per fargli entrare quando si rimpicciolisce la pagina è quello di raddoppiare le misure del div #menu e ovviamente a livello grafico viene uno schifo
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Non dovrebbe andare a capo usando misure in em per tutto anche per i font, div, ul, li, dovrebbe rimpicciolirsi tutto e non andare a capo.

Ovvio che se il menu è troppo lungo anche rimpicciolito al massimo, va a capo in tutti i modi.
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Non c'entrano nulla le dimensioni del testo in EM anche se è comunque un'ottima pratica che sto cominciando ad adottare anche io.
Comunque invisible93 se ci dessi un link per vedere il tuo lavoro sarebbe meglio così possiamo darti soluzioni più consone perchè il 90% delle volte bisogna anche tener conto degli elementi fuori dal div di modo che non si sovrappongano o abbiano comportamenti imprevisti, altrimenti scrivi l'html e il css completi.
 

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
risolto con EM, i link si spostano e il div si ingrandisce.
Per questa prima versione del sito diciamo che può andare bene, quindi grazie a tutti e due.
Penso che bootstrap sia la soluzione per il futuro
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
....Penso che bootstrap sia la soluzione per il futuro
Penso che bootstrap sia la soluzione per chi non sa programmarsi le cose da se o per chi non ha voglia di fare, senza capire che alla fine il risultato e più scarso e che cercando di modificare le cose già impostate lavora e fatica di più.

Opinione molto personale si intende
 

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
Sinceramente mi piacerebbe approfondire il tema di bootstrap però qua andiamo troppo fuori tema.
Alcuni "colleghi" me lo hanno consigliato.
Secondo te Max qual'è il modo migliore per realizzare un sito che si adatta sia su smartphone/tablet che pc?
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Creare una struttura con dimensioni dinamiche, le soluzioni sono molteplici, me ne vengono in mente alcune che però dipendono dal modo di lavorare che una persona preferisce adottare:

- Creare un sottolivello del dominio: lo fanno molti siti come Youtube e Facebook anche e replicare il sito in versione miniaturizzata per mobile, esempio m.youtube.com, m.facebook.com, mobile.nomesito.it/net/com....
Praticamente oltre al sito originale devi copiare il sito originale e riadattarlo (graficamente) a schermi più piccoli fisicamente sono 2 siti distinti ma che possono condividere pagine, db, statistiche....

- Creare una directory (cartella) apposita nella root del dominio: stesso metodo del sottolivello del dominio che però non necessita di un altro spazio sul server (ottima per un sito che non prevede miliardi di visite giornaliere), esempio www.nomesito.it/mobile/index, o www.nomesito.it/m/index.

- Creare direttamente il sito quasi totalmente con dimensioni proporzionali (percentuali ecc..), non serve ricreare il sito intero ma prevede un impegno maggiore per far si che la stessa pagina si veda correttamente sia da piattaforme mobile che desktop, un buon modo oltre ad usare dimensioni proporzionali è quello di utilizzare le "Media Queries" in CSS che consentono la visualizzazione di una pagina entro determinati range di larghezze della finestra browser o del dispositivo.

- Creare diversi CSS per lo stesso sito: soluzione che non ho mai adottato ma penso sia funzionale, praticamente con un controllo per esempio sullo User Agent del Browser e/o sulla width (larghezza effettiva) della finestra del browser e/o del dispositivo puoi imporre alla pagina di utilizzare un CSS o un altro, dovrai scrivere praticamente un CSS per ogni range esempio, mobile.css, desktop.css.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Discussioni simili
Autore Titolo Forum Risposte Data
G header , nav e flex HTML e CSS 3
T [HTML] inserimento nav HTML e CSS 8
S [HTML] <nav> con position:fixed copre <main> HTML e CSS 0
L [HTML] versione mobile eliminare stile menu da nav HTML e CSS 0
A Percorso Pagine Nav Javascript 0
J Inserimento di un header, nav, footer php PHP 0
G Elementi Menù orizzontali HTML e CSS 2
psikolele Dropdown menù HTML e CSS 2
G Menù a tendina di ricerca con query PHP 1
F menù select dinamico da db in php PHP 3
L Menù con switch case C/C++ 1
J Richiama descrizione da menù PHP 11
Z Menù di navigazione responsivo HTML e CSS 0
R Barra del menù principale decentrata Joomla 4
M Stringa con spazi nel menù a tendina PHP 4
A Menù a tendina collegato a database PHP 13
D Aumentare i sublevel del menù del theme Webdesign e Grafica 1
Tommy03 Contenitore non si nasconde dietro al menù HTML e CSS 1
Tommy03 Due menù nella stessa app Sviluppo app per Android 0
C [PHP] Form con Inserimento dati dalla maschera e un menù a discesa che prende i dati dal db PHP 1
C [PHP] Form inserimento più menù a discesa PHP 9
V Menù CSS da file in cartella esterna HTML e CSS 4
W [Javascript] [HTML] menù responsive fisso Javascript 2
S [PHP] menù a tendina che stampi voce scelta in precedenza PHP 1
F [HTML] Responsive menù CMS (Content Management System) 0
A [PHP] menù con links esterni PHP 6
D Come inserire opzioni menù prelevandole dal database con PHP ? PHP 12
F [HTML] li menù width HTML e CSS 3
T [Javascript] un form con select dinamica che funzioni da menù... Javascript 2
ecosito [Wordpress] La barra del menù mi nasconde la parte alta delle pagine WordPress 0
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
F Problema hover voce di menù Javascript 2
F Nascondere menù onclick sottovoce jQuery 0
F Active menù HTML e CSS 2
A menù a tendina aiuto PHP 1
M Menù a tendina editabile HTML e CSS 0
P problema con tendina del menù, scompare sotto i contenuti HTML e CSS 7
F Link menù attivo categoria PHP 2
MarcoGrazia Breadcrumbs, menù a briciole di pane Snippet PHP 2
LuigiDonato Problema Visualizzazione Menù HTML e CSS 17
C Menù scomparso WordPress 2
V Posizionare Iframe e menù a discesa HTML e CSS 1
F z-index menù HTML e CSS 4
Tommi Script per menù Javascript 16
Licantropo esportare tags e menù Joomla 0
F Menù a tendina Joomla 4
L [PHP] 3 menù Select OPTION consecutivi PHP 1
Carlito's Menù jQuery 1
E Menù da modificare HTML e CSS 2
H Menù a discesa contenente dati db, la scelta dal menù deve essere inviata in un altro db. PHP 1

Discussioni simili