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. [Risolto] Css e bordo link che cambia intorno a immagine
    Questa discussione è stata cancellata. Solo gli utenti con diritti di gestione possono vederla.
    • V
      vampiretta Super User • ultima modifica di

      Grazie karedas, come posso provo la storia del contenitore centrato. Io per ora ho risolto dando al contenitore margin left e right = auto e mi funziona sia su IE che con Firefox e Opera.

      Per il bordino, non ne vengo a capo, so solo che se creo una tabella e metto l'immagine in una cella funziona, ma avendo creato il sito table free non posso più esare la tabellina per inserire quell'immagine. Almeno credo! 😞

      0 Miglior Risposta Ringrazia Cita Rispondi

        1 Risposta Ultima Risposta
      • V
        vampiretta Super User • ultima modifica di

        Ho fatto qualche prova, e ho visto che per Firefox e Opera non serve che metto la classe, e align="right" lo prende tranquillamente e il W3C me lo convalida.

        Però il problema è invece che su IE il bordo non è verde e non si vede il cambio di colore al passaggio del mouse. Praticamente tiene i colori di base impostati da IE il classico blu per il link e il violaceo per il visitato.

        0 Miglior Risposta Ringrazia Cita Rispondi

          1 Risposta Ultima Risposta
        • V
          vampiretta Super User • ultima modifica di

          Ragazzi io ho trovato queste istruzioni per il bordo intorno alle immagini.

          [HTML]a{
          border: 0 !important;
          border: 1px solid red;
          }

          a:hover{
          border: 1px solid blue;
          }

          img{
          border: 1px solid red !important;
          border: 0;
          }

          img:hover{
          border: 1px solid blue !important;
          }[/HTML]

          Fonte

          Funziona, però io non devo applicarlo a tutti i link ma solo ad alcune immagini, e oltretutto così facendo tutte le immagini mi vengono bordate e cambiano colore al passaggio del mouse anche se non sono link! 😞

          E ovviamente se allineo a destra o sinistra, non mi funge più! 😞❌(:x

          0 Miglior Risposta Ringrazia Cita Rispondi

            1 Risposta Ultima Risposta
          • L
            laburno User Attivo • ultima modifica di

            Prova ad annidiare le img dentro gli a:

            a img { .....}
            a:hover img { .... }

            Leggendo che su IE ti mantiene i valori di default mi è venuto in mente che potresti prima resettarli con img { border: 0 } e poi definire gli stili dei link.

            Gli !important su IE6 non servono perché mi sembra che non li riconosca.

            0 Miglior Risposta Ringrazia Cita Rispondi

              1 Risposta Ultima Risposta
            • V
              vampiretta Super User • ultima modifica di

              Si ma in questo modo

              a img { .....}
              a:hover img { .... }

              tutte le immagini della pagina mi si contornano no?
              Io ne ho pochissime che fungono da link.

              0 Miglior Risposta Ringrazia Cita Rispondi

                1 Risposta Ultima Risposta
              • L
                laburno User Attivo • ultima modifica di

                Si devi aggiungerci la tua classe, non l'avevo specificato.

                0 Miglior Risposta Ringrazia Cita Rispondi

                  1 Risposta Ultima Risposta
                • V
                  vampiretta Super User • ultima modifica di

                  Niente, non ne vengo a capo, sicuramente sono io tonta, ma non mi riesce proprio!! 😞
                  Finisce che non dovrò avere il bordino colorato intorno all'immagine, o meglio colorato fisso senza cambio di colore. Però mi fa rabbia! 😞

                  0 Miglior Risposta Ringrazia Cita Rispondi

                    1 Risposta Ultima Risposta
                  • L
                    laburno User Attivo • ultima modifica di

                    Prova così:
                    a.classe { border: 1px solid COLORE1 }
                    a.classe:hover { border: 1px solid COLORE2 }
                    a img { border: 0; }

                    0 Miglior Risposta Ringrazia Cita Rispondi

                      1 Risposta Ultima Risposta
                    • V
                      vampiretta Super User • ultima modifica di

                      Corro a provare, ho fatto qualcosa di simile stanotte ma non mi veniva niente di buono, spero fosse sbagliato.

                      :bacio:

                      0 Miglior Risposta Ringrazia Cita Rispondi

                        1 Risposta Ultima Risposta
                      • V
                        vampiretta Super User • ultima modifica di

                        Ho provato e ho aggiornato la pagina di prova. Funge con IE ma non con Firefox. E poi resterebbe il problema dell'allineamento.

                        Sembra un odissea! 😉

                        0 Miglior Risposta Ringrazia Cita Rispondi

                          1 Risposta Ultima Risposta
                        • L
                          laburno User Attivo • ultima modifica di

                          😄 Ri-prova così:
                          a.classe { border: 1px solid COLORE1 }
                          a.classe:hover { border: 1px solid COLORE2 }
                          img { border: 0; } /* toglie i bordi da tutte le immagini, i bordi saranno dei link */

                          Per quanto riguarda l'allineamento all'immagine interessata applica un float (left o right) dove lo vuoi te.

                          0 Miglior Risposta Ringrazia Cita Rispondi

                            1 Risposta Ultima Risposta
                          • V
                            vampiretta Super User • ultima modifica di

                            Css

                            [html]a.provalink { border: 1px solid green; }
                            a.provalink:hover { border: 1px solid red; }
                            img { border: 0; } /* toglie i bordi da tutte le immagini, i bordi saranno dei link */[/html]

                            Pagina:

                            [html]<a href="news-annecy.jpg" class="provalink" target="_blank"><img src="news-annecyP.jpg" alt="" border=""></a>[/html]

                            Con o senza border="" il risultato è uguale.

                            La pagina di prova è il risultato, IE ok, Firefox no! Dove sbaglio?! :():

                            0 Miglior Risposta Ringrazia Cita Rispondi

                              1 Risposta Ultima Risposta
                            • L
                              laburno User Attivo • ultima modifica di

                              Sul tag non devi specificare attributi presentazionali come border, ma lasciarli completamente in gestione ai CSS.

                              Comunque è un piccolo bug di IE6 (sul 7 funziona normale), come diceva karedas, ho fatto una ricerca ed ho trovato questo:
                              http://locusoptimus.com/css-trickery/ie-image-border-styles-on-hover.php

                              Quindi ho riprovato così:

                              img { border: 0; }
                              a:hover{ color: #FF0000; }
                              a:link img { border: 1px solid #000; }
                              a:hover img { border: 1px solid; }
                              

                              [html]<a href="#"><img src="#" alt=bla" /></a>[/html]

                              0 Miglior Risposta Ringrazia Cita Rispondi

                                1 Risposta Ultima Risposta
                              • V
                                vampiretta Super User • ultima modifica di

                                Ora sono cotta di sonno, guardo tutto bene stanotte. GRAZIE! :bacio:

                                Ma ad occhio, incorro sempre nel problema che poi tutte le immagini della pagina mi vengono bordate, metto le classi???

                                0 Miglior Risposta Ringrazia Cita Rispondi

                                  1 Risposta Ultima Risposta
                                • V
                                  vampiretta Super User • ultima modifica di

                                  Scusa come non detto, ho fatto una domanda stupida! 😉

                                  Ho provato e funziona. Ho aggiornato la pagina di prova! 😉

                                  Grazie mille Laburno, funziona anche se allineo a destra o sinistra. EVVIVA!!

                                  Mi resta un unico problema e cioè che se disgraziatamente ho delle immagini da usare come link su cui non voglio il bordo, non ho idea di come fare! Tu?

                                  Ps: non uccidermi!!

                                  0 Miglior Risposta Ringrazia Cita Rispondi

                                    1 Risposta Ultima Risposta
                                  • L
                                    laburno User Attivo • ultima modifica di

                                    @Vampiretta said:

                                    Mi resta un unico problema e cioè che se disgraziatamente ho delle immagini da usare come link su cui non voglio il bordo, non ho idea di come fare! Tu?

                                    Utilizzi una classe. O meglio, consiglio mio, utilizza una classe solo per le immagini per cui vuoi che appaia il bordo. 😉

                                    :ciauz:

                                    0 Miglior Risposta Ringrazia Cita Rispondi

                                      1 Risposta Ultima Risposta
                                    • V
                                      vampiretta Super User • ultima modifica di

                                      Fatto Laburno, si lo sto usando con un classe solo sulle immagini che mi interessano!!

                                      Non so come ringraziarti... 😉 :bacio:

                                      0 Miglior Risposta Ringrazia Cita Rispondi

                                        1 Risposta Ultima Risposta
                                      • K
                                        karedas Super User • ultima modifica di

                                        Risolto tutto? =D

                                        0 Miglior Risposta Ringrazia Cita Rispondi

                                          1 Risposta Ultima Risposta
                                        • V
                                          vampiretta Super User • ultima modifica di

                                          Si si, a me funziona con IE, Firefox e Opera e sia con l'immagine senza allineatura, che allineata a destra o sinistra.

                                          Ho scritto così:

                                          [html]a.border:link img, a.border:visited img { border: 1px solid green; }
                                          a.border:hover img, a.border:active img { border: 1px solid #B60022;}[/html]

                                          E messa la classe al link:

                                          [html]<a href="Screen5.jpg" target="_blank" class="border">[/html]

                                          E dove mi serve, la classe all'immagine con float a destra o sinistra.

                                          :vaiii::yuppi:

                                          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