Jump to content

Box-shadow not working correct with links


Recommended Posts

Hi,

i'm working on box-shawowing in combination with links, but couldn't get it right;

See attachment ..-shadow3 how it should look like...

 

The shadow is just partly visible. See attachment ..-shadow2

 

Who does have suggestions to solve this problem...??..

 

Further in some occasions ist doesn't work at all. I discovered that this is the case when Class= "jcepopup" is added to the link.

 

 

Link to an example on my site (working under Joomla 3.x)

http://kw.jonker.co/index.php?option=com_content&view=article&id=697:fokker-a-1-m-8-uk&catid=87〈=en&Itemid=549&showall=1&limitstart=

 

 

Below a sample of the relevant past of the CSS and code on the page:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><style>div.img_enclose{ width: 88%; clear:both; height: 420px; margin: 0 auto; padding: 10px; font-size: 0.9em; text-align:left;}div.img_enclose-V{ width: 88%; clear:both; height: 530px; margin: 0 auto; padding: 10px; font-size: 0.9em; text-align:left;}div.img_enclose img, div.img_enclose div.img_left img, div.img_enclose div.img_right img{ width: 520px; height: auto; float:center;}div.img_enclose-V img, div.img_enclose-V div.img_left img, div.img_enclose-V div.img_right img{ width: auto; height: 520px; float:center;}div.img_enclose-V div.img_right, div.img_enclose-V div.img_left, div.img_enclose div.img_right, .divimg_enclose div.img_left{ background-color:rgba(255,255,255,0.1); /* box-shadow: 10px 10px 5px rgb(50,50,50); */}div.img_enclose div.img_right a:link, div.img_enclose div.img_left a:link, div.img_enclose-V div.img_right a:link, div.img_enclose-V div.img_left a:link, { box-shadow: 10px 10px 5px rgb(50,50,50);}div.img_enclose div.img_right a:hover, div.img_enclose div.img_left a:hover,div.img_enclose-V div.img_right a:hover, div.img_enclose-V div.img_left a:hover { box-shadow: 10px 10px 5px rgb(200,200,200);}div.img_enclose div.img_right a:visited,div.img_enclose div.img_left a:visited,div.img_enclose-V div.img_right a:visited,div.img_enclose-V div.img_left a:visited { box-shadow: 10px 10px 5px rgb(120,120,120);}div.text-encl_left { width: 40%; float:left; padding: 60px 0 30px 40px;}div.text-encl_right { width: 40%; float:right; padding: 60px 40px 30px 0;}</style></head><body><div class="img_enclose"> <div class="img_left"><a href="http://nimh-beeldbank.defensie.nl/memorix/b9bee65a-ad4a-1341-8ee8-27a5dd673d71" target="_blank" title="Fokker A (M.8) A20/16, WNr. 97, op Soesterberg. Geïnterneerd 8 sept.1916 te Roosteren. Later reg. LA34., op Beeldbank NIMH"><img src="http://images.memorix.nl/nda/thumb/400x400/0eb31b77-65be-9914-c498-217798694ea0.jpg" alt="Fokker A (M.8) A20/16, WNr. 97, op Soesterberg. Geïnterneerd 8 sept.1916 te Roosteren. Later reg. LA34." /></a> </div> <div class="text-encl_right">Fokker A (M.8) A20/16, WNr. 97, still with German markings at Soesterberg. [at Beeldbank NIMH]</div></div><div class="img_enclose"> <div class="img_right"><a href="http://nimh-beeldbank.defensie.nl/memorix/4a10b043-f161-c849-401f-e8d4b20710fc" target="_blank" title="Fokker A (M.8) LA34, op Soesterberg., op Beeldbank NIMH"><img src="http://images.memorix.nl/nda/thumb/400x400/d2eac7c5-b6cc-8529-469b-b4c3d856cc02.jpg" alt="Fokker A (M.8) LA34, op Soesterberg." /></a> </div> <div class="text-encl_left">Fokker A LA34, with Dutch markings at Soesterberg. [at Beeldbank NIMH]</div></div><div class="img_enlcose"> <div class="img_left"><a href="http://nimh-beeldbank.defensie.nl/memorix/6409bd14-2cce-799c-78da-bb6735506560" target="_blank" title="Fokker A (M.8) LA34, op Soesterberg. Ongeval in de start op 24 maart 1917. Elt.vl. J.C.G. Duinker (in de cockpit). Met oranje bollen., op Beeldbank NIMH"><img src="http://images.memorix.nl/nda/thumb/400x400/43b20a54-80d4-25cb-d196-10cb8e715719.jpg" alt="Fokker A (M.8) LA34, op Soesterberg. Ongeval in de start op 24 maart 1917. Elt.vl. J.C.G. Duinker (in de cockpit). Met oranje bollen." /></a> </div> <div class="text-encl_right">Fokker A (M.8) LA34, at Soesterberg. Accident at take- off op March 24 1917. Elt.vl. J.C.G. Duinker. [at Beeldbank NIMH]</div></div><div class="img_enlcose-V"> <div class="img_right"><a href="http://nimh-beeldbank.defensie.nl/memorix/75821798-4f5a-5f93-5915-9375114efcab" target="_blank" title="Fokker A (M.8) LA34, op Soesterberg. Detail motor., op Beeldbank NIMH"><img src="http://images.memorix.nl/nda/thumb/400x400/be0f5909-03c3-064d-0964-9a4a2001ebbc.jpg" alt="Fokker A (M.8) LA34, op Soesterberg. Detail motor." /></a> </div> <div class="text-encl_left">Fokker A (M.8) LA34, at Soesterberg. Detail motor. [at Beeldbank NIMH]</div></div></body></html>

post-170095-0-36517300-1439204485_thumb.jpg

post-170095-0-06766700-1439204599_thumb.jpg

Edited by WilkoJ
Link to post
Share on other sites

Partly correct 'Foxy Mod"

The Image is in fact a link , you might compare is with a thumbnail. I would like to behave the image (with the box-shadow) like a button. I managed to realize this partially, the right side of the shadow-box is not completely visible.

 

The attachment shows how it is without this 'feature'

 

Code of this particular attachment:

<div class="afbeelding_tek"> <div class="afbeelding_left" align="center"><a href="images/F/Fokker CIX-1A.jpg" target="_blank" type="image" class="jcepopup"><img src="images/F/Fokker_CIX-1A-SMALL.gif" alt="Fokker CIX-1A-SMALL" /></a> </div> <div class="tekst-tek_right">Fokker C.IX in the delivery scheme.</div></div>

 

I'd like to have the box-colour change when hovering over it, ckicking on it etc...

post-170095-0-86869400-1439203941_thumb.jpg

post-170095-0-08733100-1439204432_thumb.jpg

Edited by WilkoJ
Link to post
Share on other sites

The image with box-shadow only at bottom happens when you apply box-shadow to anchor link that is not using display: block; without it its height becomes 0px and all you see is the box-shadow.

 

Your images are confusing, they seem to have a frame effect and box-shadow added to that, if you wish that you need to use margin or padding on image or anchor links.

Link to post
Share on other sites

dsonesuk,

I don't quite understand what you mean with the .."anchor link not using display: block.." ?:

 

The image with box-shadow only at bottom happens when you apply box-shadow to anchor link that is not using display: block; without it its height becomes 0px and all you see is the box-shadow.

 

Your images are confusing, they seem to have a frame effect and box-shadow added to that, if you wish that you need to use margin or padding on image or anchor links.

 

I've changed things a bit';

I've removed the background. ( in CSS the line ..background-color:rgba(255,255,255,0.1);... ) I suppose thats the frame-effect you're talking about...

 

In CSS

..

div.img_enclose img, div.img_enclose div.img_left img, div.img_enclose div.img_right img{ width: 520px; height: auto; float:center;

box-shadow: 10px 10px 5px rgb(50,50,50);}

..

 

This shows a shadow as I would like.

 

For the linkproperties:

..

div.img_enclose div.img_right a:link img, div.img_enclose div.img_left a:linkimg, div.img_enclose-V div.img_right a:link img, div.img_enclose-V div.img_left a:link img, { box-shadow: 10px 10px 5px rgb(50,50,50);}div.img_enclose div.img_right a:hoverimg, div.img_enclose div.img_left a:hover img,div.img_enclose-V div.img_right a:hover img, div.img_enclose-V div.img_left a:hover { box-shadow: 10px 10px 5px rgb(200,200,200);}div.img_enclose div.img_right a:visited img,div.img_enclose div.img_left a:visited img, div.img_enclose-V div.img_right a:visited img,div.img_enclose-V div.img_left a:visited img { box-shadow: 10px 10px 5px rgb(120,120,120);}

...

 

When hovering over the image (a link..) the color of the shadow changes. Thats's one thing :)

But the shadow color doesn't change when I clicked om the image (weblink) ......I expected it to behave as a visited link, alas it doesn't.

Edited by WilkoJ
Link to post
Share on other sites

Anchor links by default are inline elements, so to display box shadow properly that surrounds entire image you have to make it a block element using display: block;Visited has a security issue, where it can be used to track where a user has been, only styling like borders, color, or background-color can be used to identify a visted link.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...