Jump to content

Search the Community

Showing results for tags 'box-shadow'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 2 results

  1. 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>
  2. i have been struggling with this for quite a while now... any suggestions? i am about to start tampering with the z-index...the html snippet is as follows: <div class="bodycont"> <div class="sidebar1"> </div> <div class="content"> <h1>Heading Here (as text H1 Chaparral Pro)<hr align="center" color="#c3c1ae" noshade size="1" width="98%" /></h1> <h2>Blah Blah (as text H2 Chaparral Pro)</h2> <p>Trebuchet MS - size 14 - Editable text in here Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p> <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> </div> </div> and the relative css is as follows: .bodycont {background: #fffde3;box-shadow: 0px 0px 136px 27px rgba(0, 0, 0, 0.42) inset;}.content {top: 10px;float: left;width: 649px;height: 700px;color: #343434;background: inherit;}.sidebar1 {top:10px;float: right;width: 310px;height: 700px;color: #343434;background: inherit;} the document is xhtml 1.0 transitional - and supposed to work in internet explorer, mozilla firefox, google chrome and apple safari, as well as opera. the latest versions will do which seems to work quite well, only i can just get the background and box-shadow to display on the topmost elements. if i make the background of the two children transparent or none - then the bodycont class does not have any background either. how would i get the bodycont class to display it's tan color with the inner box-shadow as specified?it's acting the same in all 5 browsers, thus it is something i do not know about, but what??? the screenshot displays with the content and sidebar1 classes having the box-shadow and it displaying, but only there and not on the bodycont class as the css specifies (see second screenshot).
  • Create New...