470,819 Members | 1,629 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,819 developers. It's quick & easy.

How to move the position of the image slider to the top right hand corner. Now its in

Expand|Select|Wrap|Line Numbers
  1. .theme-default #slider {
  2.     width:570px; /* Make sure your images are the same size */
  3.     height:227px; /* Make sure your images are the same size */
  4.     float: right;
  5.     margin-top: 0px;
  6.     margin-right: auto;
  7.     margin-bottom: 0;
  8.     margin-left: auto;
  9. }
  10. .theme-pascal.slider-wrapper,
  11. .theme-orman.slider-wrapper {
  12.     margin-top:150px;
  13. }
//Hi I am using a dreamweaver CS4.How to move the position of the image slider to the top right hand corner. Now its in the centre of the page and overlapping my other links.Do i have to change any codings on my CSS file as above. Kindly advise. Thank you
My HTML codings is as per below

Expand|Select|Wrap|Line Numbers
  1. <div id="container">
  2.         <div id="slider">
  3.           <div id="slides">
  4.             <div class="slides_container">
  5.      <div class="slide"> <span class="slide"><img src="http://bytes.com/images/slider/NursesDay1.jpg" width="440" height="220" alt="Slide 1" /></span> </div>
  6.               <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay2.jpg" width="440" height="220" alt="Slide 2" />
  7.               </div>
  8.               <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay3.jpg" width="440" height="220" alt="Slide 3" />
  9.               </div>
  10.                 <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay4.jpg" width="440" height="220" alt="Slide 4" />
  11.               </div>
  12.                <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay5.jpg" width="440" height="220" alt="Slide 5" />
  13.               </div>
  14.             </div>
  15.             <a href="#" class="prev"><img src="http://bytes.com/images/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev" /></a> <a href="#" class="next"><img src="http://bytes.com/images/slider/arrow-next.png" width="24" height="43" alt="Arrow Next" /></a> </div>
  16.          <img src="http://bytes.com/images/slider/example-frame.png" name="frame" width="600" height="300" id="frame" /> </div>
  17.       </div>
  18.     </div>
Nov 26 '13 #1
1 4980
Exequiel
288 256MB
You can try this one it will align your images horizontally because of the property float:left;
Expand|Select|Wrap|Line Numbers
  1. div.slide{
  2.     width:auto;
  3.     float:left;
  4.     }
  5.  
Nov 27 '13 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by csgraham74 | last post: by
India777
1 post views Thread by India777 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.