Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question positioning problem

    Code:
    <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:

    Code:
    <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?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I can’t visualize what you’re trying to do by just looking at the code but you saying something with “on top of images” seems to indicate that it has something to do with z-index. Play around with that and see what happens.

  • #3
    New Coder
    Join Date
    Apr 2013
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts
    http://www.terranart.../islerimiz.html


    i will put this site in another site with iframe tag.that page is:http://www.terranart...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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •