border/outline

Horizon

Nuovo Utente
7 Gen 2010
6
0
0
allora, io ho nella mia pagina xhtml delle immagini-link. Io vorrei tramite css applicare ad ognuna di queste immagini un bordo, che cambi colore quando ci passo sopra con il mouse.
mi sapete dire perchè i border left,right e top si adattano perfettamente all'immagine, mentre il bottom mi viene posizionato ad una certa distanza?
 

Horizon

Nuovo Utente
7 Gen 2010
6
0
0
ecco qua

se sulla destra si vede il bordo viola + spesso è perchè è già presente un bordo destro di 2px nell'immagine jpg.

28ip1e9.png


questo è il foglio di stile corrispondente

l'id #img è quello del box contenente l'immagine

24v761c.jpg
 

MarcoGrazia

Utente Attivo
15 Dic 2009
852
20
28
62
Udine
www.stilisticamente.com
Ma il crossposting non era vietato :D anche se tra forum concorrenti :D

Ora almeno c'è il codice.
immagino che il tuo codice html sia qualcosa del tipo...
<a id="img" href=""...><img src="" .../></a> giusto?

Perché per fare quello che vuoi fare tu bastava qualcosa del tipo...
Codice:
a {
  border: none; (o qualsiai altra combinazione di colore)
  text-decoration: none;
}
a:hover {definisci qui i colori}
eventualmente definendo ad A una classe per distinguerlo dalle altre ancore nella pagina.
 

Horizon

Nuovo Utente
7 Gen 2010
6
0
0
mmh...io l'id l'ho specificato nel box contenente l'immagine...

così

<div id="img"><a href="javascript:finestra('gennaio.html')"><img src="imag/1t.jpg" border="0"/></a></div>
 

MarcoGrazia

Utente Attivo
15 Dic 2009
852
20
28
62
Udine
www.stilisticamente.com
Fai così:
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style type="text/css" media="screen">
		body {background-color: #fff;}
		#img a img {
			text-decoration: none;
			border: 3px solid #fff;
		}
		#img a:hover img {
			border: 3px double red;
		}
	</style>
</head>
<body>

	<div id="img">
	
		<a href="#">
			<img src="banner_genealogiaitaliana.jpg" alt="" />
		</a>
		
	</div>
	
</body>
</html>
lo vedi qui: http://test.stilisticamente.biz/
E togli quel border="0" che non ti serve.
 

Discussioni simili