CSS problem länkar

2004-09-21 10:56

#1

jef
Medlem ●
Göteborg
2004-09-21 10:56

Tjenare,

jag har följande:

a:link, a:visited, a:hover {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover { border-bottom-style: dotted;
		  border-bottom-width: thin;
		  border-bottom-color: #999999;
	}
	
a:active { text-decoration:none;
			color:#000000;}

Detta fungerar fint på alla mina länkar i dokumentet men nu har jag några bilder med länkar och jag vill inte att ovanstående a:hover skall appliceras på dem, jag testade:

a:hover IMG { border-bottom-style: none;
	}

men det fungerade inte, någon som har tips ?

/Jefman

Anmäl Ändra Gilla Svara

2004-09-21 11:43

#2

THoG
Medlem ●
Mark
2004-09-21 11:43

Ursprungligen av jef:

Tjenare,

jag har följande:

a:link, a:visited, a:hover {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover { border-bottom-style: dotted;
		  border-bottom-width: thin;
		  border-bottom-color: #999999;
	}
	
a:active { text-decoration:none;
			color:#000000;}

Detta fungerar fint på alla mina länkar i dokumentet men nu har jag några bilder med länkar och jag vill inte att ovanstående a:hover skall appliceras på dem, jag testade:

a:hover IMG { border-bottom-style: none;
	}

men det fungerade inte, någon som har tips ?

/Jefman

Jag vet inte hur man gör så att det fixas auto på bilder men jag brykar göra så här:

I css filen

.exempel {border-bottom-style: none;
}

<div class="exempel">
din bild
</div>

men om det går att den fixar alla bilder så auto så skulle jag också vara tacksam

Anmäl Ändra Gilla Svara

2004-09-21 12:47

#3

jef
Medlem ●
Göteborg
2004-09-21 12:47

Ursprungligen av THoG:

men om det går att den fixar alla bilder så auto så skulle jag också vara tacksam

Jag läste på w3.org och hittade följande:

Pseudo-classes can be used in contextual selectors:

A:link IMG { border: solid blue }

Men har inte lyckats få det att fungera, eller så har jag fattat helt fel....

/Jefman

Anmäl Ändra Gilla Svara

2004-09-22 18:49

#4

ivar
Medlem ●
Stockholm
2004-09-22 18:49

Problemet är att a:link img {} säger vilka egenskaper som en bild ska ha som ligger inuti ett a-element (bordern ligger inte på bilden utan på a-elementet utanför).

Vad du får göra är att sätta en klass på de länkar du vill ska vara utan border-bottom.
Tex

<a href="#" class="imageurl"><img src="http://www.w3schools.com/images/vxhtml.gif" /></a>

och komplettera med css-koden

a.imageurl:hover { border-bottom: 0; }

ps. din css kod går att skriva med färre tecken

a:link, a:visited {
  text-decoration: none;
  color: #000;
}
/* släng denna regel, den står  ju åvan! */
a:visited {
        text-decoration: none;
        color: #000000;
}
a:hover { 
  border-bottom: 1px dotted #999;
  text-decoration: none;
  color: #000;
}
 /* lägg till denna i listan åvan då den inte har egenskaper som skiljer sig från hover */ 
a:active {
  text-decoration:none;
  color:#000000;
}

Anmäl Ändra Gilla Svara

2004-10-20 16:30

#5

Gäst
Oregistrerad ●
2004-10-20 16:30

Korta ner din kod till följande istället:

a:link, a:visited, a:hover, a:active {
 text-decoration: none;
 color: #000;
 }

a:hover { 
 border-bottom: thin dotted #999;
 }

#link:hover {
 border: none;
 }

Anmäl Ändra Gilla Svara

2007-12-22 10:52

#6

Thuresson
Medlem ●
Stockholm
2007-12-22 10:52

Hej

Då sparkar jag liv i denna gamla tråd. Wee...

Jag har samma problem som jef med att mina länkade bilder får samma border-bottom som mina textlänkar. Svaret ivar ger att man kan lägga in en class i <a> taggen och på så sätt styra länkade bilder fungerar bra.

Problemet jag kör ett CMS och har inte möjlighet att lägga in en class i alla bilders <a> tagg. Jag har letat och letat men inte hittat något svar. Börjar bli helt galet frustrerad.

Finns det verkligen inget sätt man kan lösa det här utan att lägga in en class?!

Anmäl Ändra Gilla Svara

CSS problem länkar

Senaste nytt