positioning problem

sweetysweety · July 29, 2013

<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ı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><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ı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?

davej · July 29, 2013

How about reposting this with some substitute (online) images? Or put this online and post a link.

sweetysweety · July 30, 2013

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.

davej · August 10, 2013

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

Looking at the above, it isn't obvious to me what it is you want to change. You have a problem with your switch-case statement which I described in the other thread here...

http://w3schools.invisionzone.com/index.php?showtopic=48228&hl=

...and you have a slight problem with a few z-index values and such. Other than that you will have to describe the problem more clearly.

sweetysweety · August 12, 2013

ok.i changed switch case but i don't want to use switch case for this.

i want to do that on islerimiz page,when i every click on grey buttons on bottom,the article appearing on the blurred panel on left side will be change according to its releated picture.

i mean:

<div class="islerimiz">    	<img id="icerikPic1" src="imajlar/ISLERGORSELLER/1/1-bilgiler.png" alt="islerimizTanım"/>    </div>

i want to change src of this img tag when i click on:

<ul class="ei-slider-thumbs">                        <li class="ei-slider-element">Current</li>                        <li><a href="#" >Slide 1</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel1.gif" alt="thumb01" /></li>                        <li><a href="#" >Slide 2</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel2.gif" alt="thumb02" /></li>                        <li><a href="#" >Slide 3</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel3.gif" alt="thumb03" /></li>                        <li><a href="#" >Slide 4</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel4.gif" alt="thumb04" /></li>                        <li><a href="#" >Slide 5</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel5.gif" alt="thumb05" /></li>                        <li><a href="#" >Slide 6</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel6.gif" alt="thumb06" /></li>                        <li><a href="#">Slide 7</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel7.gif" alt="thumb07" /></li>                        <li><a href="#">Slide 8</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel8.gif" alt="thumb08" /></li>                        <li><a href="#">Slide 9</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel9.gif" alt="thumb09" /></li>                        <li><a href="#">Slide 10</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel10.gif" alt="thumb10" /></li>                    </ul>

every a tags of this list items.and the src of the img inside islerimiz div change according to its src.for example if the page was 1st picture and user clicks 4th picture link,the src of img tag inside of div will be:imajlar/ISLERGORSELLER/4/4-bilgiler.png

then while picture seen on the picture was 5th picture and then when user click 10th picture,the src of img tag inside div tag will be: imajlar/ISLERGORSELLER/10/10-bilgiler.png

thats the problem i want to solve

davej · August 12, 2013

How could your image path be so strange?

<script>$(function() {  $(".ei-slider-thumbs li a").on("click",function(){     //alert('click2');                 //var $image = $(".islerimiz").children("img");     var index = $(".ei-slider-thumbs li a").index(this);                 alert('click2 index='+index);     index++;     //var pname = 'Islerimiz_files/isler_gorsel'+ index +'.png';     var pname = 'imajlar/ISLERGORSELLER/'+ index +'/'+ index +'-bilgiler.png';     $("#icerikPic1").attr("src", pname);                   });});</script>

Edited August 12, 2013 by davej

sweetysweety · August 13, 2013

yeap it worked:))thank you so much for your help.

i have file structure for everything so my image path is strange.actually the designer department gives name for images:)

Sign In

positioning problem

Recommended Posts

sweetysweety

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

sweetysweety

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

sweetysweety

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

sweetysweety

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity