Add Image Aside slider

8 posts from 3 voices

• Started 1 year ago by brandiejm
• Latest reply from Dude
• This topic is not resolved

Tags:

• additional images
• Images
• index

1. 

   brandiejm
   Member

   Hello,

   I would like to add images on both sides of the slider I know this would be in the main index. But confused as to where?

   Posted 1 year ago #
2. 

   brandiejm
   Member

   This is what I was adding: <div class="leftkoolaid"></div>
   ??

   Posted 1 year ago #
3. 

   dsanders212
   Member

   I'm not official support but try placing the image with in the same div as the slider. That probably still want get you what you want, but may get you closer.

   Posted 1 year ago #
4. 

   Dude
   Dude

   Hey,
   1) Thanks dsanders212 for helping us out.

   2) brandiejm - if you need help with the implementation please post a link to your test server or website.

   Posted 1 year ago #
5. 

   brandiejm
   Member

   the website is http://blackfolkskoolaid.com

   I've tried to do this, but is shows messed up in Safari?

   Posted 1 year ago #
6. 

   Dude
   Dude

   Hey,
   I'd add the image by using an absolute positioned div. In index.php add your code after:
   

   <div class="wrapper" id='wrapper_featured_area'>

   Now position it by wrapping it in a div - i.e.like:
   

   <div class="sliderimage">
   image code
   </div>

   At least add following css to style.css:
   

   .sliderimage {
   position: absolute;
   left: 0px;
   top: 0px;
   }

   You can adjust the position values if you like.

   Posted 1 year ago #
7. 

   brandiejm
   Member

   Hello,

   Ok, so I got the images in there and place them in the correct order using css and firefox. I then go to safari and ie and they were WAY off! Any solution?

   I need a image on left and right of the slider to re-size for browser compatibility?
   For the image on the right I had a crazy margin-right of 1050px.... Should I have simply put float right?

   Help please...

   Posted 1 year ago #
8. 

   Dude
   Dude

   I'd change:
   

   /*koolaid characters*/
   .sliderimage {
   position: absolute;
   padding-left: 500px;
   top: 0px;
   float: right;
   }
   .sliderimage2 {
   position: absolute;
   left: 30px;
   top: 0px;
   }

   to:
   

   /*koolaid characters*/
   .sliderimage {
   position: absolute;
   right: 0px;
   top: 0px;
   }
   .sliderimage2 {
   position: absolute;
   left: 0px;
   top: 0px;
   }

   This will align the images to the left and to the right.

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.