Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 20

Discussione: Immagine cliccabile

  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2006
    Messaggi
    3,072

    Immagine cliccabile

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

    codice:
        <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

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Puoi farci vedere la tua pagina oppure il codice completo?

  3. #3
    Utente di HTML.it
    Registrato dal
    Jul 2006
    Messaggi
    3,072
    Per ora non riesco a pubblicarla on line... posso inviarti la parte di CSS?
    Oppure altro?

    Grazie

  4. #4
    Utente di HTML.it
    Registrato dal
    Jul 2006
    Messaggi
    3,072
    Nessun aiuto??

  5. #5
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Dovresti inserire tutto ciò che riguarda il menu (css, eventuale javascript)

  6. #6
    Utente di HTML.it
    Registrato dal
    Jul 2006
    Messaggi
    3,072
    Nell'Html ho

    codice:
    <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



    codice:
    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

  7. #7
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    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

  8. #8
    Utente di HTML.it
    Registrato dal
    Jul 2006
    Messaggi
    3,072
    Scusa ma non ho ben capito che modifica devo fare

    Grazie mille

  9. #9
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    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:

    codice:
    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).

  10. #10
    Utente di HTML.it
    Registrato dal
    Jul 2006
    Messaggi
    3,072
    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??

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.