- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- [Risolto] Css e bordo link che cambia intorno a immagine
-
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!
-
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.
-
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]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
-
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.
-
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.
-
Si devi aggiungerci la tua classe, non l'avevo specificato.
-
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!
-
Prova così:
a.classe { border: 1px solid COLORE1 }
a.classe:hover { border: 1px solid COLORE2 }
a img { border: 0; }
-
Corro a provare, ho fatto qualcosa di simile stanotte ma non mi veniva niente di buono, spero fosse sbagliato.
-
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!
-
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.
-
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?! :():
-
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.phpQuindi 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]
-
Ora sono cotta di sonno, guardo tutto bene stanotte. GRAZIE!
Ma ad occhio, incorro sempre nel problema che poi tutte le immagini della pagina mi vengono bordate, metto le classi???
-
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!!
-
@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.
-
Fatto Laburno, si lo sto usando con un classe solo sulle immagini che mi interessano!!
Non so come ringraziarti...
-
Risolto tutto? =D
-
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.