Giriş Yap / Kayıt Ol

WM Aracı'na üyelikler tekrar açıldı! Kayıt olmak için TIKLAYIN!

3Beğeni
  • 2 Yazan TEHET
  • 1 Yazan TEHET

Cevap Yaz Favorilerime Ekle
Seçenekler Stil
Geri Git   Forum > > HTML - CSS - XML

Z-Index Yardım

  #1  
Okunmamış 26 Mart 2019, 01:48
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 30 Ekim 2013
Cinsiyet: Erkek
Meslek: Öğrenci
Ad, Soyad: Fa... Ço...
Mesajlar: 443
Beğeniler: 45 / 150
Ticaret: 7, 100%
Merhaba arkadaşlar,
Aşağıdaki görseldeki gibi bir şablon oluşturdum. Tüm kutucukların altına yani tüm ekranı google maps koymak istiyorum. z-index vermeme rağmen olmadı yardımcı olursanız sevinirim.



HTML
HTML Kodu:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sunum</title>
<link href='style1.css' rel='stylesheet'>
</head>

<body>


<div class="grid-container">
  <div id="map">
    <div class="left-side">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
    </div>
    <div class="right-side">
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
    </div>
    <div class="bottom-side">
      <div class="b1"></div>
      <div class="b2"></div>
    </div>
    <div class="logo-left"></div>
    <div class="logo-right"></div>
  </div>
</div>

<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzVWNVDoBdXY6kxdxX4rYuZDkk9VZUsSg&callback=initMap"
    async defer></script>-->


</body>
</html>
CSS
HTML Kodu:
html, body, .grid-container { height: 100%; margin: 0; }

.grid-container * { 
 position: relative;
}

.grid-container *:after { 
 position: absolute;
 top: 0;
 left: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas: "map map map map map" "map map map map map" "map map map map map" "map map map map map";
}

#map {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 1fr 1fr 1fr;
  grid-template-areas: "logo-left . . . logo-right" "left-side . . . right-side" "left-side . . . right-side" "left-side bottom-side bottom-side bottom-side right-side";
  grid-area: map;
}

.left-side {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "a" "b" "c";
  grid-area: left-side;
}

.a { grid-area: a; }

.b { grid-area: b; }

.c { grid-area: c; }

.right-side {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "d" "e" "f";
  grid-area: right-side;
}

.d { grid-area: d; }

.e { grid-area: e; }

.f { grid-area: f; }

.bottom-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "b1 b2";
  grid-area: bottom-side;
}

.b1 { grid-area: b1; }

.b2 { grid-area: b2; }

.logo-left { grid-area: logo-left; }

.logo-right { grid-area: logo-right; }
  #2  
Okunmamış 26 Mart 2019, 05:32
TEHET Adlı Üyenin Avatarı
dribbble.com/TEHET
 
Üyelik Tarihi: 04 Ekim 2014
Yaş / Cinsiyet: 27 / Erkek
Meslek: İşletmeci
Konum: Ankara
Ad, Soyad: Mu... Ak...
Mesajlar: 724
Beğeniler: 316 / 74
Ticaret: 1, 100%


Böyle bir şey mi?
fatihclkl ve RecepDemirel bunu beğendi.
  #3  
Okunmamış 26 Mart 2019, 10:17
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 30 Ekim 2013
Cinsiyet: Erkek
Meslek: Öğrenci
Ad, Soyad: Fa... Ço...
Mesajlar: 443
Beğeniler: 45 / 150
Ticaret: 7, 100%
TEHET teşekkürler oldu hocam
  #4  
Okunmamış 26 Mart 2019, 13:22
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 30 Ekim 2013
Cinsiyet: Erkek
Meslek: Öğrenci
Ad, Soyad: Fa... Ço...
Mesajlar: 443
Beğeniler: 45 / 150
Ticaret: 7, 100%
TEHET haritayı neden hareket ettiremiyorum acaba ?
  #5  
Okunmamış 26 Mart 2019, 18:08
TEHET Adlı Üyenin Avatarı
dribbble.com/TEHET
 
Üyelik Tarihi: 04 Ekim 2014
Yaş / Cinsiyet: 27 / Erkek
Meslek: İşletmeci
Konum: Ankara
Ad, Soyad: Mu... Ak...
Mesajlar: 724
Beğeniler: 316 / 74
Ticaret: 1, 100%
Alıntı:
fatihclkl Adlı Üyeden Alıntı
TEHET haritayı neden hareket ettiremiyorum acaba ?
Çünkü haritanın üzerinde #map id'li div var. Bu div tüm haritanın üzerini kapatıyor. Eğer boyutunu küçültürseniz veya içindeki sol-sağ divlerine position:relative kullanırsanız harita hareket ettirilebilir.

Şöyle bir şey olabilir. Ortadaki boş alan üzerinden hareket ettirilir.

fatihclkl bunu beğendi.
  #6  
Okunmamış 26 Mart 2019, 19:01
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 30 Ekim 2013
Cinsiyet: Erkek
Meslek: Öğrenci
Ad, Soyad: Fa... Ço...
Mesajlar: 443
Beğeniler: 45 / 150
Ticaret: 7, 100%
TEHET teşekkürler işe yaradı
Cevap Yaz Favorilerime Ekle


Konuyu toplam 1 kişi okuyor. (0 üye ve 1 Ziyaretçi)
 
Seçenekler
Stil
Normal Normal

Geri Git   Forum > HTML - CSS - XML


Yetkileriniz
Konu açma yetkiniz: Yok
Cevap Yazma Yetkiniz Yok
Eklenti yükleme yetkiniz: Yok
Mesajınızı değiştirme yetkiniz: Yok

BB code: Açık
İfadeler: Açık
[IMG] Kodları: Açık
HTML kodu: Kapalı




Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şu anki Zaman: 18:47.