[CSS]Link disattivato in pag di destinazione

scegli un altro forum

Pagine (3): [ 1 2 3 > ]

Indietro Ricarica Avanti

Autore

Discussione

pcf
Utente di HTML.it

Registrato il: Nov 2002

Provenienza:

Messaggi: 499

ICQ:

MSN:

Skype:

[CSS]Link disattivato in pag di destinazione

Cioa ragazzi, eccomi qui a richiedervi il vs preziosissimo aiuto.

Come posso disabilitare un link nella pagina di destinazione conservandone comunque le caratteristiche di formattazione?

Ad esempio, ho una barra di navigazione che riporta il link "Turismo" nella pagina di destinazione turismo.html

Nella pagina di destinazione turismo.html il link "Turismo" dovrebbe cambiare colore di sfondo come avviene normalmente ma non riportare la famosa manina che indica l'esistenza del relativo collegamento.

Questo per non confondere e indicare al visitatore del sito che già si trova nella pagina per cui dalla home ha linkato "Turismo".

Ho provato a lasciare il collegamento <a href="#">Turismo</a> per conservare le proprietà del link ma senza far ritornare al click alla pagina linkata.
Questo comunque confonde l'utente che vede la manina.
Inoltre i Motori di ricerca vedendo un link orfano possono penalizzarmi.

Questo è il codice funzionante al quale vorrei implementare la funzione oggetto di questa discussione:

HTML
codice:

<div id="testata">
<ul>... 
<li><a href="">altri pulsanti</a></li>
<li><a class="menubar" href="turismo.html/"> turismo </a></li>
</ul>
</div>

CSS
codice:

a.menubar:link  {
color: #ffffff; 
background: #FF9109;
 text-decoration: none; 
}

a.menubar:visited  {	
color: #ffffff; 
background: #FF9109;
text-decoration: none; 
}

a.menubar:hover {
color: #FFEAD2; 
background: #E66F0C; 
text-decoration: none; 
}

a.menubar:active { 
color: #7E4317; 
background:#FF9109; 
text-decoration: none;
}

div#testata {
background-color:#FF9109; 
color: #FFFFFF; 
padding-bottom:0; 
font-weight: bold; font-size: 11px; 
line-height: 10px; 
text-transform: uppercase; 
margin-bottom: 10px; 
margin-top: -6px; 
height: 12px; 
text-align: left;
}

div#testata ul {
list-style:none; 
padding:0; 
margin:0;
}

div#testata ul li{
display:inline;
}

div#testata ul li a {
font-weight:bold; 
text-decoration:none; 
font-family:Verdana, Arial, sans-serif; 
font-size:0.8em; 
padding:0 5px;
}

Ipotesi:

CSS
.menubar .no {cosa ci devo mettere ????
}

HTML
<div id="testata">
<ul>...
<li><a href="">altri pulsanti</a></li>
<li><a class="no" href="turismo.html/"> turismo </a></li>
</ul>
</div>

Spero possiate aiutarmi, grazie

__________________

Ultima modifica ad opera dell'utente pcf il 23-07-2005 alle 06:59

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 06:51

Clicca qui per inviare all'utente pcf un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente pcf

Aggiungi l'utente pcf alla tua lista degli utenti amici

awd
Utente di HTML.it

Registrato il: Mar 2003

Provenienza: Tra Piemonte e Lombardia

Messaggi: 4550

ICQ :

MSN :

Skype :

se ne è parlato tante volte e trovi un sacco di articoli!

fondamentalmente devi eliminare il tag A e assegnare una classe al LI con gli stili che vuoi.
però per il nome della classe "no" non mi sembra una gran scelta, usa qualcosa di descrittivo come "corrente" o "attivo"...

La cosa va fatta a mano in ogni paginetta, a meno che non implementi un sistema dinamico (lato server) per farlo automaticamente

__________________
Io | solo io | sempre io | nient'altro che io

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 09:05

Clicca qui per inviare all'utente awd un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente awd

Aggiungi l'utente awd alla tua lista degli utenti amici

pcf
Utente di HTML.it

Registrato il: Nov 2002

Provenienza:

Messaggi: 499

ICQ :

MSN :

Skype :

Grazie AWD... che piacere risentirti..

Citazione:

fondamentalmente devi eliminare il tag A e assegnare una classe al LI con gli stili che vuoi.

Si ma non riesco a capire come posso far visualizzare e permanere quel cambiamento di sfondo assieme al cambiamento del colore del carattere (essenziale nell'effetto estetico dinamico ) senza dover applicare l'"hover" tipico del tag <a hef=""></a>, dovendo infatti eliminare quest'ultimo.

Magari, se puoi farmi qualche esempio pratico ..

Citazione:

se ne è parlato tante volte e trovi un sacco di articoli!

Ho provato a cercare nel motore interno, ma mi ha dato un'infinità di articoli, quale potrebbe essere la parola chiave per avere dei risultati più ristretti.
O se hai già qualcosa a portata di mano ...

Dai AWD & C., che quando finisco, avrete i miei ringranziamenti ufficiali tra contributi e credits..

Ogni promessa è debito

__________________

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 09:17

awd
Utente di HTML.it

Registrato il: Mar 2003

Provenienza: Tra Piemonte e Lombardia

Messaggi: 4550

ICQ :

MSN :

Skype :

Citazione:

Originariamente inviato da pcf
Si ma non riesco a capire come posso far visualizzare e permanere quel cambiamento di sfondo assieme al cambiamento del colore del carattere (essenziale nell'effetto estetico dinamico ) senza dover applicare l'"hover" tipico del tag <a hef=""></a>, dovendo infatti eliminare quest'ultimo.

:master:
basta che alla classe ci assegni lo stesso stile dell'hover

__________________
Io | solo io | sempre io | nient'altro che io

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 10:03

andrea.paiola
Utente di HTML.it

Registrato il: Nov 2004

Provenienza: Torino - Milano

Messaggi: 8680

ICQ :

MSN :

Skype :

se ti è di ispirazione...
http://www.nexus6design.com/provaxmlmenu/sez1.php

__________________
http://it.linkedin.com/in/andreapaiola
-------
Quando mancano le ideologie rimangono solo le idiozie.
-------
"Physics is a bitch" William Bell

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 10:16

Clicca qui per inviare all'utente andrea.paiola un messaggio privato

Visita l'homepage dell'utente andrea.paiola

Visualizza ulteriori messaggi scritti dall'utente andrea.paiola

Aggiungi l'utente andrea.paiola alla tua lista degli utenti amici

awd
Utente di HTML.it

Registrato il: Mar 2003

Provenienza: Tra Piemonte e Lombardia

Messaggi: 4550

ICQ :

MSN :

Skype :

Citazione:

Originariamente inviato da andrea.paiola
se ti è di ispirazione...
http://www.nexus6design.com/provaxmlmenu/sez1.php

ancora sto coso?

ma se non gli dai il sorgente php che se ne fa?
inoltre se andassi a capo nei tag di menu sarebbe molto meglio

__________________
Io | solo io | sempre io | nient'altro che io

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 10:20

pcf
Utente di HTML.it

Registrato il: Nov 2002

Provenienza:

Messaggi: 499

ICQ :

MSN :

Skype :

Era cos' facile :master:
Pensavo l'hover fosse attribuibile solo al tag <a>

Quindi applicando a

div#testata ul li
che chiamerò

div#testatanolink ul li
per differenziarlo dal primo e implentando il codice postato in primo item che è dell'hover (vedi neretto) con

div#testata ul li{
display:inline;
color: #FFEAD2;
background: #E66F0C;
text-decoration: none;
}

tu dici che passando con il mouse sopra, non apparirà la manina che indica il collegamento ma cambierà lo stesso sfondo e colore del testo ? :master:

__________________

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 10:22

pcf
Utente di HTML.it

Registrato il: Nov 2002

Provenienza:

Messaggi: 499

ICQ :

MSN :

Skype :

Citazione:

se ti è di ispirazione...
http://www.nexus6design.com/provaxmlmenu/sez1.php

Grazie andrea.paiola ma nell'esempio che mi hai proposto la manina appare sempre

__________________

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 10:24

awd
Utente di HTML.it

Registrato il: Mar 2003

Provenienza: Tra Piemonte e Lombardia

Messaggi: 4550

ICQ :

MSN :

Skype :

tagliamo la testa a toro (poraccio) devi fare così!

codice:

<ul>
<li><a href="pagina1.php" accesskey="1">pagina1</a></li>
<li class="corrente">pagina2</li>
<li><a href="pagina3.php" accesskey="3">pagina3</a></li>
<li><a href="pagina4.php" accesskey="4">pagina4</a></li>
<li><a href="pagina5.php" accesskey="5">pagina5</a></li>
<li><a href="pagina6.php" accesskey="6">pagina6</a></li>
</ul>

__________________
Io | solo io | sempre io | nient'altro che io

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 10:34

pcf
Utente di HTML.it

Registrato il: Nov 2002

Provenienza:

Messaggi: 499

ICQ :

MSN :

Skype :

Ho provato ma la pagina2 rimane di colore fisso immobile al passaggio del mouse

HTML

codice:

<div id="testata">
<ul>
<li><a class="menubar" href="pagina1.html" accesskey="1">pagina1</a></li>
<li class="corrente">pagina2</li>
<li><a class="menubar" href="pagina3.html" accesskey="3">pagina3</a></li>
<li><a class="menubar" href="pagina4.html" accesskey="4">pagina4</a></li>
<li><a class="menubar" href="pagina5.html" accesskey="5">pagina5</a></li>
<li><a class="menubar" href="pagina6.html" accesskey="6">pagina6</a></li>
</ul>
</div>

CSS

codice:

.corrente {
color: #FFEAD2; 
background: #E66F0C; 
text-decoration: none;
}

a.menubar:link  {
color: #ffffff; 
background: #FF9109;
 text-decoration: none; 
}

a.menubar:visited  {	
color: #ffffff; 
background: #FF9109;
text-decoration: none; 
}

a.menubar:hover {
color: #FFEAD2; 
background: #E66F0C; 
text-decoration: none; 
}

a.menubar:active { 
color: #7E4317; 
background:#FF9109; 
text-decoration: none;
}

div#testata {
background-color:#FF9109; 
color: #FFFFFF; 
padding-bottom:0; 
font-weight: bold; font-size: 11px; 
line-height: 10px; 
text-transform: uppercase; 
margin-bottom: 10px; 
margin-top: -6px; 
height: 12px; 
text-align: left;
}

div#testata ul {
list-style:none; 
padding:0; 
margin:0;
}

div#testata ul li{
display:inline;
}

div#testata ul li a {
font-weight:bold; 
text-decoration:none; 
font-family:Verdana, Arial, sans-serif; 
font-size:0.8em; 
padding:0 5px;
}

__________________

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 11:10

pcf
Utente di HTML.it

Registrato il: Nov 2002

Provenienza:

Messaggi: 499

ICQ :

MSN :

Skype :

Ragazzi, lo so vi sto chiedendo troppo e spero di essere stato chiaro nell'esposizione, ma se non riesco a risolvere questa questione, rimarrò bloccato perchè se non faccio in questo modello la variazione, dovrò poi riportare la modifica nelle altre 30 pagine derivate ..:oVVoVe:

Grazie come sempre .)

__________________

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 13:04

haZe
Utente di HTML.it

Registrato il: Jan 2005

Provenienza: L.A.

Messaggi: 416

ICQ :

MSN :

Skype :

Edoppa, che combini?

Devi metterci l'hover:

codice:

.corrente:hover {
color: #FFEAD2; 
background: #E66F0C; 
text-decoration: none;
}

Tieni però conto che non funzionerà su IE.

Se proprio ci tieni ai preistorici utenti che usano IE, potresti provare a mettere <a>Testo attivo</a>. Però non so nè se ti risolve il problema della manina, nè quello della validazione.

P.s. il cursore si può cambiare anche via JS, se ti serve dimmi e cerco come

__________________
my blog

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 14:20

Clicca qui per inviare all'utente haZe un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente haZe

Aggiungi l'utente haZe alla tua lista degli utenti amici

pcf
Utente di HTML.it

Registrato il: Nov 2002

Provenienza:

Messaggi: 499

ICQ :

MSN :

Skype :

Ma guarda, l'hover funzia anche qui..... :oVVoVe:
Ti ringranzio per il tuo suggerimento ma gli utenti di IE anche se preistorici sono ancora la maggior parte. :rollo:

Il tag <a> mi costringe a metterci un link che nella pagina di riferimento non ci deve essere essendo quella dove si trova l'utente.

Chissà se esiste una soluzione

Citazione:

il cursore si può cambiare anche via JS, se ti serve dimmi e cerco come

Grazie gentilissimo.....

__________________

Segnala ad un moderatore | IP: Collegato | Permalink

23-07-2005 15:22