/    Sign up×
Community /Pin to ProfileBookmark

positioning problem

Copy linkTweet thisAlerts:
Jul 29.2013

[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&#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>

[/CODE]

i’m trying to do:

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

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

to post a comment
CSS

0Be the first to comment 😎

×

Success!

Help @sweetysweety spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...