Pagina 1 di 4 1 2 3 ... ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 32

Discussione: [CSS]Link disattivato in pag di destinazione

  1. #1

    [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 Turismo 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>... [*]altri pulsanti[*]turismo[/list]
    </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>... [*]altri pulsanti[*]turismo[/list]
    </div>

    Spero possiate aiutarmi, grazie

  2. #2
    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

  3. #3
    Grazie AWD... che piacere risentirti..
    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 ..
    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

  4. #4
    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

  5. #5

  6. #6
    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

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

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

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

    codice:
    <ul>[*]pagina1
    <li class="corrente">pagina2[*]pagina3[*]pagina4[*]pagina5[*]pagina6[/list]

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

    HTML

    codice:
    <div id="testata">
    <ul>[*]pagina1
    <li class="corrente">pagina2[*]pagina3[*]pagina4[*]pagina5[*]pagina6[/list]
    </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;
    }

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.