Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
freelance iş ilanları

CSS İle Dikey Hızalama

 12 Mesajlar 1.764 Okunma
lstbozum
smsonayhizmeti

#1
Machine Machine www.wptreni.com Kullanıcı
  • Üyelik 24.08.2012
  • Yaş/Cinsiyet 29 / E
  • Meslek Bilgisayar Programcılığı & FED
  • Konum Aksaray
  • Ad Soyad H** K**
  • Mesajlar 1041
  • Beğeniler 327 / 328
  • Ticaret 12, (%100)
Merhaba arkadaşlar,

CSS ile ilgili bir sıkıntım mevcut, kısaca şöyle anlatayım.

https://jsfiddle.net/895af2zt/

Örnekte gördüğünüz gibi dikey bir html elementim var bu elementin içinde yazı ve ikon mevcut. Bunu istediğim yükseklikte boyutlandırıyorum ancak görüntülendiği ekran boyutuna göre boyutlanmıyor.

Yani, ekran büyüdükçe içinde bulundu elementin yüksekliğine göre kendini ayarlaması gerekiyor ama bir türlü başaramadım.



Resimde gördüğünüz Vitrin elementi yanında ki resim elementiyle beraber aynı yükseklikte büyümesini istiyorum. Ekran büyüyüp, küçüldükçe aynı orantıda olsunlar.
 

 

wptreni.com |  Wordpress Blogu
wmaraci
reklam

#2
kodaylak kodaylak WM Aracı Kullanıcı
  • Üyelik 09.08.2018
  • Yaş/Cinsiyet 28 / E
  • Meslek Öğrenci
  • Konum Diğer
  • Ad Soyad G** U**
  • Mesajlar 93
  • Beğeniler 5 / 40
  • Ticaret 1, (%100)
letter-spacing: 10px;

Şu kodu eklerseniz olur gibi.
 

 

#3
Machine Machine www.wptreni.com Kullanıcı
  • Üyelik 24.08.2012
  • Yaş/Cinsiyet 29 / E
  • Meslek Bilgisayar Programcılığı & FED
  • Konum Aksaray
  • Ad Soyad H** K**
  • Mesajlar 1041
  • Beğeniler 327 / 328
  • Ticaret 12, (%100)

kodaylak adlı üyeden alıntı

letter-spacing: 10px;

Şu kodu eklerseniz olur gibi.


Aradığım bu değil hocam. Resimde ki görüntüye orantılamak değil benim derdim.

Şöyle anlatayım ekran ölçeği 100%'de iken sorunsuz bir şekilde birbirleriyle orantılı bir şekilde duruyorlar ancak ekran ölçeği 110 veya 120% gibi değerler olunca resimlerin bulunduğu kısım boyutlanıyor ama dikey olarak eklediğim elementin boyutu aynı kalıyor.

height: auto verdiğim zaman içerisinde ki yazıya göre boyutlanıyor, height: 100% verince de bulunduğu yeri komple kaplıyor sayfanın en sonuna kadar.

Şöyle anlatayım, ekran ölçeği 100% iken görüntü aşağıda ki gibi



Ama ekran ölçeği büyüdükçe görüntü bu şekilde oluyor;



Benim yapmak istediğim sol tarafta bulunan Vitrin elementi de sağ tarafında ki resim gibi ekran ölçeği büyüdükçe kendini ona göre boyutlandırsın.
 

 

wptreni.com |  Wordpress Blogu

#4
kodaylak kodaylak WM Aracı Kullanıcı
  • Üyelik 09.08.2018
  • Yaş/Cinsiyet 28 / E
  • Meslek Öğrenci
  • Konum Diğer
  • Ad Soyad G** U**
  • Mesajlar 93
  • Beğeniler 5 / 40
  • Ticaret 1, (%100)
Hocam şu kod sanırım dediğinize uyuyor, bir inceleyin. http://jsfiddle.net/LinkinTED/yJbUW/2/
 

 

wmaraci
wmaraci

#5
Mango Mango WM Aracı Kullanıcı
  • Üyelik 23.11.2015
  • Yaş/Cinsiyet 30 / E
  • Meslek Front-End Developer
  • Konum Bursa
  • Ad Soyad N** K**
  • Mesajlar 311
  • Beğeniler 8 / 81
  • Ticaret 0, (%0)
Dikey hizalamak için ya display: table ya da display: flex kullanılır. Aşağıda flex olanı anlattım. Hem daha basit ve efektif, hem de daha fazla tarayıcı desteği var.

Öncelikle parent div'e display: flex; diyoruz. Daha sonra içerisindeki elemana margin: auto; kodunu vererek hem dikey hem de yatay ortalamış oluyoruz. Yani kodlarınız aşağıdaki gibi olmalı.

https://jsfiddle.net/895af2zt/20/

Eğer yan yana bulunan 2 elemanın ölçeği birbirlerine göre otomatik şekillensin istiyorsanız, ikisinin ortak bulunduğu bir parent div oluşturup display: flex; kodunu ekleyin. Daha sonra altındaki elemanlar default olarak birbirlerinin uzunluğuna göre şekillenecektir.

img-div'e istediğiniz kadar resim ekleyerek deneyebilirsiniz.

Yardımcı olabileceğim başka bir konu varsa belirtebilirsiniz.
cgrclk

kişi bu mesajı beğendi.

#6
TheLacivert TheLacivert Invictus Maneo Kullanıcı
  • Üyelik 11.05.2012
  • Yaş/Cinsiyet 31 / E
  • Meslek Psikolog
  • Konum Ankara
  • Ad Soyad B** K**
  • Mesajlar 1400
  • Beğeniler 497 / 496
  • Ticaret 0, (%0)
CSS @media kurallarına bakabilirsin bunun için.
 

 

#7
triposi triposi Frontend Developer Kullanıcı
  • Üyelik 18.01.2013
  • Yaş/Cinsiyet 36 / E
  • Meslek Frontend Developer
  • Konum Samsun
  • Ad Soyad O** T**
  • Mesajlar 26
  • Beğeniler 8 / 12
  • Ticaret 23, (%100)
"jquery-match-height" kütüphanesi de işinizi görecektir. Kütüphaneyi tanımladıktan sonra js dosyasında tanımlarken belirlenecek class diğer divlere eklendiğinde, o alan içerisindeki tüm divler aynı yükseklikte olacaktır.

Demo: http://brm.io/jquery-match-height-demo/
İndir: https://github.com/liabru/jquery-match-height
 

 

#8
Machine Machine www.wptreni.com Kullanıcı
  • Üyelik 24.08.2012
  • Yaş/Cinsiyet 29 / E
  • Meslek Bilgisayar Programcılığı & FED
  • Konum Aksaray
  • Ad Soyad H** K**
  • Mesajlar 1041
  • Beğeniler 327 / 328
  • Ticaret 12, (%100)

TheLacivert adlı üyeden alıntı

CSS @media kurallarına bakabilirsin bunun için.


triposi adlı üyeden alıntı

"jquery-match-height" kütüphanesi de işinizi görecektir. Kütüphaneyi tanımladıktan sonra js dosyasında tanımlarken belirlenecek class diğer divlere eklendiğinde, o alan içerisindeki tüm divler aynı yükseklikte olacaktır.

Demo: http://brm.io/jquery-match-height-demo/
İndir: https://github.com/liabru/jquery-match-height


TheLacivert CSS @media kurallarını biliyorum hocam ancak her ekran çözünürlüğü için ayrı bir css satırı yazmak gerektirecek. Bundan kaçınmaya çalışıyorum açıkcası.

Sabit bir yükseklik değeri veriyorum html elementine heighr: 173px misal bu ayarladığım ekran çözünürlüğünde ve birkaç çözünürlüğe kadar sıkıntı yaratmıyor ancak ekran biraz daha büyüyünce sabit kalıyor yüksekliği.

Ben bunu şöyle yapmak istiyorum. 1366x768 çözünürlükte 173px olurken 1440x1024 misal bu değer de aynı orantıda büyümesini istiyorum.

triposi Maalesef hocam verdiğiniz javascript kütüphanesi benim yapıya uygun değil, çalışmadı ya da çalıştıramadım.
 

 

wptreni.com |  Wordpress Blogu

#9
kelebek kelebek WM Aracı Kullanıcı
  • Üyelik 11.05.2013
  • Yaş/Cinsiyet 32 / E
  • Meslek Geliştirici
  • Konum Malatya
  • Ad Soyad E** K**
  • Mesajlar 3142
  • Beğeniler 60 / 764
  • Ticaret 5, (%100)
Bunun için "vw" ve "vh" kullanabilirsin.

https://medium.com/@batuhangoksu/css-yeni-viewport-vw-vh-vmin-birimleri-b6f9b1e92d3f
 

 

#10
Machine Machine www.wptreni.com Kullanıcı
  • Üyelik 24.08.2012
  • Yaş/Cinsiyet 29 / E
  • Meslek Bilgisayar Programcılığı & FED
  • Konum Aksaray
  • Ad Soyad H** K**
  • Mesajlar 1041
  • Beğeniler 327 / 328
  • Ticaret 12, (%100)
kelebek
Merhaba hocam html yapısı şu şekilde:


Vitrin






Genel olarak html yapısı bu şekilde. Ben burada dikeykutu div elementi için yükseklik değerini ekran boyutuna göre kendiliğinde ayarlanmasını istiyorum. İçinde bulundu div classın yükseliği ne oluyorsa o değer alsın. Atıyorum 100px iken ekran büyüdüğü zaman 120px oluyorsa dikeykutu elementinin yükseliğide 120px olsun istiyorum. Bahsettiğiniz vh, vw, vmin,vmax değerlerini biliyorum ancak istediğim sonucu vermiyor ne yazık ki.
 

 

wptreni.com |  Wordpress Blogu
Yerli Tema Almalı mıyım ?
Tema Rengimi nasıl değiştirebilirim ?
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al