#basket
New messages Members Forum rules Search RSS
  • Page 1 of 1
  • 1
Sparks template slider help?
CosmicPoptartDate: Friday, 06.01.2012, 17:06 | Message # 1
Group: Users
Posts: 1
Awards: 0
Status: Offline
Okay, so I copied my slider in to the forum.

Now I have a problem.
When I move it in to the forum, it stretched it out?
How do I fix it?

I've already tried centering it.

Picture of Problem:
http://img407.imageshack.us/img407/2390/16201280215am.png

HTML Code; Forum; General Appearance of forum pages:

Code
<?if($MODULE_ID$='forum')?>
   <div id="forum-casing">
   <?else?>
   <div id="casing">
   <?endif?>
     
   <div class="slider-wrapper theme-default">
   <div class="ribbon"></div>
   <div id="slider" class="nivoSlider">
   <img src="$HOME_PAGE_LINK$images/slider1.jpg" alt="">
   <a href="http://ucoztemplates.com"><img src="$HOME_PAGE_LINK$images/slider2.jpg" alt="" title="This is an example of a caption"></a>
   <img src="$HOME_PAGE_LINK$images/slider3.jpg" alt="" data-transition="slideInLeft">
   <img src="$HOME_PAGE_LINK$images/slider2.jpg" alt="" title="#htmlcaption">
   </div>
   <div id="htmlcaption" class="nivo-html-caption">
   <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="http://ucoztemplates.com">a link</a>.
   </div>
   </div>


Slider CSS Code:
Code
/* The Nivo Slider styles */
.nivoSlider {
   position:relative;
}
.nivoSlider img {
   position:absolute;
   top:0px;
   left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:100%;
   border:0;
   padding:0;
   margin:0;
   z-index:6;
   display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
   display:block;
   position:absolute;
   z-index:5;
   height:100%;
}
.nivo-box {
   display:block;
   position:absolute;
   z-index:5;
}
/* Caption styles */
.nivo-caption {
   position:absolute;
   left:0px;
   bottom:0px;
   background:#000;
   color:#fff;
   opacity:0.8; /* Overridden by captionOpacity setting */
   width:100%;
   z-index:8;
}
.nivo-caption p {
   padding:5px;
   margin:0;
}
.nivo-caption a {
   display:inline !important;
}
.nivo-html-caption {
      display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
   position:absolute;
   top:45%;
   z-index:9;
   cursor:pointer;
}
.nivo-prevNav {
   left:0px;
}
.nivo-nextNav {
   right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
   position:relative;
   z-index:9;
   cursor:pointer;
}
.nivo-controlNav a.active {
   font-weight:bold;
}


Message edited by CosmicPoptart - Friday, 06.01.2012, 17:07
 
  • Page 1 of 1
  • 1
Search: