Navigazione

    Privacy - Termini e condizioni
    © 2020 Search On Media Group S.r.l.
    • Registrati
    • Accedi
    • CATEGORIES
    • Discussioni
    • Non letti
    • Recenti
    • Hashtags
    • Popolare
    • Utenti
    • Stream
    • Interest
    • Categories
    1. Home
    2. Categorie
    3. Coding e Sistemistica
    4. Coding
    5. Link del menu con effetto rollover fatto con i soli CSS
    Questa discussione è stata cancellata. Solo gli utenti con diritti di gestione possono vederla.
    • C
      claudioweb Super User • ultima modifica di

      Ciao, dovresti spiegarti un po' meglio, perchè non so se ho capito bene quale sia il tuo problema.

      E' del tutto normale che non tutti i pulsanti abbiano la stessa dimensione. La soluzione è nel conoscere la larghezza esatta delle singole immagini, e quindi impostare la larghezza esatta di ogni cella.

      Ma più semplicemente come già detto da riky, puoi lasciare che la tabela si adatti da sola all'immagine senza impostare il parametro weight.
      Questa soluzione è più scalabile perchè funziona sempre, anche nel caso poi modificassi in seguito le dimensioni delle immagini.

      0 Miglior Risposta Ringrazia Cita Rispondi

        1 Risposta Ultima Risposta
      • D
        dadevr User • ultima modifica di

        mi spiego meglio: sto riscrivendo il codice del mio sitio internet http://www.davidemuci.it utilizzando i css e l'xhtml.

        Il mio problema che il menù orrizzontale è stato fatto in JS. Mi piacerebbe ricreare lo stesso effetto con in CSS ma non se è possibile.

        0 Miglior Risposta Ringrazia Cita Rispondi

          1 Risposta Ultima Risposta
        • R
          riky78 User Attivo • ultima modifica di

          apparentemente dovresti fare una classe (o un id) x ogni voce del menù (visto che ognuna avrà un background diverso) poi cambi il background con :hover

          0 Miglior Risposta Ringrazia Cita Rispondi

            1 Risposta Ultima Risposta
          • C
            claudioweb Super User • ultima modifica di

            Personalmente credo che, cercando di conservare il codice della tua pagina, puoi fare così:

            ogni tasto nella tua pagina è fatta da due immagini sovrapposte. Una di sfondo e una che contiene il testo.
            Quindi lasciando lo sfondo invariato, puoi interessarti al codice che riguarda l'immagine con testo.

            Ad esempio il link alla home:

            
               <TD vAlign=center align=middle width=118 height=31>[url="javascript:;"]![image](Davide Muci fotografo e SEO specialist - fotografia di danza, sportiva, di scena, sociale - web marketing specialist_file/home.gif)</TD>
            
            

            Puoi modificarlo sostituendo questo codice:

                <TD vAlign=center align=middle width=118 height=31>[url="http&#58;//www.davidemuci.it/"]HOME</TD>
            
            

            Poi ti modifichi lo stile dal CSS a tuo piacimento.

            In questo modo elimini solo un'immagine, quella con il testo, ma lo sfondo rimane.
            Ne hai anche il vantaggio di avere dei link testuali.

            Ho fatto qualche tentativo e si vede bene con Explorer. Prova la modifica e testala con vari browser e risoluzioni.

            Non so se a te piace così. Ma l'effetto non cambia di molto, se non per il font.

            0 Miglior Risposta Ringrazia Cita Rispondi

              1 Risposta Ultima Risposta
            • C
              claudioweb Super User • ultima modifica di

              Riporto qui un link che spiega bene un bel pò di cose in maniera chiara 🙂

              [url=http://www.gdesign.it/pages/howto/articoli/rollcss/rollcss.php]Rollover css

              Inoltre ho editato il title del post

              :ciauz:

              0 Miglior Risposta Ringrazia Cita Rispondi

                1 Risposta Ultima Risposta
              • D
                dadevr User • ultima modifica di

                Mi è venuta un'idea bizzarra: se facessi 5 include, ciascuno per ogni voce del menù non ci sarebbe più il problema della larghezza variabile. Portrei quindi posizionare il rollover con background-position!

                Che ne dite?

                0 Miglior Risposta Ringrazia Cita Rispondi

                  1 Risposta Ultima Risposta
                • R
                  riky78 User Attivo • ultima modifica di

                  :mmm:

                  non ho capito...

                  0 Miglior Risposta Ringrazia Cita Rispondi

                    1 Risposta Ultima Risposta
                  • D
                    dadevr User • ultima modifica di

                    scusate ho detto una cazzata

                    0 Miglior Risposta Ringrazia Cita Rispondi

                      1 Risposta Ultima Risposta
                    • D
                      dadevr User • ultima modifica di

                      problema risolto:

                      1- ho creato un bottone con photoshop con lo stesso sfondo del mio menu
                      2- ho scritto una voce del menù ad esempio - Home -
                      3- a questo punto ho fatto in modo che la scritta home diventasse trasparente. in pratica l'ho selezionata con la bacchetta magica e poi ho premuto canc.
                      4- a questo punto basta sistemare il foglio di stile:
                      <style type="text/css">
                      <!--

                      #home a{background: white;}
                      a:hover{background: yellow;}
                      -->
                      </style>

                      [/img]

                      0 Miglior Risposta Ringrazia Cita Rispondi

                        1 Risposta Ultima Risposta
                      • R
                        riky78 User Attivo • ultima modifica di

                        ingengoso 🙂

                        controlla che funzioni con tutti i browser :ciauz:

                        0 Miglior Risposta Ringrazia Cita Rispondi

                          1 Risposta Ultima Risposta
                        • C
                          claudioweb Super User • ultima modifica di

                          L'importante è che tu abbia risolto 🙂

                          :ciauz:

                          0 Miglior Risposta Ringrazia Cita Rispondi

                            1 Risposta Ultima Risposta
                          • esteban
                            esteban Moderatore • ultima modifica di

                            l'avevo provato anch'io ma ha un problema (spero per te che derivi dalla grandezza delle immagini) il rollover era in ritardo, invece del normale c'era un attimo in cui tutto era bianco e l'effetto faceva schifino...
                            se ti va bene fammelo sapere

                            0 Miglior Risposta Ringrazia Cita Rispondi

                              1 Risposta Ultima Risposta
                            • R
                              riky78 User Attivo • ultima modifica di

                              @esteban said:

                              l'avevo provato anch'io ma ha un problema (spero per te che derivi dalla grandezza delle immagini) il rollover era in ritardo, invece del normale c'era un attimo in cui tutto era bianco e l'effetto faceva schifino...
                              se ti va bene fammelo sapere

                              questa è un cosa che mi succede spesso con IE (ovviamente solo con lui) e sinceramente non sono mai riuscito a risolverlo...

                              0 Miglior Risposta Ringrazia Cita Rispondi

                                1 Risposta Ultima Risposta
                              • D
                                dadevr User • ultima modifica di

                                Vi riferite al flickering?

                                Ho letto un articolo il quale diceva che per eliminare questo fenomeno è sufficiente specificare lo stesso sfondo dei link anche sul list-item.

                                0 Miglior Risposta Ringrazia Cita Rispondi

                                  1 Risposta Ultima Risposta
                                Caricamento altri post
                                Rispondi
                                • Topic risposta
                                Effettua l'accesso per rispondere
                                • Da Vecchi a Nuovi
                                • Da Nuovi a Vecchi
                                • Più Voti