[ HTML5 - CSS ] uso dei nuovi elementi

[evil_stefano]

Ciao,

ho alcuni dubbi sui nuovi elementi di html5, in particolare sul nav.
vorrei fare un layout così strutturato:
http://abload.de/thumb/layout2tkxl.png (http://abload.de/image.php?img=layout2tkxl.png)

ma non capisco se devo fare:
- un div con dentro 2 nav
oppure
- un nav con dentro 2 div
oppure
- un nav con dentro altri nav..

come best practice agli elementi nav associo un ID per poi modificarli con il css?
oppure un nav deve avere sempre dentro un div e poi gioco ocn il div in css?

ho visto alcuni esempi dove tutto il contenuto del body è racchiuso in un div "container", ma non ne capisco il significato, che scopo ha racchiudere tutto da un div?


Grazie ! ;)

[Daniels118]

Il tag nav non ha bisogno di div, ovviamente nulla ti vieta di inserire quanti div vuoi se hai bisogno di ulteriori box per posizionare i vari elementi.
Mettere due nav uno dentro l'altro non credo che abbia molto senso.
Nel tuo caso metterei due div principali, uno per contenere la colonna sinistra e un altro per quella destra.

[airon]

Questi tag html5 servono esclusivamente per la semantica.
Vengono usati per far capire ai computer (quindi readers, crawlers, parsatori ecc.) che tipo di elemento è quello.

Il tag nav serve per dire che quel blocco è la navigazione principale. Dentro poi ci puoi avere n div, n ul, ecc.

Nel tuo caso per la sidebar di sx se è la navigazione principale fai diventare il div arancio nav e dentro poi gestisci con div e ul.
La nav sopra la section non è navigazione principale presumo, quindi div semplice.


Ciao

[evil_stefano]

ooook, grazie !

mi rimangono solo gli ultimi 2 dubbi:
come best practice agli elementi nav associo un ID ?

devo mettere un div "container" che inglobi tutto quello che c'è nel body?
ad esempio:
http://www.carlosaleman.com/images/tut47.jpg

[airon]

Ciao,

la costruzione dell'html è a tua discrezione. Avere un div wrapper può essere utile. Io di solito lo uso.

Per quanto riguarda invece id e classi: è buona norma avere per ogni elmento della pagina (div/nav/section/article ecc.) un id e delle classi.

Il CSS è buona norma farlo usando le classi così che possa essere riutilizzato per altri elmenti con stessa classe ;)

Alle volte è necessario usare gli ID (non c'é nulla di male).

[Daniels118]

Gli id sono univoci, vanno bene per elementi come "menu principale", header e footer.
Le classi invece sono per quegli elementi che possono ripetersi, sia in sequenza che annidati, ad esempio un elenco di articoli o i nodi di un albero.

[evil_stefano]

se dovessi realizzare un layout come quello postato sopra (quello nero) sarebbe meglio usare, come unità di misura nel css, i px, le % o EM ?

non capisco cosa è meglio usare.
attualmente l'applicazione verrebbe utilizzata solo da desktop, con risoluzione variabile tra un 15" (notebook suppongo in 16:9) e i classici LCD 17-19" da ufficio.

[OoZic]

in teoria em è meglio perchè è una misura relativa e quindi scala con lo zoom del browser.

per quel che serve a te può andare bene anche px.

consiglio: valuta di utilizzare un framework piuttosto che scrivere css partendo da zero.

http://getbootstrap.com/
http://foundation.zurb.com/
http://getuikit.com/
http://purecss.io/

[Daniels118]

Che io sappia lo zoom del browser funziona indipendentemente dalle unità di misura scelte. La percentuale è l'unica unità di misura relativa alle dimensioni della finestra, i pixel sono l'unica unità di misura relativa alla risoluzione del monitor e gli em l'unica unità di misura relativa alla dimensione predefinita dei caratteri impostata nel browser. Millimetri, centimetri, pollici e punti sono tutte unità di misura assolute.
Le unità di misura assolute ti assicurano che l'elemento sia visualizzato con dimensioni precise, indipendentemente dalla risoluzione del monitor. La percentuale ti assicura che le dimensioni degli elementi si adattino alle dimensioni della finestra. em ti assicura che le dimensioni dei font siano in proporzione a quelle che sceglie l'utente.

[evil_stefano]

ooook.

Grazie a tutti ! ;)