Showing posts with label image always stick to left css. Show all posts
Showing posts with label image always stick to left css. Show all posts

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/