Positioning problem


<html>
<head>
<style type="text/css">

body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-family: 'Open Sans Condensed',sans-serif;
    font-size: 13px;
}
a {
    color: #555555;
    text-decoration: none;
}
a:hover {
    color: #000000;
}
.ei-slider {
    height: 400px;
    margin: 0 auto;
    max-width: 1920px;
    position: relative;
    width: 100%;
}
.ei-slider-loading {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
    color: #FFFFFF;
    height: 100%;
    left: 0;
    line-height: 400px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 999;
}
.ei-slider-large {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.ei-slider-large li {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}
.ei-slider-large li img {
    width: 100%;
}
.ei-title {
    margin-right: 13%;
    position: absolute;
    right: 50%;
    top: 30%;
}
.ei-title h2, .ei-title h3 {
    text-align: right;
}
.ei-title h2 {
    color: #B5B5B5;
    font-family: 'Playfair Display',serif;
    font-size: 40px;
    font-style: italic;
    line-height: 50px;
}
.ei-title h3 {
    color: #000000;
    font-family: 'Open Sans Condensed',sans-serif;
    font-size: 70px;
    line-height: 70px;
    text-transform: uppercase;
}
.ei-slider-thumbs {
    height: 13px;
    margin: 0 auto;
    position: relative;
}
.ei-slider-thumbs li {
    float: left;
    height: 100%;
    position: relative;
}
.ei-slider-thumbs li.ei-slider-element {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
    height: 100%;
    left: 0;
    position: absolute;
    text-indent: -9000px;
    top: 0;
    z-index: 10;
}
.ei-slider-thumbs li a {
    background: none repeat scroll 0 0 #666666;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 1px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: block;
    height: 100%;
    text-indent: -9000px;
    transition: background 0.2s ease 0s;
    width: 100%;
}
.ei-slider-thumbs li a:hover {
    background-color: #F0F0F0;
}
.ei-slider-thumbs li img {
    bottom: 50px;
    max-width: 100%;
    opacity: 0;
    position: absolute;
    transition: all 0.4s ease 0s;
    z-index: 999;
}
.ei-slider-thumbs li:hover img {
    bottom: 13px;
    opacity: 1;
}
.ei-title {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
    bottom: 10px;
    margin-right: 0;
    padding: 5px 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: auto;
    width: 100%;
}
.ei-title h2, .ei-title h3 {
    text-align: center;
}
.ei-title h2 {
    font-size: 20px;
    line-height: 24px;
}
.ei-title h3 {
    font-size: 30px;
    line-height: 40px;
}


ol, ul {
    list-style: none outside none;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
.islerimiz{
			margin:0;
			-webkit-box-shadow:0 0 5px #CCC, 0 0 400px #fff inset;
			-moz-box-shadow:0 0 5px #CCC, 0 0 400px #fff inset;
			box-shadow:0 0 5px #CCC, 0 0 400px #fff inset;
			-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=400,Direction=0,Color='#fff')";
			filter:progid:DXImageTransform.Microsoft.Shadow(Strength=400,Direction=0,Color='#fff');

			width:200px;
			/*height:315px;*/
			height:350px;
			z-index:100000;			
		cursor:default;
		overflow:hidden;
		}
		#acKapat{
		z-index:10000000;
	}

</style>
</head>

<body>
<div class="container">
	<div id="acKapat">
    	<a href="#">
        	<img src="images/icon.png" height="20" width="20" alt="tan&#305;mPanelAcKapat"/>
        </a>
    </div>
    <div class="islerimiz">
    </div>
            <div class="wrapper">
                <div id="ei-slider" class="ei-slider">
                    <ul class="ei-slider-large">
                        <li>
                            <img src="images/ISLER GORSELLER/1/isler_gorsel1.jpg" alt="image01" />
                        </li>
                        <li>
                            <img src="images/ISLER GORSELLER/2/isler_gorsel2.jpg" alt="image02" />
                        </li>
                        <li>
                            <img  src="images/ISLER GORSELLER/3/isler_gorsel3.jpg" alt="image03"/>
                        </li>
                        <li>
                            <img src="images/ISLER GORSELLER/4/isler_gorsel4.jpg" alt="image04"/>
                        </li>
                        <li>
                            <img src="images/ISLER GORSELLER/5/isler_gorsel5.jpg" alt="image05"/>
                        </li>
                        <li>
                            <img src="images/ISLER GORSELLER/6/isler_gorsel6.jpg" alt="image06"/>
                        </li>
                        <li>
                            <img src="images/ISLER GORSELLER/7/isler_gorsel7.jpg" alt="image07"/>
                        </li>
                        <li>
                            <img src="images/ISLER GORSELLER/8/isler_gorsel8.jpg" alt="image08" />
                        </li>
                        <li>
                            <img src="images/ISLER GORSELLER/9/isler_gorsel9.jpg" alt="image09" />
                        </li>
                        <li>
                            <img src="images/ISLER GORSELLER/10/isler_gorsel10.jpg" alt="image10" />
                        </li>
                    </ul>
                    <ul class="ei-slider-thumbs">
                        <li class="ei-slider-element">Current</li>
                        <li><a href="#" >Slide 1</a><img src="images/islergorsellerkucuk/isler_gorsel1.gif" alt="thumb01" /></li>
                        <li><a href="#" >Slide 2</a><img src="images/islergorsellerkucuk/isler_gorsel2.gif" alt="thumb02" /></li>
                        <li><a href="#" >Slide 3</a><img src="images/islergorsellerkucuk/isler_gorsel3.gif" alt="thumb03" /></li>
                        <li><a href="#" >Slide 4</a><img src="images/islergorsellerkucuk/isler_gorsel4.gif" alt="thumb04" /></li>
                        <li><a href="#" >Slide 5</a><img src="images/islergorsellerkucuk/isler_gorsel5.gif" alt="thumb05" /></li>
                        <li><a href="#" >Slide 6</a><img src="images/islergorsellerkucuk/isler_gorsel6.gif" alt="thumb06" /></li>
                        <li><a href="#">Slide 7</a><img src="images/islergorsellerkucuk/isler_gorsel7.gif" alt="thumb07" /></li>
                        <li><a href="#">Slide 8</a><img src="images/islergorsellerkucuk/isler_gorsel8.gif" alt="thumb07" /></li>
                        <li><a href="#">Slide 9</a><img src="images/islergorsellerkucuk/isler_gorsel9.gif" alt="thumb07" /></li>
                        <li><a href="#">Slide 10</a><img src="images/islergorsellerkucuk/isler_gorsel10.gif" alt="thumb07" /></li>
                    </ul>

    			</div>
   			 </div>

                </div><!-- ei-slider -->
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.eislideshow.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/blur.dev.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#ei-slider').eislideshow({
					easing		: 'easeOutExpo',
					titleeasing	: 'easeOutExpo',
					titlespeed	: 1200
                });
            });
        </script>
        <script type="text/javascript">
	var origWidth=$(".islerimiz").width();
	$('#acKapat').click(function(e){
                        e.preventDefault();
                        /*$(this).parent('.islerimiz').animate({'width': 0, 'opacity': 0 }, 'slow', 'linear' ,function(){

                        window.location=$(this).find('a').attr('href');

                        });*/
						width=$(".islerimiz").width();
						if(origWidth==width)
						$(".islerimiz").animate({'width': 0, 'opacity': 0 }, 'slow','swing');
						else
						$(".islerimiz").animate({ 'width': '200px','opacity':1 }, 'slow','swing');
					});
						
    </script>
    <script type="text/javascript">
		$(document).ready(function(){
			$('.islerimiz').blurjs({
				draggable: false,
				overlay: 'rgba(255,255,255,0.1)',
			});
		});
	</script>
</body>
</html>

i’m trying to do:


<div id="acKapat">
    	<a href="#">
        	<img src="images/icon.png" height="20" width="20" alt="tan&#305;mPanelAcKapat"/>
        </a>
    </div>
    <div class="islerimiz">
    </div>

appears on the img that slides but the blurred panel is staying at the top of images.how can i solve this problem?

Hi,

Do you have a link to the problem as its hard to work out what you want from the above code only?

It would also help if you could explain ina bit more detail what’s supposed to happen and what is actually happening.:slight_smile:

http://www.terranartworks.com/testsite/tsv1/islerimiz.html

i will put this site in another site with iframe tag.that page is:http://www.terranartworks.com/testsite/tsv1/index.html

as you see in this site,i have to decrease height of blurred panel to the beginning of bottom buttons and remove the scroll.besides i added blur script but it is not blurred the pictures.

Hi,

Thanks for the links :slight_smile:

I can see the image slider (which looks very interesting) but I’m not sure I can see the error you are mentioning. The slider seems to be working and I don’t see anything misplaced as such. It may just be that I am looking at the wrong thing or you are expecting a different display from the one I see.

Can you point me in the right direction to the elements that are causing you a problem or explain what it should look like?

yes.cause i fixed the errors after i asked the question:)
but i have another problem about my blur panel.it seems not blurred.i actually add script for this but it doesn’t work.