PDA

View Full Version : Cannot get horizontal scroll only vertical



cjdjackson2hot
05-01-2011, 01:35 PM
Hi guys, firstly this is a HTML & CSS question..... I have implemented a simple accordion using jquery which I got from this site: http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/

I am not advertising the site above, but i thought if someone wants to look at the original code to help solve my problem this was the best way to do it.

I have tried sending a message to the site owner however haven't had a response. I have implemented it on a test page for now which can be viewed here: http://www.chrisjacksonphoto.co.uk/weddingupdate.html

If you click on the 'Ceremony & formals' tab you will see a selection of images which are all display vertically and tiling down rather than displaying on the same line and scrolling horizontally WITHIN that particular slide.

I have tried putting a div inside the < dd > tags but it doesn't work.

I have a successful horizontal scrolling div using a div and the overflow auto code, on the wedding.html page of my site and this is the div i tried copying into my slide but it just causes a vertical scroll.

Here is the code relating to the accordion:

head:




<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyAccordion.js"></script>
<script type="text/javascript" src="utility.js"></script>

<style type="text/css">


/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */

.easy-accordion{display:block;position:relative; padding:0;margin:0}
.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
.easy-accordion dt,.easy-accordion dd{position:absolute}
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
.easy-accordion dd{z-index:1;opacity:0}
.easy-accordion dd.active{opacity:1;}
.easy-accordion dd.no-more-active{z-index:2;opacity:1}
.easy-accordion dd.active{z-index:3}
.easy-accordion dd.plus{z-index:4}
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}


/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */

dd p{line-height:120%}

#accordion-2{width:1010px;height:540px;padding:5px; background:#fff}
#accordion-2 h2{font-size:2.5em;margin-top:5px}
#accordion-2 dl{width:1010px;height:540px; background:#fff}
#accordion-2 dt{height:32px;line-height:32px;text-align:right;padding:2px 5px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff; color:#26526c}
#accordion-2 dt.active{cursor:pointer;color:#68889b; background:#fff}
#accordion-2 dt.hover{color:#0071ca;}
#accordion-2 dt.active.hover{color:#0071ca}
#accordion-2 dd{padding:25px; background:#fff}
#accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-2 .active .slide-number{color:#fff}
#accordion-2 a{color:#68889b}
#accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}

</style>




main html:




<div id="accordion-2">
<dl>
<dt>The Engagement Session</dt>
<dd><img src="images/mammoths/img1.png" alt="Engagement images here" /></dd>
<dt>The Preparations</dt>
<dd><img src="images/mammoths/img2.png" alt="Preparations images here" /></dd>
<dt>The Ceremony & The Formals</dt>
<dd>

<img src="images/weddings/photos/m_crombie/mcromb07.jpg"/>
<img src="images/weddings/photos/m_crombie/kathrob006.jpg"/>
<img src="images/weddings/photos/m_crombie/kathrob008.jpg"/>
<img src="images/weddings/photos/m_crombie/kathrob010.jpg"/>
<img src="images/weddings/photos/phil_oldham/mattmaggie009.jpg"/>
<img src="images/weddings/photos/phil_oldham/mattmaggie010.jpg"/>
<img src="images/weddings/photos/phil_oldham/philchris002.jpg"/>
<img src="images/weddings/photos/phil_oldham/philchris005.jpg"/>
<img src="images/weddings/photos/mark_caroline_selwood/008.jpg"/>
<img src="images/weddings/photos/mark_caroline_selwood/012.jpg"/>

</dd>
<dt>The Moment between Moment's</dt>
<dd><img src="images/mammoths/img4.png" alt="formals images here" /></dd>
<dt>The Reception</dt>
<dd><img src="images/mammoths/img4.png" alt="reception images here" /></dd>
<dt>The Albums & Prints</dt>
<dd><img src="images/mammoths/img4.png" alt="albums and prints images here" /></dd>

</dl>
</div>




Please help if you can as I need to get this rolled out on all gallery pages within the next few days

Thank you in advance to anybody who contributes