SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.terranartworks.com/testsi...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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Thanks for the links

    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?

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

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