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

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • UmairahMohd
    New Member
    • Nov 2013
    • 1

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

    Code:
    .theme-default #slider {
    	width:570px; /* Make sure your images are the same size */
    	height:227px; /* Make sure your images are the same size */
    	float: right;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    .theme-pascal.slider-wrapper,
    .theme-orman.slider-wrapper {
        margin-top:150px;
    }
    //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

    Code:
    <div id="container">
            <div id="slider">
              <div id="slides">
                <div class="slides_container">
    	 <div class="slide"> <span class="slide"><img src="http://bytes.com/images/slider/NursesDay1.jpg" width="440" height="220" alt="Slide 1" /></span> </div>
                  <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay2.jpg" width="440" height="220" alt="Slide 2" />
                  </div>
                  <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay3.jpg" width="440" height="220" alt="Slide 3" />
                  </div>
                    <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay4.jpg" width="440" height="220" alt="Slide 4" />
                  </div>
                   <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay5.jpg" width="440" height="220" alt="Slide 5" />
                  </div>
                </div>
                <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>
             <img src="http://bytes.com/images/slider/example-frame.png" name="frame" width="600" height="300" id="frame" /> </div>
          </div>
    	</div>
    Last edited by Dormilich; Nov 26 '13, 04:47 PM.
  • Exequiel
    Contributor
    • Jul 2012
    • 288

    #2
    You can try this one it will align your images horizontally because of the property float:left;
    Code:
    div.slide{
    	width:auto;
    	float:left;
    	}

    Comment

    Working...