html - CSS accordion pictures don't show on WordPress site -
i'm sure missing simple eluding me. trying css accordion work , have each section link page.
here source http://www.webarti.com/css3-horizontal-accordion-slider/content-slider/
here current test site: http://g6t.test-lca-website.com/
i have accordion part working (with 1 odd quirk, first bar disappears when move second bar, can dealt little later) pictures not show @ all. right have 1 picture assigned "payment processing" slider not showing.
this code:
<!-- css3 accordion --> <div class="accordion"> <!--[if ie ]><ul class="accordion-ie"><![endif]--> <!--[if !ie]>--><ul><!--<![endif]--> <li> <a href="##"><span>payment processing </span></a> <div> <img border="0" alt="" src="img/blank-card-bills.jpg"> </div> </li> <li> <a href="##"><span>prepaid visa/mastercard cards </span></a> <div> < </div> </li> <li> <a href="##"><span>banking software </span></a> <div> </div> </li> <li> <a href="##"><span>fx trading </span></a> <div> </div> </li> <li> <a href="##"><span>equities trading</span></a> <div> </div> </li> <li> <a href="##"><span>cfd trading</span></a> <div> </div> </li> </ul> </div> <!--css3 accordion --> i have folder in root of site called img 755 permissions set. have tried putting folder in wp-content/ folder see if made difference. did not.
i have tried using image working fine (i.e. logo) , not load logo in slider. logo, used full url http (as used).
update: image used readily available it's url (i can't put more 2 links here till 10 rep, take base site url add in /img/blank-card-bills.jpg)
any/all suggestion welcomed , appreciated!
forgot include css:
/* css3 horizontal accordion slider / video gallery version: 1.0 author: webarti author url: http://www.webarti.com/ */ /*********** global styles ***********/ body { background-color:#1a77b8; color:#1e1c21; font-family:arial; font-size:13px; padding:0 0 15px 0; margin:0; } .container { -moz-border-radius:8px; -webkit-border-radius:8px; background-color:#111111; border:1px solid #2c2c2c; margin:90px auto 25px auto; padding:30px; width:830px; } .header { color:#666; font-family:verdana; font-size:30px; font-style:italic; height:65px; letter-spacing:-1px; margin:0 0 0 -20px; padding:25px 0 0 8px; position:absolute; text-shadow:-1px -1px 0 #000000; top:7px; width:900px; word-spacing:5px; } /*********** theme styles ***********/ .accordion {font-family: arial, helvetica, sans-serif;} .accordion>ul>li>a { -moz-box-shadow:inset 1px 0px 0px 0px #485cbd; -webkit-box-shadow:inset 1px 0px 0px 0px #485cbd; box-shadow:inset 1px 0px 0px 0px #485cbd; filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#320bb8', endcolorstr='#320078'); background:-webkit-gradient( linear, right top, left top, color-stop(0.05, #320bb8), color-stop(1, #320078) ); background:-moz-linear-gradient( right center, #320bb8 5%, #320078 100% ); background-color:#320bb8; border-style:solid; border-color:#321d85; color:#ffffff; font-size:15px; font-weight:bold; text-decoration:none; text-shadow:-1px -1px 0px #3227b0; } .accordion>ul>li>a:hover{ filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#320078', endcolorstr='#320bb8'); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #320078), color-stop(1, #320bb8) ); background:-moz-linear-gradient( top center, #320078 5%, #320bb8 100% ); background-color:#9b0629; } .accordion>ul>li>div { background-color:#000000; color:#ffffff; } /******** theme structure *********/ .accordion>ul>li>div { height:304px; padding:10px; width:600px; } .accordion>ul>li>a { border-width:0 1px 0 0; width:40px; } ul.accordion-ie>li>a>span { /* ie */ margin-left:10px; /* value necessary centering rotated texts in internet explorer. */ } .accordion { width:825px; /* value refers total width of visible components width = accordion>ul>li>div ( width + paddingright + paddingleft ) + accordion>ul>li>a ( number of accordions x ( width + borderrrightwidth ) ) width = ( 600px + 10px + 10px ) + ( 5 x ( 40px +1px ) ) width = 825px */ } .accordion, .accordion>ul>li>a { height:324px; /* value refers total height of visible area height = accordion>ul>li>div ( height + paddingtop + paddingbottom ) width = ( 304px + 10px + 10px ) width = 324px */ } .accordion>ul>li { margin-right:-620px; /* value refers negative of total width of content <div> margin-right = accordion>ul>li>div (width + padding-right + padding-left) margin-right = 600px + 10px + 10px margin-right = 620px */ width:661px; /* width = .accordion>ul>li>div ( width + padding-right + padding-left ) + .accordion>ul>li>a ( width + border-right ) width = ( 600px + 10px + 10px ) + ( 40px + 1px ) width = 661px */ /* transition effect */ transition: margin-right 0.3s ease 0.2s; -moz-transition: margin-right 0.3s ease 0.2s; -webkit-transition: margin-right 0.3s ease 0.2s; -o-transition: margin-right 0.3s ease 0.2s; } /******* not change folllowing properties **********/ .accordion {overflow:hidden;} .accordion>ul {list-style:none;padding:0;margin:0;width:9999em;} .accordion>ul>li {float:left;overflow:hidden;} .accordion>ul>li>a {float:left;position:relative;z-index:1;-moz-outline-style:none;outline:none;} .accordion>ul>li>a>span{ /* text rotation browsers */ -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -ms-writing-mode:lr-bt; filter: progid:dximagetransform.microsoft.basicimage(rotation=3); bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap; } ul.accordion-ie >li>a>span {cursor:pointer;width:auto;} /* ie */ .accordion>ul>li>div {float:left;overflow:auto;} .accordion>ul>li:hover {margin-right:0px;} ul.accordion-ie>li:hover {margin-right:0px;} /* ie */
you try changing display property none , using onclick in javascript change property display:block afterwards so:
<div id="accordiandiv" onclick = "appear"></div> and
function appear() { div = document.getelementbyid("accordiandiv"); div.style.display = "none"; }
Comments
Post a Comment