Immagine cliccabile

[Valeria75_bis]

Ciao a tutti, ho un menu che contiene dei pulsanti del tipo

    <ul class="menu_extra">[*]
                    <span class="imgReplace">Link1</span>
                [*]
                    <span class="imgReplace">Link2</span>
                [/list]

dove viene visualizzata l'immagine corrispondere all'area del menu


il problema è che non risco a rendere ogni elementi cliccabile... ho provato a fare:

<a href="index.php?id=5" title="Link2">
<span class="imgReplace">Link2</span>
</a>


ma non cambia nulla

Come posso fare?

Grazie

[Prill]

Puoi farci vedere la tua pagina oppure il codice completo?

[Valeria75_bis]

Per ora non riesco a pubblicarla on line... posso inviarti la parte di CSS?
Oppure altro?

Grazie

[Valeria75_bis]

Nessun aiuto??

[Prill]

Dovresti inserire tutto ciò che riguarda il menu (css, eventuale javascript)

[Valeria75_bis]

Nell'Html ho

<div id="content">
    <div id="header">
        <div id="menu">
            <ul class="menu">

                <li class="aaa">
                    <a class="" href="index.php?id=3" title="AAA">
                    <span class="imgReplace">AAA</span>
                    </a>
                
                <li class="bbb">
                    <a class="" href="index.php?id=2" title="BBB">
                    <span class="imgReplace">BBBB</span>

                    </a>
                
                <li class="ccc">
                    <a href="index.php?id=4" title="CCC">		
                    <span class="imgReplace">CCC</span>
                    </a>
                [/list]
            <ul class="menu_extra">
[*]
                    <a href="index.php?id=1" title="Home">
                    <span class="imgReplace">Home</span>
                    </a>
                [*]
                    <a href="index.php?id=5" title="PDF">
                    <span class="imgReplace">PDF</span>

                    </a>
                [/list]
            <form id="search" method="post" >
  ....
                </fieldset>
            </form>
        </div>
    </div>
</div>

nel CSS

p, blockquote, pre, ol, dl, ul, form {line-height:1.5}
:focus { outline:none; }

.imgReplace { display:block; width:0; height:0; line-height:0; overflow:hidden; clip:rect(0,0,0,0); }
.clear { clear:both; display:block; font-size:0; height:0; line-height:0; overflow:hidden; }

#content { width:975px; margin:auto; padding:0 0 0; display:table; z-index:1; }	
#content #header #menu { float:left; clear:both; width:922px; height:48px; background: url(../images/menu.png) no-repeat; margin-top:10px; position:relative; left:0px;}

#content #header #menu ul,
#content #header #menu ul li,
#content #header #menu form { float:left; }
#content #header #menu .menu { width:390px; height:50px; margin:0;}
#content #header #menu .menu li { padding:5px 0 0;}
#content #header #menu .menu li a { display:block; height:40px; background:url(../images/menu_over.png) no-repeat;  }
#content #header #menu .menu li.aaa a { width:121px; background-position:0 -40px; margin-right:9px; margin-left:7px;}
#content #header #menu .menu li.aaa a:hover,
#content #header #menu .menu li.aaa a.active { background-position:0 0; }
#content #header #menu .menu li.bbb a { width:152px; background-position:-122px -40px; margin-right:4px; margin-left:7px;}
#content #header #menu .menu li.bbb a:hover,
#content #header #menu .menu li.bbb a.active { background-position:-122px 0; }
#content #header #menu .menu li.ccc a { width:78px; background-position:-275px -40px; margin-left:7px;}
#content #header #menu .menu li.ccc a:hover,
#content #header #menu .menu li.ccc a.active { background-position:-275px 0; }
#content #header #menu form fieldset { margin:0; border:0;}
#content #header #menu form input { border:0 none; color:#FFFFFF; font-size:18px; left:540px; padding:11px 3px; position:absolute; width:358px; background:none; display:block; top:3px;}
#content #header #menu form button { background:none; border:0; cursor:pointer; display:block; height:37px; padding:0; position:absolute; right:6px; top:6px; width:38px;}

il problema è nei due pulsanti PDF ed HOME, vorrei renderli cliccabili


Grazie

[Prill]

manca nel css tutta la formattazione per l'elenco menu_extra, che devi andare ad aggiungere,se è eguale a quella dell'altro elenco, duplica quest'ultima e cambia il nome, ai link darai la loro immagine di sfondo, il loro display:block e le dimensioni volute

[Valeria75_bis]

Scusa ma non ho ben capito che modifica devo fare

Grazie mille

[Prill]

Nel tuo css non v'è alcuna formattazione per la classe menu_extra che è applicata all'elenco e per i link al suo interno che non vedi perché è come fossero vuoti (in quanto contenenti uno span con dimensioni azzerate) , dovrai aggiungere almeno qualcosa del genere:

content #header #menu .menu_extra a { display:block; width:???px; height:???px; background:url(immagine) no-repeat;  }

dove larghezza e altezza saranno quelle necessarie per visualizzare lo sfondo. Oltre ai link potresti dover formattare anche gli elementi predecessori (ul e li).

Personalmente eviterei di specificare uno stesso nome per un id e una classe (hai #menu e .menu) ad evitare confusioni.

Se le caratteristiche dei due elenchi sono le stesse puoi applicare la classe .menu anche al secondo elenco rimuovendo la classe menu_extra e aggiungere al css altri collegamenti con caratteristiche diverse seguendo lo stesso procedimento usato finora (con classi diverse per le voci elenco: li.aaa a, li.bbb a eccetera).

[Valeria75_bis]

mmm ho provato a fare qualche cosa del tipo

#content #header #menu .menu_extra a { display:block; width:400px; height:50px; background:url(immagine) no-repeat; }


ma i due pulsanti del menu non diventano comunque linkabili.....

Cosa sbaglio??