Position Değerinin Diğer Özellikleri Devre Dışı Bırakması

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Position Değerinin Diğer Özellikleri Devre Dışı Bırakması

Bu konudaki kullanıcılar: 2 misafir

2
Cevap 247
Tıklama 0
Öne Çıkarma

1. sayfa

Position Değerinin Diğer Özellikleri Devre Dışı Bırakması

Cevap Yaz

volkan2080

10 yıl

Teğmen

Konu Sahibi

Ana div'e position:relative verdim, input'lara da position:absolute; z-index:-1 verdim. Fakat şöyle bir sorun oluşuyor; input'lara verdiğim geçiş değerleri çalışmıyor. Çalışması için ne yapabilirim?

 
  <div class="hizmetler"> 
          <div class="hizmetler_baslik"> 
            <div class="hizmetler_icerik"> <img src="img/kucuk-logo.png" width="214" height="35" />'in size sunduğu hizmetler burada </div> 
          </div> 
          <div class="hizmet_liste"> 
            <input type="button" /> 
            <input type="button" /> 
            <input type="button" /> 
            <input type="button" /> 
            <input type="button" /> 
          </div> 
        </div> 
  /*=================================*/ 
  /*==========CSS BAŞLANGIÇ==========*/ 
  /*=================================*/ 
   
  .hizmetler { 
  	width: 100%; 
  	height: 319px; 
  	position: relative; 
  } 
  .hizmetler_baslik { 
  	width: 100%; 
  	height: 45px; 
  	text-align: center; 
  	background-color: #CCC; 
  	display: table; 
  	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
  	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
  	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
  } 
  .hizmetler_icerik { 
  	display: table-cell; 
  	vertical-align: middle; 
  } 
  .hizmet_liste { 
  } 
  .hizmet_liste input { 
  	width: 317px; 
  	height: 275px; 
  	background: none; 
  	border: 0; 
  	outline: none; 
  	position: absolute; 
  	z-index: -1; 
  	transition: All 1s ease; 
  	-webkit-transition: All 1s ease; 
  	-moz-transition: All 1s ease; 
  	-o-transition: All 1s ease; 
  	transform: scale(1); 
  } 
  .hizmet_liste input:nth-child(1) { 
  	background: url(../img/foto-1.png) no-repeat; 
  } 
  .hizmet_liste input:nth-child(1):focus { 
  	background: url(../img/foto-1-focus.png) no-repeat; 
  	transform: scale(1.300); 
  } 
  .hizmet_liste input:nth-child(2) { 
  	background: url(../img/foto-2.png) no-repeat; 
  	margin-left:160px; 
  } 
  .hizmet_liste input:nth-child(2):focus { 
  	background: url(../img/foto-2-focus.png) no-repeat; 
  	transform: scale(1.300); 
  } 
  .hizmet_liste input:nth-child(3) { 
  	background: url(../img/foto-3.png) no-repeat; 
  	margin-left:320px; 
  } 
  .hizmet_liste input:nth-child(3):focus { 
  	background: url(../img/foto-3-focus.png) no-repeat; 
  	transform: scale(1.300); 
  }

ApexiRubber

10 yıl

Yarbay

position:absolute neden kullanıyosun ? yani zoraki bir durum mu ? position:absolute zorunlu olmadıkça kullanılan bir tanımlama değil. Geçiş değerleri dediğin degrademi yoksa hover tanımlaması mı ? Anladığım şeyse;

normal değere bunu :transition:background .5s ease-in;
hover'a bunu : background:red;

yukarıda ki kodlarla dene birde focus yerine hover yaz.

Bu mesaja 1 cevap geldi.

volkan2080

10 yıl

Teğmen

Konu Sahibi

Teşekkür ederim çok basit bir yoldan durumu düzelttim.

Bu mesajda bahsedilenler: @ApeXiRubbEr

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Position Değerinin Diğer Özellikleri Devre Dışı Bırakması