[css] border wel bij link, niet bij afbeelding

[GFoAP]

Ik wil in een website onder de link een stippellijn. in mijn CSS doe ik dit alsvolgt:

code:

a:link, a:visited, a:active {
    color:#DE6747;
    border-bottom-style: dotted;
    border-bottom-color: #DE6747;
    border-bottom-width: thin;
    }

Maar nu krijg ik onder alle thumbnails ook nog een stippellijn, terwijl daar al een standaard border omheen zit:

code:

img, {
    border-color:#FFFFFF;
    border-style:solid;
    border-width:2px;
    }

Is het mogelijk om plaatjes uit te sluiten van de algemene regels voor een link?

[Rowanov]

Nee, je hebt wel de optie om de selectie van je links specifieker te maken door gebruik te maken van bijvoorbeeld een class.

Cascading Stylesheet:

.stippellijn {
    border-bottom-style: dotted;
    border-bottom-color: #DE6747;
    border-bottom-width: thin;
}

[Verwijderd]

niet met een een of andere selector iig, je kan er eventueel een apart attribuut aanhangen. Wil je het voor IE compatible houden, heb je waarschijnlijk alleen iets aan het class attribuut

(en noem die class dan geen "stippellijn" maar "textual" ofzo)

[ Voor 22% gewijzigd door Verwijderd op 12-04-2005 16:26 ]

[Verwijderd]

Verwijderd schreef op dinsdag 12 april 2005 @ 16:25:
niet met een een of andere selector...

code:

a img {
     property: value;
}

hiermee zou je een afbeelding binnen anchor tags andere eigenschappen kunnen toekennen.

[Sappie]

maar hij wil, als ik het goed begrijp, juist het omgekeerde.. juist die anchor anders stijlen die een img element bevatten. En dat is (nog (dunno of het ooit mogelijk gaat worden)) niet mogelijk mbv css selectors.

Dan ben je toch aangewezen op hetgeen mophor en/of rowanov al aandragen.

[ Voor 23% gewijzigd door Sappie op 12-04-2005 16:39 ]

[Verwijderd]

Begrijp ik de ts verkeerd, of ...?

... onder de link een stippellijn ...

code:

a:link, a:visited, a:active {
    color:#DE6747;
    border-bottom-style: dotted;
    border-bottom-color: #DE6747;
    border-bottom-width: thin;
    }

Maar nu krijg ik onder alle thumbnails ook nog een stippellijn, terwijl daar al een standaard border omheen zit:

code:

img, {
    border-color:#FFFFFF;
    border-style:solid;
    border-width:2px;
    }

Is het mogelijk om plaatjes uit te sluiten van de algemene regels voor een link?

De bedoeling, voor zover ik begrijp: de stippellijn, toegekend aan anchor tags, moet niet verschijnen onder een afbeelding binnen anchor tags, daar voor afbeeldingen (ongeacht het feit of deze binnen anchor tags staat of niet) een aparte selector aanwezig is welke ervoor zorgt dat er een rand om de gehele afbeelding verschijnt.

De selector die je daar mijns inziens voor nodig hebt, is de reeds genoemde 'a img', welke je als volgt kunt gebruiken:

code:

img, a img {
    border-color:#FFFFFF;
    border-style:solid;
    border-width:2px;
    }

(dus 'img, a img' i.p.v. alleen de img selector). Belangrijk is wel dat dit laatste stukje code NA de selectors voor je anchors geplaatst word ...

[Rowanov]

Verwijderd schreef op dinsdag 12 april 2005 @ 16:48:
De bedoeling, voor zover ik begrijp: de stippellijn, toegekend aan anchor tags, moet niet verschijnen onder een afbeelding binnen anchor tags, daar voor afbeeldingen (ongeacht het feit of deze binnen anchor tags staat of niet) een aparte selector aanwezig is welke ervoor zorgt dat er een rand om de gehele afbeelding verschijnt.

Magoe, zolang je de rest van de code niet ziet kan je daar vrij weinig over zeggen. Het is in dit geval dus waarschijnlijk zo dat de border van zijn link over de border van zijn thumb wordt geplakt.

[Sappie]

Verwijderd schreef op dinsdag 12 april 2005 @ 16:48:
Begrijp ik de ts verkeerd, of ...?


[...]


De bedoeling, voor zover ik begrijp: de stippellijn, toegekend aan anchor tags, moet niet verschijnen onder een afbeelding binnen anchor tags, daar voor afbeeldingen (ongeacht het feit of deze binnen anchor tags staat of niet) een aparte selector aanwezig is welke ervoor zorgt dat er een rand om de gehele afbeelding verschijnt.

De selector die je daar mijns inziens voor nodig hebt, is de reeds genoemde 'a img', welke je als volgt kunt gebruiken:

code:

img, a img {
    border-color:#FFFFFF;
    border-style:solid;
    border-width:2px;
    }

(dus 'img, a img' i.p.v. alleen de img selector). Belangrijk is wel dat dit laatste stukje code NA de selectors voor je anchors geplaatst word ...

Volgens mij begrijp je de ts wel goed, echter zie ik niet in hoe je op de door jou beschreven manier iets aan de anchor style verandert van die anchors die een img element bevatten. Je verandert juist iets aan de style van de <img> 's die in een anchor staan, wat dus, ook volgens jezelf, niet de bedoeling is

Verder is je selector "a img" wel specifieker (hogere specificity) dan je "img" selector, maar je past op beide dezelfde style toe. Die "a img" is dan dus sowieso overbodig.

[ Voor 13% gewijzigd door Sappie op 12-04-2005 17:01 ]

[Verwijderd]

Rowanov schreef op dinsdag 12 april 2005 @ 16:52:
[...]

Magoe, zolang je de rest van de code niet ziet kan je daar vrij weinig over zeggen. Het is in dit geval dus waarschijnlijk zo dat de border van zijn link over de border van zijn thumb wordt geplakt.

*om

zo krijg je een dubbele border en dat wil ie dus (ook) niet

probleem is dat een plaatje een standaard border heeft en dat een extra stippellijn van de a dan gewoon lelijk is -> border moet behouden blijven, stippelijn niet, daar is geen selector voor.

overigens overschrijft "a img" "a" ook als ie er voor staat, dus de volgorde is niet van belang (in dit geval)

[ Voor 33% gewijzigd door Verwijderd op 12-04-2005 17:00 ]

[Rowanov]

Verwijderd schreef op dinsdag 12 april 2005 @ 16:59:
zo krijg je een dubbele border en dat wil ie dus (ook) niet

Ik moet nu echt stoppen voor vandaag, TS niet helemaal goed begrepen. Ik dacht namelijk dat het probleem was dat de ene border over de andere viel @ de TS; "zie hierboven".

[GFoAP]

Verwijderd schreef op dinsdag 12 april 2005 @ 16:59:
[...]


*om

zo krijg je een dubbele border en dat wil ie dus (ook) niet

probleem is dat een plaatje een standaard border heeft en dat een extra stippellijn van de a dan gewoon lelijk is -> border moet behouden blijven, stippelijn niet, daar is geen selector voor.

overigens overschrijft "a img" "a" ook als ie er voor staat, dus de volgorde is niet van belang (in dit geval)

dit is inderdaad precies het probleem. Bedankt voor deze heldere uitleg. Er komt naast een witte rand rondom een oranje stipellijn onder en die wil ik weg hebben. Ik krijg dit niet voor elkaar, ook niet door het gebruik van classes oid. Het enige dat ik kan bereiken is dat het witte kader aan de onderzijde verdwijnt.

[Verwijderd]

code:

img {
    border: 1px solid White;
}
a img   {
    border: none;
}

[ Voor 7% gewijzigd door Verwijderd op 13-04-2005 15:13 ]

[Verwijderd]

@hierboven: dat is het probleem dus niet en het is ook niet de oplossing

Robert-Jan schreef op dinsdag 12 april 2005 @ 23:25:
[...]


dit is inderdaad precies het probleem. Bedankt voor deze heldere uitleg. Er komt naast een witte rand rondom een oranje stipellijn onder en die wil ik weg hebben. Ik krijg dit niet voor elkaar, ook niet door het gebruik van classes oid. Het enige dat ik kan bereiken is dat het witte kader aan de onderzijde verdwijnt.

je kan of een class geven aan de links die textueel zijn, of een class aan de links die een plaatje bevatten, style overriden (dmv class of anderszins) van het plaatje lost niks op

dus iets als:

HTML:

<a class="figure"><img /></a>

en

Cascading Stylesheet:

a {
  border-bottom: 1px dotted pink;
}
a.figure {
  border-bottom: none;
}