Align floating Image using CSS

Last Reply 4 months ago By chetan

Posted 4 months ago

I am working on dubaiexporters.com.

Recently i have added floating images(left and right side).

It goes below footer.

i dont know why its happening but if i set the height of both images as (height:320px;),it does not go.

i have used below css and javascript:

css:

        .emi {
             position:absolute;
             width: 150px;
             height: 320px;
             bottom: 40px;
			 z-index: 1000;
	}
	#emi_l div{float:right; font-size:11px;}
		#emi_l div a{color:#FFF; text-decoration:underline;}
	#emi_l { left: 5px; }
        .zindex { z-index: -999; }

        .emi1 {
             position:absolute;
             width: 150px;
             height: 320px;
             bottom: 40px;
			 z-index: 1000;
	}
	#emi_l1 div{float:right; font-size:11px;}
		#emi_l1 div a{color:#FFF; text-decoration:underline;}
	#emi_l1 { right: 5px; }
	.zindex { z-index: -999; }

Javscript:

<script type="text/javascript">
jQuery(document).ready(function($){
  var $banner = $('.emi'), $window = $(window);
  var $topDefault = parseFloat($banner.css('top'), 10);
        
  $window.on('scroll', function() {
    var $top = $(this).scrollTop();
    $banner.stop().animate( { top: $top + $topDefault }, 500, 'easeOutCirc' );
  });

  var $wiBanner = $banner.outerWidth() * 2;
  function zindex(maxWidth){
    if( $window.width() <= maxWidth + $wiBanner ) {
      $banner.addClass('zindex');
    } else {
      $banner.removeClass('zindex');
    }
  }
});
function hide(){
 $('#emi_l').hide('slow');
}

</script>
<script type="text/javascript">
jQuery(document).ready(function($){
  var $banner = $('.emi1'), $window = $(window);
  var $topDefault = parseFloat( $banner.css('top'), 10 );
  $window.on('scroll', function() {
    var $top = $(this).scrollTop();
    $banner.stop().animate( { top: $top + $topDefault }, 1000, 'easeOutCirc' );
  });

  var $wiBanner = $banner.outerWidth() * 2;
  function zindex(maxWidth){
    if( $window.width() <= maxWidth + $wiBanner ) {
      $banner.addClass('zindex');
    } else {
      $banner.removeClass('zindex');
    }
  }
});
function hide()
{
 $('#emi_l1').hide('slow');
}

</script>

 

<html><body>
.
..
....
...

<div class="emi" id="emi_l">
<div><a onClick="javascript: hide()">Close [x]</a></div>
<%--<a href="https://www.expogr.com/eite/" onclick="javascript: safari()"><img src="images/EITE_DE 01.jpg" alt="Ethiopia International trade exhibition 2019" border="0" title="Ethiopia International trade exhibition 2019"></a>--%>

<a href="https://www.expogr.com" onclick="javascript: safari()"><img src="images/expoafrica.jpg" alt="Ethiopia International trade exhibition 2019" border="0" title="Ethiopia International trade exhibition 2019"></a>
</div>

      <div class="emi1" id="emi_l1">
<div><a onClick="javascript: hide()">Close [x]</a></div>
<%--<a href="https://www.expogr.com/eite/" onclick="javascript: safari()"><img src="images/EITE_DE 01.jpg" alt="Ethiopia International trade exhibition 2019" border="0" title="Ethiopia International trade exhibition 2019"></a>--%>

<a href="https://www.expogr.com" onclick="javascript: safari()"><img src="images/expoafrica.jpg" alt="Ethiopia International trade exhibition 2019" border="0" title="Ethiopia International trade exhibition 2019"></a>
</div>  
</body></html>

Any help will be appreciated.

Posted 4 months ago

hi Sir...

i already got the solution of this.

i have included top property in .emi class and it worked for me.

.emi 
{
    position:absolute;
    width: 150px;
    height: 320px;
    bottom: 40px;
    top:65px;
    z-index: 1000;
}