...

View Full Version : Cannot get horizontal scroll only vertical



cjdjackson2hot
05-01-2011, 12: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum