tag <a> con 2 stili diversi

**bellofresco** · 14-10-2010, 14:42

Ciao, avrei bisogno di un aiuto...

il problema è questo: ho 2 sezioni di testo che devono avere 2 stili diversi, però entrambi devono appartenere allo stesso tag <a>, ovvero non devono generare 2 link alla stessa pagina, ma uno solo.
Prima ho fatto questo:

<a href="miapagina.html">
<p class="class1">Testo stile1 </p>
<p class="class2">Testo stile2 </p>
</a>

Il codice funziona correttamente, ma se cerco di validarlo viene riscontarto un errore, che ho poi capito essere dovuto al fatto che un tag <a> non può contenere tag tipo

o <div>, ecc..., ma la sintassi corretta è l'opposto, ovvero i tag

o <div>, ecc.. devono contenere il tag <a>.

Ora quindi il mio codice diventerebbe:

<p class="class1">
Testo stile1
</p>
<p class="class2">
Testo stile2
</p>

ma ovviamente questo produce 2 link, mentre io ho necessità di produrre 1 solo link e di avere 2 paragrafi distinti o 2 blocchi di testo distinti (il primo ha un padding e stile diverso dal secondo).

Quindi presumo che la soluzione sarebbe riuscire a indicare all'interno del tag <a> un cambiamento di stile per il "Testo stile2"...ma come si fa? Grazie a tutti

**Myaku** · 14-10-2010, 15:35

Originariamente inviato da bellofresco
Il codice funziona correttamente, ma se cerco di validarlo viene riscontarto un errore, che ho poi capito essere dovuto al fatto che un tag <a> non può contenere tag tipo

esatto

prova al volo:

codice:

      Testo stile1 <span style="..."> Testo stile2 </span>

**bellofresco** · 14-10-2010, 16:16

grazie 1000,

così come mi hai suggerito non funzionava..però la strada era quella giusta.

La soluzione è:

<a href="miapagina.html">
<span class="class1">Testo stile1 </span>
<span class="class2">Testo stile2 </span>
</a>
</p>

Così funziona e viene validato (xhtml strict).
Quindi

può contenere <a> che può contenere <span>.
Poi i css vanno modificati nelle proprietà padding o margin perchè ovviamente adesso i blocchi
di testo fanno riferimento alla stessa origine.
Grazie ancora. Ciao

**bellofresco** · 14-10-2010, 16:44

ahi ahi...<span> va bene per assegnare un altro stile, nel senso del colore e della dimensione,
ma non accetta padding, margin, ecc...

**Myaku** · 14-10-2010, 17:00

Originariamente inviato da bellofresco
ahi ahi...<span> va bene per assegnare un altro stile, nel senso del colore e della dimensione,
ma non accetta padding, margin, ecc...

il padding (almeno right/left) lo dovrebbe prendere. il margin no, non essendo nativamente un elemento di tipo blocco.
posta un esempio grafico di quello che devi ottenere, così vediamo come si può sistemare

**bellofresco** · 14-10-2010, 17:28

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
<div id="sec_1">

<a href="nonesiste.html">
<span class="titolo">Titolo Luuungoo
</span>
<span class="testo">Testo su
due righe</span>
</a>
</p>
</div>
</div>
</body>
</html>

css

* {
margin: 0;
padding: 0px;
}

a:link {
color:#666;
text-decoration: none;
} /* unvisited links */

a:visited {
color:#666;
text-decoration: none;
} /* visited links */

a:hover {
color:#666;
text-decoration: none;
} /* user hovers */

a:active {
color:#666;
text-decoration: none;
} /* active links */

#wrapper {
margin: 0 auto;

width: 663px;
height: 560px;
}

#sec_1 {
width: 122px;
height: 70px;
background-image:url(prova.gif);
float: left;
}

*.titolo {
/*padding-top: 18px;
padding-left: 12px;*/
color:#ffffff;
font-size:14px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

*.testo {
padding-top: 18px;

color:#666;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}

"titolo luuungo" dovrebbe stare nell'area arancione,
"testo su due righe" in quella azzurrina e possibilmente centrato......

**k.b** · 14-10-2010, 18:39

Puoi dare display: block all'a e agli span, pero' a quel punto devi dare una width fissa.

Esempio:

codice:

<!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=utf-8">
<title>Hfoo</title>
<style type="text/css" media="screen">
    #block {
        display: block;    
        width: 150px;
        border: 1px solid black;
    }
    #block span {
        display: block;
    }
    .titolo {
        padding: 18px 0 0 12px;
        background-color: #f25d0a;
        margin: 5px;
    }
    .testo {
        padding: 18px 0 0 0;
        background-color: #E8F4FF;
        text-align: center;
    }
</style>
</head>
<body>




<a id="block" href="#">
<span class="titolo">Titolo Luuungoo
</span>
<span class="testo">Testo su 
due righe</span>
</a>
</p>

</body>
</html>

**furbostandby** · 14-10-2010, 18:50

Originariamente inviato da k.b
Puoi dare display: block all'a e agli span, pero' a quel punto devi dare una width fissa.

Ok, ma se il problema è che in <a> non si può mettere elementi blocco, se fai così tanto vale usare un div...

**k.b** · 14-10-2010, 18:59

Beh io rispondevo alla domanda e il markup cosi' e' valido

Poi e' la richiesta di avere un unico a che e' strana.

**bellofresco** · 14-10-2010, 19:10

per ora grazie a tutti. domani provo con il codice di k.b e vi faccio sapere.
adesso sono fuso...
buona serata

Discussione: tag <a> con 2 stili diversi

Strumenti discussione

Ricerca discussione

Visualizza

tag <a> con 2 stili diversi

Re: tag <a> con 2 stili diversi

Permessi di invio