Quesito: Css e menù orizzontale

**fandangood** · 17-05-2006, 19:40

Dopo numerosi tentativi e prove fallite miseramente

provo a chiedere aiuto sperando che mi possiate trovare una soluzione (purtroppo non "mastico" bene css). La domanda è molto semplice:
E' possibile far si che nel menu orizzontale (qui sotto il codice sorgente) il "Link non cliccabile" sia, ovviamente modificando tale codice, effettivamente non cliccabile?

<html>
<head>
<style type="text/css">

#navcontainer
{
width: 100%;
float: left;
background-color: #000080;
}

#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }

#navcontainer ul
{
margin: 0;
padding: 0 0 0 2%;
color: #FFFFFF;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}

#navcontainer ul li a
{
padding: 3px 5px;
background-color: #000080;
color: #FFFFFF;
text-decoration: none;
float: left;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}

#navcontainer ul li a:hover
{
background-color: #84dead;
color: #000080;
}

#navcontainer a:active
{
background: #aad5ff;
color: #fff;
}

#navcontainer li#active a
{
background: #84dead;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
color: #000080;
}

</style>
</head>

<body>

<div id="navcontainer">
<ul id="navlist">
<li id="active">Link non cliccabile [*]Link due[*]Link tre[*]Link quattro[*]Link cinque[*]Link sei[/list]
</div>

</body>
</html>

Grazie

**Vincent.Zeno** · 17-05-2006, 20:25

Togli href="#"

<li id="active"><a>Link non cliccabile </a>

**fandangood** · 17-05-2006, 20:42

Non solo la domanda era semplice... ma soprattutto la risposta.

Grazie

**Mich_** · 18-05-2006, 09:08

In realta` un tag <a> senza l'attributo href oppure name e` un errore.
Non credo che i browser si arrabbino, comunque; ma potrebbero mostrare cose strane le prossime versioni, o qualche brwoser particoalre.

Perche` un link sia "non cliccabile", la cosa migliore e` non mettercelo.
Puoi sostituire il tag <a> conuno <span> che fa riferimento ad uno stile che faccia assomigliare il testo ad un link.

Oppure usando JS:
<a href="..." onclick="return false;">
pero` ricorda che se JS e` disabilitato il link funziona.

**fandangood** · 18-05-2006, 09:27

In realta` un tag <a> senza l'attributo href oppure name e` un errore.

In effetti era un dubbio che avevo anch'io. Tuttavia ho provato a validare il codice qui sotto e secondo il W3C non ci sono errori.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

</head>
<body>
<a>Link non cliccabile</a>
Link due
Link tre
Link quattro
Link cinque
Link sei
</body>
</html>

Puoi sostituire il tag <a> conuno <span> che fa riferimento ad uno stile che faccia assomigliare il testo ad un link.

Mi puoi fare un esempio magari applicato al codice CSS che ho postato?

Grazie

**Mich_** · 18-05-2006, 10:03

codice:

<body>


<span class="simillink">Link non cliccabile</span>
Link due
Link tre
Link quattro
Link cinque
Link sei
</p></body>

CSS:
.simillink {
  color: ...;
  text-decoration: underline;
}
.simillink:hover {  /* questo non funziona in IE */
  color: ...;
  text-decoration: underline;
}

**fandangood** · 18-05-2006, 10:47

Il problema è che, come detto all'inizio del thread, non "mastico" bene CSS.
La soluzione da te indicata andrebbe benissimo se il menù non fosse orizzontale (con ul li ecc...). Ma la vera difficoltà sta nel riuscire anche, tramite <span>, nell'inserire una classe che risulti all'interno del #navcontainer (menù orizzontale).
Posto nuovamente il codice iniziale da cui prendere spunto per poter rendere il link non cliccabile.

<html>
<head>
<style type="text/css">

#navcontainer
{
width: 100%;
float: left;
background-color: #000080;
}

#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }

#navcontainer ul
{
margin: 0;
padding: 0 0 0 2%;
color: #FFFFFF;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}

#navcontainer ul li a
{
padding: 3px 5px;
background-color: #000080;
color: #FFFFFF;
text-decoration: none;
float: left;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}

#navcontainer ul li a:hover
{
background-color: #84dead;
color: #000080;
}

#navcontainer a:active
{
background: #aad5ff;
color: #fff;
}

#navcontainer li#active a
{
background: #84dead;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
color: #000080;
}

</style>
</head>

<body>

<div id="navcontainer">
<ul id="navlist">
<li id="active">Link non cliccabile [*]Link due[*]Link tre[*]Link quattro[*]Link cinque[*]Link sei[/list]
</div>

</body>
</html>

Grazie e scusa se approfitto troppo della tua disponibilità

**indigoindigo** · 18-05-2006, 11:30

Parafrasando Mich..

codice:

<body>

<div id="navcontainer">
<ul id="navlist">[*]<span class="simillink">Link non cliccabile</span>[*]Link due[*]Link tre[*]Link quattro[*]Link cinque[*]Link sei[/list]
</div>

</body>

codice:

CSS:
#navcontainer ul li span.simillink {
  color: ...;
  text-decoration: underline;
}

proprio a volerlo fare puntiglioso..va bene anche lascirae semplicemente .simillink

ciao

p.s. se ti interessa dai un occhio alle guide di html.it per imparare qualcosina sui CSS..

**fandangood** · 18-05-2006, 11:43

Effettivamente non è cliccabile ma non viene allineato...

Questo il codice modificato:
<html>
<head>
<style type="text/css">

#navcontainer
{
width: 100%;
float: left;
background-color: #000080;
}

#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }

#navcontainer ul
{
margin: 0;
padding: 0 0 0 2%;
color: #FFFFFF;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}

#navcontainer ul li a
{
padding: 3px 5px;
background-color: #000080;
color: #FFFFFF;
text-decoration: none;
float: left;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}

#navcontainer ul li a:hover
{
background-color: #84dead;
color: #000080;
}

#navcontainer a:active
{
background: #aad5ff;
color: #fff;
}

#navcontainer li#active a
{
background: #84dead;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
color: #000080;
}

#navcontainer ul li span.simillink {
color: red;
text-decoration: underline;
}
#navcontainer ul li span.simillink:hover { /* questo non funziona in IE */
color: red;
text-decoration: underline;
}
</style>
</head>

<body>

<div id="navcontainer">
<ul id="navlist">
[*]<span class="simillink">Link non cliccabile</span> [*]Link due[*]Link tre[*]Link quattro[*]Link cinque[*]Link sei[/list]
</div>

</body>
</html>

Help me

**indigoindigo** · 18-05-2006, 12:12

codice:

#navcontainer ul li span.simillink {
padding: 3px 5px;
background-color: #000080;
color: #FFFFFF;
text-decoration: none;
float: left;
color: red;
text-decoration: underline;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}

mancavano i dati che hai impostato per "a"

p.s. quando posti il codice racchiudilo tra i tag [*code] e [*/code] senza l'asterisco

Discussione: Quesito: Css e menù orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

Quesito: Css e menù orizzontale

Permessi di invio