hur specificera enbart länkade bilder i CSS?

[rawd]

tjena!

 

jag sitter o plitar med min första ordentliga stylesheet någonsin. är uppe i 440 rader o det är väl ingen egentlig bedrift. jag har ett problem som jag kommenterat för mig själv i min stylesheet o lat som jag är tänkte jag klippa in mina funderingar här, så kanske nån kan hjälpa?

 

[log]/*

Image elements

*/

img { /* add a thin outline around all images */

border: 1px solid black;

}

 

a.img:link,

a.img:focus, /* maintain the border of elements within anchors of class="img" border-less even if they are linked */

a.img:hover,

a.img:active,

a.img:visited {

border: none;

}

 

.rmimgb img, /* remove thin outline and background for all image elements contained within elements of class="rmimgb" (remove image border) */

.rmimgb a:link, /* also all linked elements contained within elements of class="rmimgb" lose their borders and backgrounds when linked */

.rmimgb a:visited,

.rmimgb a:focus,

.rmimgb a:hover,

.rmimgb a:active {

border: 0;

background-color: transparent;

}

 

/*

How do you specify "for all linked <only>images</only> within elementes of class='rmimgb'" in order to avoid the massive class definitions required (I really

should define at least one more for the desired effect and special cases) and at the same time cope with the strange side effect on other elements?

The best would be to define something for all pseudo classes similar to

 

img[a:(all)] {

border: none;

background: transparent;

}

 

or perhaps rather

 

a[<img>]:(all) {

border: none;

background: transparent;

}

*/[/log]

 

hur gör man? är jag inne på XSL-FO nu? man vill ju helst slippa göra tusen småklasser för alla specialfall och/eller sitta o exkludera fallen ur varandra...

 

REDIGERAT:

förresten, det kanske är lättare att läsa om ni klipper ut hela rasket till en extern editor, läsbarheten i denna smala spalt är inte helt hundra.

 

[inlägget ändrat 2006-12-21 03:38:32 av rawd]

[lizardKng]

Jag vet inte om jag förstår frågan men är det nåt i stil med

 

.rmimgb img { ... }

 

du söker?

 

[mk22gq]

första tanken jag får är:

 

.rmimgb a img {

}

 

alltså "img" inuti "a" inuti klassen "rmimgb"

om det var så du ville ha det

 

[lizardKng]

Hmmm, man skulle behöva se hur HTML-koden ser ut, vilket element är det som har class="rmimgb"...

 

[rawd]

det här är väl mest rätt o i linje med vad jag först har försökt med. nu är jag osäker på om det var exakt såhär jag gjorde, men mina försök misslyckades.

 

ska testa det ändå, så återkommer jag!

 

[rawd]

 

ja precis, o det är så jag har gjort, men det påverkar ju ALLA länkade element inom klassen rmimbg. jag vill ju bara ta bort border på länkade BILDER, alltså inte länkad text, inom samma klass.

 

det skulle tex kunna bli en

 

 

<div class="rmimgb">
  <a href="#">en länk som behåller sina grunddeklarerade egenskaper, med bakgrund och border</a>

  <a href="#"><img src="minbild.gif" title="en länkad bild utan border o bakgrund"></a>
</div>

 

[lizardKng]

men det påverkar ju ALLA länkade element inom klassen rmimbg

 

Nej, det påverkar bara bilder (img betyder <IMG ...>)som ligger "innanför" element med class="rmimgb".

 

I ditt exempel träffar den ingenting eftersom du satt klassattributet på en (extra) omslutande DIV.

 

<div class="rmimgb">

<a href="#">en länk som behåller sina grunddeklarerade egenskaper, med bakgrund och border</a>

 

<a href="#"><img src="minbild.gif" title="en länkad bild utan border o bakgrund"></a>

</div>

 

Och då blir det ju .rmimgb a img.

 

Som sagt, allt beror på hur din html-kod ser ut, det är ju dess struktur som bestämmer hur din css-kod måste skrivas.

 

[rawd]

JA! YES! ÄNTLIGEN!

det var precIIIIS sådär det skulle bli! jag har bråkat med den lösningen en halv dag o så kommer du o bara serverar den som om det inte var nåt alls! tack! poäng! nu förstår jag hur hänvisningshierarkin i CSS funkar också!

 

 

REDIGERAT:

nae, nu var jag nog lite snabb att ta ut segern i förskott där... jag förstår inte alls hur det fungerar, för koden reverserar grundinställningen.

 

[log]

.rmimgb img,

.rmimgb a:link img,

.rmimgb a:visited /*img*/,

.rmimgb a:focus /*img*/,

.rmimgb a:hover /*img*/,

.rmimgb a:active /*img*/ {

border: 0;

background-color: transparent;

}[/log]

 

gruninställningen

 

.rmimgb img  {
border: 0;
background-color: transparent;
}

 

blir återställd av andra raden

 

.rmimgb a:link img

 

helt plötsligt så kommer ramen som tas bort i grundinställningen tillbaka när man skriver andra raden som den står nu. kommenterar man bort "img" som jag gjort för resterande rader så återställs grundinställningen för de händelserna, dvs border försvinner.

 

eh?? nu fattar jag verkligen ingenting på riktigt....

[inlägget ändrat 2006-12-23 12:04:35 av rawd]

[Jonas__B]

varför lägger du in visited och alla andra attribut?

 

det skall räcka med endast:

.rmimgb a img {
border: 0;
background-color: transparent;
}

 

[rawd]

 

därför att det annars inte ändras för de specifika fallen, detta gäller alltid. jag testade ändå för att se om det gjorde nån skillnad o tyvärr gör det inte. =(

 

tack ändå för hjälpen!

 

[mariram]

Hepp!

 

Jag har oxå bråkat med liknande problem en längre tid och nu tror jag att jag kommit på lösningen: Byt ut class mot id.

Så att din kod blir:

 

<div id="rmimgb">
<a href="#">en länk som behåller sina grunddeklarerade egenskaper, med bakgrund och border</a>

<a href="#"><img src="minbild.gif" title="en länkad bild utan border o bakgrund"></a>
</div>

 

 

och css:en i stil med

#rmimgb a:link img{

....

}

 

[Micke_skane]

Om du nu vill ta bort ramen på alla länkande bilder så kan du lägga in i css-filen:

img {
border: 0;
}

Den tar bort ramen på alla länkade bilder på hela sidan som css-filen är inkluderad i.