Mehmet Bey cevabınız için teşekkürler. Sorunumu Boostrap ile değil de javascript ile çözme yolunu tercih ettim. Kodları da daha sonra bu konuda problem yaşayan arkadaşlar için yazacağım. Bu arada bu asansör imaj değil divlerle oluşturdum. Yinede çok teşekkürler cevabınız için.
Burada yazan kodlar asansörün yüksekliğe göre duyarlı hale gelmesi için. Eğer anlaşılmayan bie yer olursa soran arakadaşlara detaylı bir şekilde anlatabilirim.
$( window ).resize(function() {
var yuk = $(window).height();
var boslukyuk=yuk-15;
var katyuk = yuk/11;
var kat10= (katyuk/2);
var kat9=(katyuk+kat10);
var kat8=(katyuk+kat9);
var kat7=(katyuk+kat8);
var kat6=(katyuk+kat7);
var kat5=(katyuk+kat6);
var kat4=(katyuk+kat5);
var kat3=(katyuk+kat4);
var kat2=(katyuk+kat3);
var kat1=(katyuk+kat2);
var kat0=(katyuk+kat1);
var up9= kat9;
var up8= kat8;
var up7= kat7;
var up6= kat6;
var up5= kat5;
var up4= kat4;
var up3= kat3;
var up2= kat2;
var up1= kat1;
var call0up=kat0;
var call1up=up1;
var call2up=up2;
var call3up=up3;
var call4up=up4;
var call5up=up5;
var call6up=up6;
var call7up=up7;
var call8up=up8;
var call9up=up9;
var call1down=kat1;
var call2down=kat2;
var call3down=kat3;
var call4down=kat4;
var call5down=kat5;
var call6down=kat6;
var call7down=kat7;
var call8down=kat8;
var call9down=kat9;
var call10down=kat10;
if(yuk< 400){
alert("Eğer pencerenin yüksekliğini bu denli düşürürseniz hareketini düzgün gözlemleyemeyeceksiniz.");
}
$("#bina").css("height",yuk);
$ ("#bosluk").css("height",boslukyuk);
$("#call0up").css("top",call0up);
$("#call1up").css("top",call1up);
$("#call2up").css("top",call2up);
$("#call3up").css("top",call3up);
$("#call4up").css("top",call4up);
$("#call5up").css("top",call5up);
$("#call6up").css("top",call6up);
$("#call7up").css("top",call7up);
$("#call8up").css("top",call8up);
$("#call9up").css("top",call9up);
$("#call1down").css("top",call1down);
$("#call2down").css("top",call2down);
$("#call3down").css("top",call3down);
$("#call4down").css("top",call4down);
$("#call5down").css("top",call5down);
$("#call6down").css("top",call6down);
$("#call7down").css("top",call7down);
$("#call8down").css("top",call8down);
$("#call9down").css("top",call9down);
$("#call10down").css("top",call10down);
});
Aşağıda yazan kodlar ise html5 ile oluşturduğum div lerin kodları.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<style>
body {
background-image: url("https://i.hizliresim.com/WQqm7E.gif");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none
}
#bina {
position: relative;
left: -20px;
top: 0px;
width: 130px;
background: #ecaf2f;
height: 640px;
margin: 0 auto;
overflow: hidden;
border: 1px solid #ecaf2f;
border-radius: 15px;
padding-bottom: 30px;
}
#gostergekenar {
width: 42px;
height: 20px;
background: #000;
position: absolute;
left: 28px;
top: -1px;
background-color: #000;
}
#gosterge {
width: 10px;
height: 10px;
background-color: #000;
}
#gosterge {
width: 30px;
height: 18px;
background: #808080;
position: relative;
left: 6px;
top: 1px;
color: #000;
font-family: Symbol;
font-weight: bold;
}
#bosluk {
background: #AAA;
width: 50px;
height: 610px;
top: 20px;
margin: 0 auto;
position: relative;
}
#asansorboslugu {
position: absolute;
height: 60px;
width: 50px;
bottom: 0px;
background-color: #000;
}
#asansor {
background-image: url("https://i.hizliresim.com/G0ma9v.jpg");
height: 60px;
overflow: hidden;
width: 50px;
position: absolute;
background-size: 100% 100%;
}
#sagkapi {
width: 50%;
height: 60px;
background-color: #918B8B;
float: right;
overflow: hidden;
}
#solkapi {
width: 50%;
height: 60px;
background-color: #918B8B;
float: left;
overflow: hidden;
}
#call0up {
top: 590px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call1up {
top: 530px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call1down {
top: 530px;
height: 15px;
width: 15px;
right: 21px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call2up {
top:475px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call2down {
top: 475px;
height: 15px;
width: 15px;
right: 21px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call3up {
top: 420px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call3down {
top: 420px;
height: 15px;
width: 15px;
right: 21px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call4up {
top: 365px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call4down {
top: 365px;
height: 15px;
width: 15px;
right: 21px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call5up {
top: 310px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call5down {
top: 310px;
height: 15px;
width: 15px;
right: 21px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call6up {
top: 255px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call6down {
top: 255px;
height: 15px;
width: 15px;
right: 21px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call7up {
top: 200px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call7down {
top: 200px;
height: 15px;
width: 15px;
right: 21px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call8up {
top: 145px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call8down {
top: 145px;
height: 15px;
width: 15px;
right: 21px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call9up {
top: 90px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call9down {
top: 90px;
height: 15px;
width: 15px;
right: 21px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
#call10down {
top: 40px;
height: 15px;
width: 15px;
right: 3px;
position: absolute;
z-index: 1;
border: 1px solid #00a3e4;
border-radius: 50%;
}
.up {
background-image: url("https://i.hizliresim.com/y36g0M.png");
height: 30px;
overflow: hidden;
width: 30px;
position: absolute;
background-size: 100% 100%;
}
.down {
background-image: url("https://i.hizliresim.com/6XadJk.png");
height: 30px;
overflow: hidden;
width: 30px;
position: absolute;
background-size: 100% 100%;
}
.down:hover {
filter: grayscale(80%);
}
.up:hover {
filter: grayscale(80%);
}
.down:active {
transform: translateY(2px);
}
.up:active {
transform: translateY(2px);
}
#canvas #katsecimi ul li:active {
transform: translateY(2px);
}
</style>
<link rel="shortcut icon" href="/images/tiga.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Asansör Denemesi</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="bina">
<div id="gostergekenar">
<div class="abc" id="gosterge" > 0 - </div>
</div>
<div id="call1up" class="up"></div>
<div id="call2up" class="up"></div>
<div id="call3up" class="up"></div>
<div id="call4up" class="up"></div>
<div id="call5up" class="up"></div>
<div id="call6up" class="up"></div>
<div id="call7up" class="up"></div>
<div id="call8up" class="up"></div>
<div id="call9up" class="up"></div>
<div id="call0up" class="up"></div>
<div id="call1down" class="down"></div>
<div id="call2down" class="down"></div>
<div id="call3down" class="down"></div>
<div id="call4down" class="down"></div>
<div id="call5down" class="down"></div>
<div id="call6down" class="down"></div>
<div id="call7down" class="down"></div>
<div id="call8down" class="down"></div>
<div id="call9down" class="down"></div>
<div id="call10down" class="down"></div>
<div id="bosluk">
<div id="asansorboslugu">
<div id="asansor">
<div id="sagkapi"></div>
<div id="solkapi"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Kolay Gelsin.
