Barra nav con CSS e XHTML

[floyd46]

Ciao a tutti,
avrei bisogno di un suggerimento per quanto riguarda codice CSS; mi spiego:
vorrei realizzare una barra di nav, con solo codice CSS e XHTML;
invece di usare il JavaScript (effetto roll-over), ho preparato delle gif (on/off).

Nel file ".css" ho preparato ogni #id; nella pagina html ho richiamato tali identificatori;
il codice che io ho inserito in tale pagina è + o meno così:

<div id="barra-nav">

<div id="nav"></div>
<div id="nav"></div>
<div id="nav"></div>
..................................
</div>

Fin qui tutto ok, nel senso che ho ottenuto la mia barra di navigazione.
Ho avuto 1 pò di problemi nel momento in cui dovevo linkare queste "gif";
si fosse trattato di solo testo, avrei fatto in questo modo:

<div id="nav">Link 1</div>

ma, siccome ho usato delle "gif" e avendo dichiarato nel foglio esterno ogni id,
in questo caso, come potrei fare con il codice qui in basso?

<div id="nav"></div>

se scrivo:

<div id="nav"></div>
non mi appare + la gif nella pagina html.

Chi mi darebbe un suggerimento su come fare?

Grazie a tutti e spero di essermi spiegato nell'esporre la domanda.

Saluti

-Floyd-

[Shores]

Non sei stato per nulla chiaro, ma prima di tutto c'è un grave errore: gli attributi ID DEVONO NECESSARIAMENTE essere tutti diversi, ovvero all'interno di un pagina XHTML non possono esserci due tag con lo stesso ID.

Detto questo, prova a rispiegarci più chiaramente il problema...

[antos]

allora partendo dal fatto che non puoi nemmeno annidare i tag
<a><div></div></a> perchè a +è un elemento in line div blocco...e l'annidamento è al contrario
per quello che vuoi fare be potresti provare a fare così:
ti crei un'immagine trasparente (anche 1px va bene)
nell codice scrivi
<div id="nav-bar">
[img]trasparente.gif[/img]
[img]trasparente.gif[/img]
....
</div>
nel css vai a scrivere una cosa del genere
a.nav{
background-image:url(off.gif);
}
a.nav:hover{background-image:url(on.gif);
}
a.menu > img {width:xxpx;height:xxpx;}

come regola dovrebbe andare bene

[floyd46]

Ciao Shores
grazie per avermi risposto;
scusa x la poca kiarezza e in ogni caso ho commesso 1 errore io a scrivere il 3d;

ovviamente tutti gli "id" sono diversi;

Allora......

nel momento in cui vado a comporre la mia barra di nav(orizzontale), ovviamente devo scrivere:

<div id="link"></div>

<div id="link-2"></div>
...................

invece di usare il testo come link, ho preparato delle ".gif";
(on/off) x effetto roll-over;

il mio problema è linkare ogni gif, quindi ogni "id" ad una pagina diversa.

l'dentificatore <div id="link"></div> ecc..
è stato preparato nel foglio ".css";

ho provato anche a scrivere:

< a href="......"> <div id="link"></div> </a>

ma non va bene; non funziona.

Spero di essere stato + kiaro adesso.

Grazie

[floyd46]

ciao antos,

grazie anche a te per avermi scritto.

faccio sapere dopo aver messo in pratica lo script.

-Floyd-

[Shores]

Allora, stante che non sono daccordo con quanto dice antos quando dice che non puoi annidare un div all'interno di un A solo perchè A è inline e DIV è block (prima di tutto perchè basta rendere anche A block e in secondo luogo perchè se ciò fosse vero non si potrebbe nemmeno annidare IMG, che notoriamente è block, cosa che è chiaramente falsa) il resto del suo consiglio è però ottimo:

<div><span>Primo link<span></div>

nel css:

a.nav div{background-image:url(off.gif);width:xxpx;height:xxpx;}
a.nav div span {display:none;}
a.nav:hover div{background-image:url(on.gif);}

Che fa si che il testo inserito come link sparisca, pur rimanendo visibile l'immagine di sfondo e l'effetto rollover, con l'innegabile vantaggio che chi vede la pagina senza CSS ha un normalissimo link testuale perfettamente navigabile.

Ciao!

[floyd46]

ciao Shores


grazie tante!!

alla prox.

-Floyd-

[antos]

Originariamente inviato da Shores
Allora, stante che non sono daccordo con quanto dice antos quando dice che non puoi annidare un div all'interno di un A solo perchè A è inline e DIV è block(prima di tutto perchè basta rendere anche A block e in secondo luogo perchè se ciò fosse vero non si potrebbe nemmeno annidare IMG, che notoriamente è block, cosa che è chiaramente falsa)

se visualizza <a> come block che senso ha annidargli un <div> all'interno? se la barra di navigazione si estende in orizzontale di deve anche provvedere al riallineamnto dei link che altrimenti andrebbero a capo

il mio consiglio è buono il tuo ancora meglio(sopratutto in accessibilità) e può esere ulteriormente affinato:
per nascondere span gli conviene usare visibility:hidden;
in questo modo può scrivere direttamente e semplicemente
<span>testo link</span>

a.nav {background-image:url(off.gif);width:xxpx;height:xxpx;}
a.nav:hover {background-image:url(on.gif);}
a.nav span {visibility:hidden;}

[Shores]

Ok, togliere la div intermedia mi piace, ma è sbagliato usare visibility:hidden; per nascondere la span, dato che, a meno di non avere impostato anche overflow:hidden;, usare il visibility;hidden; implica che la dimensione dello A venga dilatata se il testo è più lungo, e non credo che questo sia ciò che si voleva:

<span>testo link</span>

a.nav {background-image:url(off.gif);display:block;width:xxpx;height :xxpx;}
a.nav:hover {background-image:url(on.gif);}
a.nav span {display:none;}

Ciao!

[antos]

guarda che io ho usato visibility:hidden; perchè nel tag a NON ho usato display:block; per ottenere l'effetto preciso il codice esatto dovrebbe essere:
<span>testo link</span>

a.nav {background-image:url(off.gif);background-repeat:no-repeat;}
a.nav:hover {background-image:url(on.gif);}
a.nav span {visibility:hidden;margin-left:4px;}

usando la mia soluzione risulta + facile realizzare una barra di navigazione orizzontale mentre con la tua risulta + facile farla in verticale