Menu di Navigazione verticale con i css???

[spiadadda]

Ciao a tutti,
come si realizzano i menu di navigazione verticale con i css???
Ad esempio se volessi realizzare un menu di navigazione verticale come quello presente nella Home di html (quello di colore blu a sinistra) come devo procedere?
Mi stavo ponendo questa domanda ma proprio non riesco a capire.....

Io prima con le tabelle avrei fatto così:
1)impostavo una tabella con larghezza e numero di celle desiderate. Ad esempio se il menu doveva essere formato da 10 link io avrei fatto una tabella di 10 celle.

2) Alla tabella impostavo l'immagine di sfondo che doveva costituire il meni. Tale immagine veniva ripetuta sia in altezza che in larghezza.

3) Ad ogni cella della tabella impostavo un altezza pari all'altezza dell'immagine di sfondo.....e quindi in questo modo ogni cella costituiva una riga del menu di navigazione.

4) Inserivo in ogni cella il link desiderato.

Con le tabelle le cose mi earano abbastanza chiare......ma ora con i css ho qualche dubbio.
Ho appena iniziato lo studio e sto facendo varie prove.....ma non riesco a capire come realizzare i menu di navigazione verticali!

Sarebbe un controsenzo se i menu verticali venissero realizati con le tabelle e tutta la struttura del layout venisse realizzata con i css e i box model???

Qualche chiarimento in merito?
Ciao Ciao

[Mich_]

Quella e` una semplicisima lista

<div id="siti_tematici">
<h2 class="bir"><span>Siti tematici</span></h2>
<ul>
    <li class="lato_client">Basic
    <li class="lato_client">HTML / XHTML
    <li class="lato_client">CSS
    ...
    <li class="design">Flash
    <li class="design">Grafica
    ....

Tanto semplice che puoi anche copiarla di sana pianta (ma devi cambiare i colori nel CSS): non c'e` copyright su una cosa di quel tipo, e` una struttura dell'(X)HTML.

Tieni presente che tra i "link utili" ci sono riferimenti a decine di menu gia` pronti che puoi usare.

[ricman]

Originariamente inviato da spiadadda
Ciao a tutti,
come si realizzano i menu di navigazione verticale con i css???
Ad esempio se volessi realizzare un menu di navigazione verticale come quello presente nella Home di html (quello di colore blu a sinistra) come devo procedere?

Innanzi tutto basta che ti guardi il codice e capisci subito come sono i link di html.it

<ul>
    <li class="lato_client">Basic
    <li class="lato_client">HTML / XHTML
   ...  ...
    <li class="comuni">Sicurezza[/list]

Ovvero è un elenco (lista) di link... come è giusto (semanticamente parlando) che sia.

Originariamente inviato da spiadadda
Sarebbe un controsenzo se i menu verticali venissero realizati con le tabelle e tutta la struttura del layout venisse realizzata con i css e i box model???

Non un controsenso, ma un errore semantico... Lasciati le tabelle per i dati tabellari.

[floyd46]

ciao
partendo dall'ultima tua domanda direi che è un controsenso, in assoluto, definire sito web uno fatto con le tabelle ed uno realizzato con codice standard e formattazione tenuta fuori dalla pagina html... e fruibile anche da persone con difficoltà.

per quanto riguarda il menu, basta usare un elenco non ordinato (ul, li) anzichè usare le tabelle. Per quanto riguarda il come fare... comincia a leggere le guide presenti nel sito di html.it
Bye

[spiadadda]

Grazie ragazzi!
Davvero molto semplice e soprattutto di volta in volta sto iniziando a capire e soprattutto ammirare le potenzialità dei CSS.

Sono riuscito a fare un menu verticale di navigazione, ma non ho usato il <ul>, ma bensi ho impostato l'altezza della riga uguale all'altezza dell'immagine di sfondo e sono riuscito a creare l'effetto che volevo,...identico a quello ottenuto con le tabelle.
E' lo stesso? In questo va bene lo stesso o posso avere problemi di incompatibilità?

La cosa che sto notando è che in questo modo si ottengono pagine più leggere, in termini di kb, rispetto a layout strutturati con le tabelle.

In due giorni ho imparato più cose grazie a questo forum e quindi grazie a voi che leggendo le guide. Naturalmente le guide sono utile per apprendere le nozioni fondamentali ma poi la pratica è indispensabile.

[floyd46]

scusa ma.... se non ai usato <ul> e[*], come hai fatto?
a me non è x niente chiara la cosa.

[ricman]

Originariamente inviato da spiadadda
non ho usato il <ul>, ma bensi ho impostato l'altezza della riga uguale all'altezza dell'immagine di sfondo e sono riuscito a creare l'effetto che volevo,...identico a quello ottenuto con le tabelle.

Potresti spiegare un po' meglio?
Magari con del codice o un link...

[spiadadda]

Originariamente inviato da floyd46
scusa ma.... se non ai usato <ul> e[*], come hai fatto?
a me non è x niente chiara la cosa.

Allora ho fatto così:

1) un box model (div) che costituisce il menu. A questo boxmodel ho impostato un immagine di sfondo che si ripete sempre in verticale e in orizzontale. Questa immagine ha un altezza di 20px e una larghezza di 5 px.

2) Al box model precedete ho impostato anche l'allineamento del testo a sinistra, il carattere (ma questo varia a seconda delle esigenze) e poi ho impostato un atezza della roiga di 20px (cioè uguale all'altezza dell'immagine di sfondo).

3) ho inserito i link e dopo ogni link vado a capo mediante


In questo modo ho ottenuto il menu, infatti ogni link si trova in una linea di testo... proprio come volevo io e quindi sono riuscito ad ottenre l'effetto desiderato.

E' sbagliato il mio modo di procedere?
Ho fatto così perchè con il tag <ul> mi compaiono i puntoi a sinistra di ogni link e poichè non so some levarli ho preferito fare nel modo che ti ho spiegato.

[spiadadda]

HTML

<div id="menu_lat_link">
    	 
Link 1

Link2

Link3

Link4

Link5
   	
Link
</div>

CSS

div#menu_lat_link{
width:130px;
margin: 0px;
background-image: url(/immagini/menu_lat.gif);
text-align:left;
line-height: 22px;
font-weight: bold;
color: #000000;
}

[Mich_]

In pratica hai usato una scorciatoia, che pero` ti lascia un buco nella semantica.
Se il menu e` una lista, devi usare un tag che identifica le liste!!

Ora prova ad allargare un pelo i caratteri della pagina (ad es. control +, se non hai IE6): se ho capito giusto dovresti ottenere una schifezza.
Se invece dai uno sfondo ad ogni[*], ottieni una cosa che si ripete ad ogni link (e non a distanze che nel tuo browser corrispondono all'altezza della riga, ma che in altri browser possono risultare diverse).