impostazioni css troppo contagiose

**Maxx_ale** · 03-06-2004, 11:48

salve a tutti

Ho preparato una pagina formattata in ogni aspetto tramite un foglio di stile ed ho definito parecchie classi con proprietà diverse.
Tutto funziona bene a parte il fatto che le impostazioni sui collegamenti ipertestuali sono un po sballate.

la pagina è composta da una tabella che contiene grafica testi e menu, che a loro volta sono contenuti in altre tabelle.

non ho definito nessun Elemento A e sono passato direttamente alle classi:

codice:

.TabellaGenerale A:link, A:visited, A:active {valori 1}
.TabellaGenerale A:hover {altri valori 1}

all'interno della tabella è presente un menu contenuto a sua volta in un'altra tabella a cui ho assegnato la classe:

codice:

.Menu A:link, A:visited, A:active {valori 2}
.Menu A:hover {altri valori 2}

a questo punto anche utilizzando altre classi o altri metodi qualunque link io inserisca viene visualizzato con le impostazioni del menu
La cosa mi stranisce molto perchè il programma Top Style dice che è tutto corretto, Dreamweaver me lo visualizza in un modo (sempre errato), ed internet explorer lo visualizza in un'altro modo ancora...

Ho fatto diverse prove sostituendo e spostando ma non sono arrivato a niente direi...
Sapete aiutarmi?

**Sonikag** · 03-06-2004, 12:13

ci puoi far vedere il codice della pagina?

**Maxx_ale** · 03-06-2004, 13:04

questa è la pagina:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
<head>
<title>titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stile.css" rel="stylesheet" type="text/css">
</head>

<body>
<a name="top"></a>
<table align="center" cellpadding="0" cellspacing="0" class="tabella_principale">
  <tr> 
    <td height="177" colspan="3"> 
	  
	  <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td rowspan="2" class="header_0">[img]template/pixel.gif[/img]</td>
          <td colspan="2" class="header_top">[img]template/pixel.gif[/img]</td>
          <td rowspan="2" class="header_3">[img]template/pixel.gif[/img]</td>
        </tr>
        <tr> 
          <td class="header_1">[img]template/pixel.gif[/img]</td>
          <td class="header_2">[img]template/pixel.gif[/img]</td>
        </tr>
      </table>
	  
	  </td>
  </tr>
  <tr> 
    <td height="22" colspan="3" class="storia"> 
      
      XXX &gt; XXX 
      &gt; XXX 
      
    </td>
  </tr>
  <tr> 
    <td height="26" colspan="3"> 
      
      <table align="center" cellpadding="0" cellspacing="0" class="menu_generale">
        <tr> 
          <td width="20%" align="center">Home</td>
          <td width="20%" align="center">Articoli</td>
          <td width="20%" align="center">Internet</td>
          <td width="20%" align="center">Forum</td>
          <td width="20%" align="center">Mail</td>
        </tr>
      </table>
	   
	</td>
  </tr>
  <tr> 
    <td rowspan="2" class="pagina_colonna_sx">[img]template/pixel.gif[/img]</td>
    <td valign="top">

      <table width="730" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td class="articolo_ang_0">[img]template/pixel.gif[/img]</td>
          <td class="articolo_top">[img]template/pixel.gif[/img]</td>
          <td class="articolo_ang_1">[img]template/pixel.gif[/img]</td>
        </tr>
        <tr>
          <td class="articolo_left">[img]template/pixel.gif[/img]</td>
          <td class="articolo_testo"> testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo 

            </td>
          <td class="articolo_right">[img]template/pixel.gif[/img]</td>
        </tr>
        <tr>
          <td class="articolo_ang_3">[img]template/pixel.gif[/img]</td>
          <td class="articolo_bottom">[img]template/pixel.gif[/img]</td>
          <td class="articolo_ang_2">[img]template/pixel.gif[/img]</td>
        </tr>
      </table>
      <div align="right">

        su </div>
      

      <table width="730" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td class="articolo_ang_0">[img]template/pixel.gif[/img]</td>
          <td class="articolo_top">[img]template/pixel.gif[/img]</td>
          <td class="articolo_ang_1">[img]template/pixel.gif[/img]</td>
        </tr>
        <tr>
          <td class="articolo_left">[img]template/pixel.gif[/img]</td>
          <td class="articolo_testo"> testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo testo testo testo 
            testo testo testo</td>
          <td class="articolo_right">[img]template/pixel.gif[/img]</td>
        </tr>
        <tr>
          <td class="articolo_ang_3">[img]template/pixel.gif[/img]</td>
          <td class="articolo_bottom">[img]template/pixel.gif[/img]</td>
          <td class="articolo_ang_2">[img]template/pixel.gif[/img]</td>
        </tr>
      </table> 

    </td>
    <td rowspan="2" class="pagina_colonna_dx">[img]template/pixel.gif[/img]</td>
  </tr>
  
  <tr> 
    <td height="119" align="center">[img]template/footer.gif[/img]</td>
  </tr>
  
  <tr> 
    <td class="pagina_angolo_sx">[img]template/pixel.gif[/img]</td>
    <td class="pagina_bottom">[img]template/pixel.gif[/img]</td>
    <td class="pagina_angolo_dx">[img]template/pixel.gif[/img]</td>
  </tr>
</table>
</body>
</html>

questo è il foglio di stile:

codice:

Body {
	background-color: #362D7A;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;}
	
Table, td, tr {font-family: Tahoma; font-size: 10pt;}


.tabella_principale {
	height: 100%;
	width: 780px;
	background-color: #FFD200;
	border: 0px;}
.tabella_principale A:link, A:visited, A:active {font-weight: bold; text-decoration: none; color: Yellow;}
.tabella_principale A:hover {font-weight: bold; text-decoration: underline; color: Red;}
	
.header_0   {width: 24px;  background-image: url(template/header_0.gif); background-color: #FFD200;}
.header_1   {width: 360px; background-image: url(template/header_1.jpg); background-color: #FFD200;}
.header_2   {width: 370px; background-image: url(template/header_2.jpg); background-color: #FFD200;}
.header_3   {width: 26px;  background-image: url(template/header_3.gif); background-color: #FFD200;}
.header_top {height: 13px;	background-color: #FFD200;}

.storia {color: #362D7A;}
.storia A:link, A:visited, A:active {color: #F0FC00; text-decoration: none;}
.storia A:hover {color: #5557E5; text-decoration: underline;}

.menu_generale {
	height: 26px;
   width: 730px;
	background-image: url(template/barra_menu_centro.gif);
	border: 0px;
	font-weight: 900;
	font-size: 16pt;}
.menu_generale A:link, A:visited, A:active {text-decoration: none; color: #362D7A;}
.menu_generale A:hover {text-decoration: underline; color: #5557E5;}

.articolo_testo  {background-color: #FBF8D1; background-image: url(template/articolo_sezione_centro_home.gif); text-align: justify;}
.articolo_ang_0  {background-color: #FBF8D1; background-image: url(template/articolo_ang_0.gif); width: 4px; height: 4px;}
.articolo_ang_1  {background-color: #FBF8D1; background-image: url(template/articolo_ang_1.gif); width: 4px; height: 4px;}
.articolo_ang_2  {background-color: #FBF8D1; background-image: url(template/articolo_ang_2.gif); width: 4px; height: 4px;}
.articolo_ang_3  {background-color: #FBF8D1; background-image: url(template/articolo_ang_3.gif); width: 4px; height: 4px;}
.articolo_top    {background-color: #FBF8D1; background-image: url(template/articolo_sezione_centro_home.gif); height: 4px;}
.articolo_bottom {background-color: #FBF8D1; background-image: url(template/articolo_sezione_centro_home.gif); height: 4px;}
.articolo_left   {background-color: #FBF8D1; width: 4px;}
.articolo_right  {background-color: #FBF8D1; background-image: url(template/articolo_sezione_destra.gif); width: 4px;}

.pagina_colonna_sx {width: 24px;}
.pagina_colonna_dx {width: 26px;}
.pagina_angolo_sx  {width: 24px; height: 24px; background-image: url(template/tab_sfondo_4.gif);}
.pagina_angolo_dx  {width: 26px; height: 24px; background-image: url(template/tab_sfondo_3.gif);}
.pagina_bottom     {height: 24px; background-image: url(template/tab_sfondo_X.gif);}

**Jerry Masslo** · 03-06-2004, 14:29

non ho guardato il tuo css ma:

.TabellaGenerale A:link, A:visited, A:active {valori 1}

credo che tu intendessi fare

.TabellaGenerale a:link, .TabellaGenerale a:visited, .Tabeccetera

inoltre siccome c'è un ordine per i link che è

link visited hover active se definisci quei tre stati in una riga e poi l'hover in un altra ti sballano perché salta l'ordine, se ti serve differenziare solo l'hover allora conviene fare così:

.TabellaGenerale a {valori che interessano tutti gli stati dei link}

.TabellaGenerale a:hover {specifico per l'hover}

**Maxx_ale** · 04-06-2004, 12:09

vado a provarlo subito!

Discussione: impostazioni css troppo contagiose

Strumenti discussione

Ricerca discussione

Visualizza

impostazioni css troppo contagiose

Permessi di invio