- Home
- Categorie
- Coding e Sistemistica
- Coding
- [Risolto] Css e bordo link che cambia intorno a immagine
-
[Risolto] Css e bordo link che cambia intorno a immagine
Salve ragazzi, dovendo linkare alcune immagini piccine a quelle più grandi da visualizzare volevo che intorno all'immagine si creasse un bordino verde che diventa bordò al passaggio del mouse.
Ho scritto così
[html]<a href="news-annecy.jpg" class="border" target="_blank">
<img src="news-annecyP.jpg" alt="" border="0"></a>[/html]E nel css così:
[html]a.border:link, a.border:visited {
border: 1px solid #007C00;
display: block;
}
a.border:hover {
border: 1px solid #B60022;
}
a.border:active {
border: 1px solid;
display: block;
}[/html]Però quello che mi succede è questo:
Ci sto sbattendo la testa ma non ne vengo a capo. :()::?
So che il problema credo sia nel block, ma togliendolo non mi viene il bordino intorno.
-
Ciao vampiretta,
prova così:[html]a.border img { border: 1px solid #007C00; }
a.border:hover img{ border: 1px solid #B60022; } [/html]
-
Subito... corro... grazie...
-
Laburno, funge... ovviamente.. uff era talmente semplice, mi sono andata a impelagare in chissà cosa!
Ho visto che basta anche togliere il "display: block"!
Grazie!
-
Ehm però ora ho un altro problemino che mi ero dimenticata, ho dato all'immagine --- align="right" e mi scompare il bordino. Perchè?
-
@Vampiretta said:
Ehm però ora ho un altro problemino che mi ero dimenticata, ho dato all'immagine --- align="right" e mi scompare il bordino. Perchè?
Il bordo si applica alle immagini <img> dentro a i link <a> di classe border.
Se togli il link o modifichi la classe il bordo non si applica.L'allineamento a destra l'hai dato via html o via css? (puoi rimettere la pagina online?)
-
L'ho rimessa su, non ho tolto ne il link ne cambiato la classe.
E l'allineamento a destra l'ho provato sia via html che via css. Almeno credo!
-
Ho fatto due prove, nel primo caso ho messo l'allineamento da html, lo allinea a destra ma leva il bordino.
[html]<a href="news-annecy.jpg" class="border" target="_blank"><img src="news-annecyP.jpg" alt="" border="0" align="right"></a>[/html]
Nel secondo, l'ho messo da css, tiene il bordino ma non allinea.
[html]<a href="news-annecy.jpg" class="border" target="_blank"><img src="news-annecyP.jpg" alt="" border="0" class="imagi"></a>[/html]
Css:
[html].imagi {text-align: right;}[/html]
-
Perchè nel primo caso nel tag <img> hai specificato:
border="0"
-
E comunque via CSS, per allineare un elemento devi usare float, il text-align serve per posizionare il testo contenuto.
-
Allora nel caso 1 ho messo border="1" e mi viene il bordino ma non prende la specifica di cambiare colore al passaggio del mouse.
Nel secondo caso ho messo sempre border="1" e nel css float right e però anche li non mi prende la specifica del passaggio mouse.
Non capisco dove sbaglio, scusami!
-
Eh visto che ci sono, per centrare un elemento... cosa uso?
-
@Vampiretta said:
Allora nel caso 1 ho messo border="1" e mi viene il bordino ma non prende la specifica di cambiare colore al passaggio del mouse.
Nel secondo caso ho messo sempre border="1" e nel css float right e però anche li non mi prende la specifica del passaggio mouse.
Non capisco dove sbaglio, scusami!
Se te specifichi un border nell'html, vai a sovrascrivere il CSS. Perciò non metterlo proprio e fai tutto tramite fogli di stile.
@Vampiretta said:
Eh visto che ci sono, per centrare un elemento... cosa uso?
Dipende dall'elemento, se è di blocco, inline, e dove è contenuto. Per esempio si possono impostare margin-left e margin-right su auto, però non è universale.
-
Ho cambiato di nuovo.
- esempio ho messo border="" senza specificare nulla e lui non prende bordo.
2 esempio ho tolto proprio la dicitura border="" mi mette un bordo ma non applica le specifiche di cambio colore bordino.
x:x
-
@Vampiretta said:
Ho cambiato di nuovo.
2 esempio ho tolto proprio la dicitura border="" mi mette un bordo ma non applica le specifiche di cambio colore bordino.Sicura? Io sulla pagina di prova l'effetto hover lo vedo vene.
-
Ehm lo vedi bene con Firefox? Con quello ho guardato ora e anche io.
Ma io nno lo vedo bene con IE, si può risolvere?
-
Io h smanettato un po' ma non ho risolto un tubo!
-
@Vampiretta said:
Io h smanettato un po' ma non ho risolto un tubo!
Non ho il portatile con IE a disposizione in questo momento per provare, te lo fa sia sul 6 che sul 7?
Appena posso faccio due prove, intanto se qualcuno avesse la possibilità di aiutarci... sarebbe gradito
-
Hmmm io ho il 7 e li me lo fa, sul 6 non saprei!
Attendo fiduciosa, io continuo a fare le mie prove, se mi riesce ovviamente vi avverto!
Grazie ancora Laburno!
-
Come diceva Laburno per centrare automaticamente un oggetto all'interno di un altro devi dare al genitore ( prendi il div) una dimensione fissa e al figlio un margine scritto così:
div#genitore{
width:500px;
height:200px;
}
div#figlio{
margin:0 auto;
}Diciamo che questo è uno dei metodi per farlo.
Il text-align:center però è un attributo che spesso e volentieri devi usare per la compatibilità con internet Explorer (aimè) dato che posiziona centralmente anche gli oggetti come le immagini ( tu dirai ma che c'entra il TEXT-align ? bè chiedilo agli incapaci della microsoft XD )L'effetto hover del cambio bordo sull'immagine ora non sono sicuro, ma su internet explorer potrebbe dare dei problemi