Sunday, January 8, 2012

CSS: Image always stick to left/right

File: styles.css
<style>
.btn_right {
 width: 50px; 
 height: 112px; 
 position: fixed; 
 right: 0pt; 
 top: 62px; 
 margin: 0px; 
 display: block;
}

.btn_left {
 width: 50px; 
 height: 112px; 
 position: fixed; 
 left: 0px; 
 top: 50%; 
 margin: -45px 0px 0px; 
 cursor: pointer; 
 display: block;
}

.btn_close_right {
 display: inline-block; 
 margin-left:30px; 
 width: 20px; 
 height: 18px; 
 background: url('close_icon.png') 0px 0px no-repeat; 
 cursor:pointer;
}
</style>

File: buttons.html
<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- button always stick right -->
<div class="btn_right">
 <img style="cursor:pointer;" src="btn_right.png">
 <br>
 <div class="btn_close_right"></div>
</div>

<!-- button always stick left -->
<div class="btn_left">
 <img src="btn_left.png">
 <br>
 <img src="close_icon.png">
</div>

Positioning Tutorial: http://www.barelyfitz.com/screencast/html-training/css/positioning/

5 comments:

  1. Thanks for this information; I hope it will use much reader who looking you regularly likes me…
    Regards,
    Angularjs training in chennai

    ReplyDelete
    Replies
    1. This is an amazing blog,it gives very helpful messages to us.Besides that Wisen has established as Best Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry

      Delete
  2. I have used your blog as reference for the class training and also for my personal project development.
    Answer Key 2017

    ReplyDelete