nav menù

[invisible93]

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:

<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:

#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
comunque ho provato ad utilizzare bootstrap ma ancora non ho capito come funziona

 

[Max 1]

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]

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]

Fino a che usi misure fisse sarà sempre così! Se vuoi che si adatti usa misure in em

 

[invisible93]

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]

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]

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]

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

 

[Jonn]

Allora mi sono sbagliato scusate l'errore.

 

[Max 1]

....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]

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]

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]

....Secondo te Max qual'è il modo migliore per realizzare un sito che si adatta sia su smartphone/tablet che pc?

Farselo con le proprie manine se si ha le competenze sufficienti, in alternativa prima studiare magari con qualche guida http://www.html.it/guide/responsive-web-design-la-guida/ poi realizzarlo come detto sopra, ma bootstrap no! no! e no!

 

[invisible93]

Grazie a tutti e due, seguirò i vostri consigli per la versione 2.0 del sito