Aiutamici Forum
Benvenuto Ospite Cerca | Topic Attivi | Utenti | | Log In | Registra

Applicare stile CSS solo ad una parte di codice Opzioni
simo95
Inviato: Friday, July 02, 2010 1:37:05 PM

Rank: AiutAmico

Iscritto dal : 12/4/2008
Posts: 2,008
Ciao a tutti!

Come da titolo, vorrei applicare uno style css solo ad una specifica parte di codice, ma (sicuramente sbaglio qualcosa) l'effetto viene applicato a tutto il documento.

Vorrei, tramite il codice:

Code:
a:link {
  text-decoration: none;
  color: #0000ee;
}
a:visited {
  text-decoration: none;
  color: #0000ee;
}
a:hover {
  background: #ff0000 none repeat scroll 0%;
  color: #ffffff;
}


decorare i link di un menù:



L'effetto riesce, spostando il cursore sopra il link viene evidenziato secondo le regole. Il problema è che l'effetto viene applicato anche a tutti gli altri link della pagina, mentre io vorrei applicarlo solo alle voci del menù (e non anche alle linguette, per esempio)

La pagina è questa: http://www.simo95tinga.altervista.org/download.html

Spero risuciate ad aiutarmi.

Grazie in anticipo!

Ciao Drool
Sponsor
Inviato: Friday, July 02, 2010 1:37:05 PM

 
ecofive
Inviato: Friday, July 02, 2010 5:39:30 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Simo, sai che il CSS lo mastico poco, ma vorrei dirti questo: perché non ti fai due classi diverse, da applicare alle due specifiche parti di codice? Lo script che hai messo per forza si riferisce a tutti i link.

Ciao.
simo95
Inviato: Friday, July 02, 2010 5:48:08 PM

Rank: AiutAmico

Iscritto dal : 12/4/2008
Posts: 2,008
Hai ragione.

Ora provo!

Grazie! Drool
simo95
Inviato: Friday, July 02, 2010 6:27:27 PM

Rank: AiutAmico

Iscritto dal : 12/4/2008
Posts: 2,008
Problema: come faccio ad inserire una pseudo classe (a:link) in una classe?

STOP: Forse ho risolto.

Come non detto: Non sono riuscito.

Mi sono attenuto a quanto riportato qui:

Commenta:
2. :link e :visited

I pseudo-classi :link e :visited definiscono lo stile css dei links prima e dopo essere stati visitati

Esempio regola css per un link, elemento a di classe ‘mio_link’ con :link e :visited:

a.mioLink:link{
color: red;
}
a.mioLink:visited{
color: green;
}

Esempio HTML:

<a class=”mioLink” href=”#nogo”>Sono un link di classe ‘mioLink” di colore rosso prima di essere vistato, di colore verde dopo essere stato visitato</a>


Ma non funziona. Posto il sorgente:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>








 
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>rockNetman's WebSite</title>
 

 
 
  <link href="favicon.ico" rel="shortcut icon">

 
  <style type="text/css">
body{font: 76% arial,sans-serif; font-weight: bold;}
div#navigation{margin-left: auto; margin-right: auto; width: 765px;border-bottom: 2px solid #B9998C;
background-color: #fff}
div#navigation{width: 765px;border-bottom: 2px solid #B9998C;
background-color: #fff}
div#navigation ul{list-style-type: none;margin: 0;padding: 0}
div#navigation li{float: left;margin: 0;padding:0;
background: url("immagini/sfondohover.gif") no-repeat top left}
div#navigation a{display: block;width: 153px;
line-height: 30px;text-decoration: none;
background: url("immagini/sfondonormale.gif") no-repeat top left;
color: #666;text-align: center}
div#navigation a:hover{background-image: none;color: #503325}
div#navigation li#activelink a,div#navigation li#activelink a:hover{
background: url("immagini/sfondoattivo.gif") no-repeat top left;color: #FFFFFF}</style>
  <style type="text/css">
.menutitle {
  border: 1px solid #009900;
  padding: 2px;
  color: #000000;
  text-align: center;
  -moz-border-radius-topright: 5px;
  cursor: pointer;
  width: 145px;
  margin-bottom: 5px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomright: 5px;
  background-color: #33ccff;
  font-weight: bold;
}
.submenu {
  margin-bottom: 0.5em;
  line-height: 8pt;
}
a.menulink:link {
  text-decoration: none;
  color: #0000ee;
}
a.menulink:visited {
  text-decoration: none;
  color: #0000ee;
}
a.menulink:hover {
  background: #ff0000 none repeat scroll 0%;
  color: #ffffff;
}
</style>
  <script type="text/javascript">
<!--
/***********************************************
* Modificato ed adattato alle specifiche CSS3 by rockNetman http://www.simo95tinga.altervista.org/
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
* Prelevato ed illustrtato su http://www.web-link.it
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('<\/style>\n')
}

function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
        if(el.style.display != "block"){ //DynamicDrive.com change
            for (var i=0; i<ar.length; i++){
                if (ar[i].className=="submenu") //DynamicDrive.com change
                ar[i].style.display = "none";
            }
            el.style.display = "block";
        }else{
            el.style.display = "none";
        }
    }
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
// end  -->
  </script></head><body style="background-image: url(immagini/imgsfondo.jpg);">
<div id="navigation">
<ul>
  <li><a href="index.html">Home Page</a></li>
  <li id="activelink"><a href="download.html">Download</a></li>
  <li><a href="http://pczoneit.forumfree.net/">Forum</a></li>
  <li><a href="guide.html">Guide</a></li>
  <li><a href="blog.html">Blog</a></li>
</ul>
</div>

<table style="width: 765px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">

  <tbody>
    <tr>
      <td colspan="3" rowspan="1"><br>
      </td>
    </tr>
    <tr>
      <td colspan="3" rowspan="1"> <br>
      </td>
    </tr>
    <tr>
      <td style="height: 25px; width: 25px;" background="immagini/angsxsopr.png"><br>
      </td>
      <td background="immagini/traspsopr.png"><br>
      </td>
      <td style="height: 25px; width: 25px;" background="immagini/angdxsopr.png"><br>
      </td>
    </tr>
    <tr>
      <td style="width: 25px; height: 850px;" background="immagini/traspsx.png"><br>
      </td>
      <td style="width: 715px; text-align: left; vertical-align: top;" background="immagini/traspmod.png">
      <table style="text-align: left; width: 715px;" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td style="vertical-align: top; height: 25px; width: 25px;" background="immagini/angsxsopr2.gif"><br>
            </td>
            <td style="vertical-align: bottom; text-align: right; width: 145px;" background="immagini/sopr.gif"><img style="width: 67px; height: 15px;" alt="" src="immagini/strum.gif"><br>
            </td>
            <td style="vertical-align: top; height: 25px; width: 25px;" background="immagini/angdxsopr2.gif"><br>
            </td><td style="vertical-align: top; width: 25px;"><br>
            </td>
            <td style="vertical-align: top; height: 25px; width: 25px;" background="immagini/angsxsopr2.gif"><br>
            </td>
            <td style="vertical-align: bottom; height: 25px; text-align: right;" background="immagini/sopr.gif"><img style="width: 67px; height: 15px;" alt="" src="immagini/strum.gif"><br>
            </td>
            <td style="vertical-align: top; height: 25px; width: 25px;" background="immagini/angdxsopr2.gif"><br>
            </td>

          </tr>
          <tr>
            <td style="vertical-align: top; height: 500px;" background="immagini/sx.gif"><br>
            </td>
            <td style="vertical-align: top;"><br>
            <div id="masterdiv">
    <div class="menutitle" onclick="SwitchMenu('sub1')"><a href="multimedia.html" target="_top">Audio e Video</a><br>
</div>
    <span class="submenu" id="sub1">
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Codec</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Editor</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Player</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Radio / TV</a>
    </span>

    <div class="menutitle" onclick="SwitchMenu('sub2')"><a href="internet.html" target="_top">Internet</a><br>
</div>
    <span class="submenu" id="sub2">
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Browser</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Download manager</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Peer To Peer</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Varie</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">VoIP</a>
    </span>

    <div class="menutitle" onclick="SwitchMenu('sub3')"><a href="linux.html" target="_top">Linux</a></div>
    <span class="submenu" id="sub3">
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Distro</a>
    </span>
    
    <div class="menutitle" onclick="SwitchMenu('sub4')"><a href="sicurezza.html" target="_top">Sicurezza</a></div>
    <span class="submenu" id="sub4">
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">AntiSpyware/Malware</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Antivirus</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Firewall</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Tools pulizia</a>
    </span>

    <div class="menutitle" onclick="SwitchMenu('sub5')"><a href="utility.html" target="_top">Utilità</a></div>
    <span class="submenu" id="sub5">
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Archiviazione</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Backup SO/Dati</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Partition Editor</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Pulizia/Manutenzione</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Recovery Tools</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Tools diagnostica</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Virtualizzazione</a>
    </span>

    <div class="menutitle" onclick="SwitchMenu('sub6')"><a href="webmaster.html" target="_top">Webmaster</a></div>
    <span class="submenu" id="sub6">
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Editor HTML/CSS</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">FTP</a><br><br>
        - <a class=”menulink” href="http://www.simo95tinga.altervista.org/">Web Design</a><br><br>
    </span>
</div>
<br>
            </td>
            <td style="vertical-align: top;" background="immagini/dx.gif"><br>
            </td><td style="vertical-align: top;"><br>
            </td>
            <td style="vertical-align: top;" background="immagini/sx.gif"><br>
            </td>
            <td style="vertical-align: middle; text-align: center;"><br>
            <big style="font-weight: bold; text-decoration: underline;">Effettuare una selezione dalle categorie del menù verticale!</big><br>
            </td>
            <td style="vertical-align: top;" background="immagini/dx.gif"><br>
            </td>

          </tr>
          <tr>
            <td style="vertical-align: top; height: 25px; width: 25px;" background="immagini/angsxsott2.gif"><br>
            </td>
            <td style="vertical-align: top;" background="immagini/sott.gif"><br>
            </td>
            <td style="vertical-align: top; height: 25px; width: 25px;" background="immagini/angdxsott2.gif"><br>
            </td><td style="vertical-align: top;"><br>
            </td>
            <td style="vertical-align: top;" background="immagini/angsxsott2.gif"><br>
            </td>
            <td style="vertical-align: top;" background="immagini/sott.gif"><br>
            </td>
            <td style="vertical-align: top;" background="immagini/angdxsott2.gif"><br>
            </td>

          </tr>
        </tbody>
      </table>
      </td>
      <td style="width: 25px; height: 850px;" background="immagini/traspdx.png"><br>
      </td>
    </tr>
    <tr>
      <td style="height: 25px; width: 25px;" background="immagini/angsxsott.png"><br>
      </td>
      <td background="immagini/traspsott.png"><br>
      </td>
      <td style="height: 25px; width: 25px;" background="immagini/angdxsott.png"><br>
      </td>
    </tr>
  </tbody>
</table>

<br>

<br>

</body></html>
simo95
Inviato: Friday, July 02, 2010 11:26:58 PM

Rank: AiutAmico

Iscritto dal : 12/4/2008
Posts: 2,008
Se può essere utile, il menù l'ho prelevato qui:

http://www.weblink.altervista.org/scripting/M3_Switch_menu.php


E l'ho leggermente modificato, inserendo qualche specifica CSS3.

Edit: forse ho capito perchè non funziona. Stavo associando due classi differenti allo stesso elemento (quella del menù e quella da me creata). Domani smanetto un po' sul problema e vi faccio sapere.

Grazie

Ciao
ilrestodiniente
Inviato: Saturday, July 03, 2010 8:48:44 AM

Rank: AiutAmico

Iscritto dal : 4/13/2004
Posts: 1,376
Ho il vago sospetto che la soluzione sia una cavolata:
...
- <a class=menulink href="http://www.simo95tinga.altervista.org/">Codec</a><br><br>
- <a class=menulinkhref="http://www.simo95tinga.altervista.org/">Editor</a><br><br>
...


sostituisci le virgolette che ti ho evidenziato in rosso con le virgolette in alto sopra al numero 2ottenendo questo che come vedi è diverso:

...
- <a class="menulink" href="http://www.simo95tinga.altervista.org/">Codec</a><br><br>
- <a class="menulink" href="http://www.simo95tinga.altervista.org/">Editor</a><br><br>
...

E' molto probabile che tu abbia copiato il listato da internet ma il web editor ti legga quelle virgolette in modo sbagliato e non ti applichi la classe. Il sospetto mi è venuto analizzando il listato con kompozer che mi ha aggiunto le virgolette giuste (quelle che ti ho detto sopra il 2). Analizzato con dream non me le ha aggiunte ma le visualizzava in modo diverso. Sostituite l'effetto desiderato funziona.
simo95
Inviato: Saturday, July 03, 2010 9:47:44 AM

Rank: AiutAmico

Iscritto dal : 12/4/2008
Posts: 2,008
Si! Grande Silvio! Applause Applause

Non ci sarei mai arrivato. Non si notava neanche!

Grazie mille ancora! (ci sentiremo tra poco...)

Ciao Drool
ilrestodiniente
Inviato: Saturday, July 03, 2010 11:16:20 AM

Rank: AiutAmico

Iscritto dal : 4/13/2004
Posts: 1,376
Sono gaio per la tua gaiezza
ecofive
Inviato: Saturday, July 03, 2010 11:17:56 AM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Lieto di vederti in questa sezione. Se non ci fossi tu a dare una mano a chi se lo merita (Simo) ...

Ciao.
ilrestodiniente
Inviato: Saturday, July 03, 2010 11:24:47 AM

Rank: AiutAmico

Iscritto dal : 4/13/2004
Posts: 1,376
Ciao eco sono in Italia a fare il pieno di calore e sono felice di rendermi utile per quel che posso e senza scrivere trattati...
Un caro saluto a te e a tutti i salutabili del forum
Silvio
simo95
Inviato: Saturday, July 03, 2010 11:32:51 AM

Rank: AiutAmico

Iscritto dal : 12/4/2008
Posts: 2,008
Un saluto anche da parte mia e grazie a tutti e due.

Adesso sto articolando un secondo quesito (un po' complesso, ha a che fare con il campo display:none).

Grazie ancora

Ciao Drool
smanettonepc
Inviato: Saturday, July 24, 2010 3:46:46 PM

Rank: AiutAmico

Iscritto dal : 6/27/2010
Posts: 152
Scusate ho sbagliato a loggarmi, ero entrato con l'account di smanettonepc.

By simo
simo95
Inviato: Saturday, July 24, 2010 3:47:29 PM

Rank: AiutAmico

Iscritto dal : 12/4/2008
Posts: 2,008
Eccomi qui di nuovo come promesso.

Innanzitutto vi riporto alla pagina cui devo applicare l'effetto: http://www.simo95tinga.altervista.org/download/internet.html

Quello che intendo fare è (forse è possibile farlo con un evento JavaScript e la proprietà display:none ) è di visualizzare solo determinate celle della tabella (quella relativa ai software internet ) in base alla categoria scelta dal menù verticale sulla sinistra.

In parole povere, se scelgo la categoria Download Manager , vorrei che apparisse solo tale sezione della tabella e che le altre sezioni (quelle relative Browser, Peer To Peer, Varie, VoIP).

E' possibile farlo? Non ho problemi a riprogettare completamente la pagina.

Grazie mille come sempre.

Ciao! Drool
ecofive
Inviato: Monday, July 26, 2010 12:44:21 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Simo, vorrei poterti rispondere, ma stai ponendo quesiti troppo difficili per me.
Ho deciso comunque di non postare più in questa sezione: ubi maior minor cessat .

Ciao.
dead
Inviato: Monday, July 26, 2010 1:44:57 PM

Rank: AiutAmico

Iscritto dal : 9/20/2004
Posts: 1,597
O crei la tua tabella in JS come dici tu, o lo puoi fare lato server in php.
La soluzione in php è più efficace, perchè chi non avesse il JS attivo vedrebbe comunque tutte le tabelle


Sono cosi avanti che quando guardo indietro vedo il futuro.
simo95
Inviato: Thursday, July 29, 2010 9:25:47 AM

Rank: AiutAmico

Iscritto dal : 12/4/2008
Posts: 2,008
ecofive ha scritto:
Simo, vorrei poterti rispondere, ma stai ponendo quesiti troppo difficili per me.
Ho deciso comunque di non postare più in questa sezione: ubi maior minor cessat .

Ciao.


Grazie eco, in effetti il quesito è complicato!

dead ha scritto:
O crei la tua tabella in JS come dici tu, o lo puoi fare lato server in php.
La soluzione in php è più efficace, perchè chi non avesse il JS attivo vedrebbe comunque tutte le tabelle


Purtroppo non so programmare in php. Anche se ne avessi le conoscenze, dovrei trasferire il sito su netsons (cosa che prima o poi farò) perchè l'account free di altervista offre un DB MySQL con query limitatissime (in termini di numeri di Query all'ora). Per ora proverò con JavaScript: C'è qualche guida che mi consigli in particolare? Possono andare quelle di WebLink o di html.it?

Grazie Drool
ilrestodiniente
Inviato: Thursday, July 29, 2010 9:54:45 AM

Rank: AiutAmico

Iscritto dal : 4/13/2004
Posts: 1,376
Purtroppo non posso aiutarti neppure io dal momento che il php lo uso di "striscio" e già compilato con joomla. Quello che posso dirti è che ho abbandonato tempo fa altervista proprio per il problema del database che, oltre ad essere limitatissimo, è di farraginosa gestione, infatti, se occorre, non si può cancellare e rifare ex novo con un semplice clic ma bisogna eliminare tutte le tabelle una per una e ci metti un paio d'ore. Trovo la cosa assurda. Lavoro da quasi un anno con netsons e mi trovo benissimo. E' veloce, economico e di facilissima gestione.
Un caro saluto
Silvio
simo95
Inviato: Thursday, July 29, 2010 10:06:21 AM

Rank: AiutAmico

Iscritto dal : 12/4/2008
Posts: 2,008
ilrestodiniente ha scritto:
Purtroppo non posso aiutarti neppure io dal momento che il php lo uso di "striscio" e già compilato con joomla. Quello che posso dirti è che ho abbandonato tempo fa altervista proprio per il problema del database che, oltre ad essere limitatissimo, è di farraginosa gestione, infatti, se occorre, non si può cancellare e rifare ex novo con un semplice clic ma bisogna eliminare tutte le tabelle una per una e ci metti un paio d'ore. Trovo la cosa assurda. Lavoro da quasi un anno con netsons e mi trovo benissimo. E' veloce, economico e di facilissima gestione.
Un caro saluto
Silvio


Già. Io ho già il blog Wordpress su hosting netsons gratutito, e tramite cpanel si può fare di tutto senza sprechi di click.

Comunque ho trovato ciò che fa al caso mio:

http://javascript.html.it/articoli/leggi/398/javascript-e-dom-sulle-tabelle/

Vi ringrazio ancora! Applause

Ciao Drool
Utenti presenti in questo topic
Guest


Salta al Forum
Aggiunta nuovi Topic disabilitata in questo forum.
Risposte disabilitate in questo forum.
Eliminazione tuoi Post disabilitata in questo forum.
Modifica dei tuoi post disabilitata in questo forum.
Creazione Sondaggi disabilitata in questo forum.
Voto ai sondaggi disabilitato in questo forum.

Main Forum RSS : RSS

Aiutamici Theme
Powered by Yet Another Forum.net versione 1.9.1.8 (NET v2.0) - 3/29/2008
Copyright © 2003-2008 Yet Another Forum.net. All rights reserved.