CSS Width Kullanımı
- Konuyu başlatan EmreEfe
- Başlangıç Tarihi
- Mesaj 5
- Görüntüleme 3.060
-
- Etiketler
- css width width full size width screen size
- Katılım
- 22 Ocak 2016
- Mesajlar
- 5.804
- Makaleler
- 9
- Çözümler
- 8
Daha fazla
- Cinsiyet
- Erkek
Eğer PC, laptop, tablet ve telefon'da farklı gözüküyor ise responsive tasarımı araştırman gerekiyor.
KS
KS
EmreEfe
Hectopat
- Katılım
- 14 Kasım 2015
- Mesajlar
- 222
Daha fazla
- Cinsiyet
- Erkek
Sadece girdiğim bilgisayardan genişlik ekrana tam otursun istiyorum.
ibimsonik
Hectopat
- Katılım
- 22 Şubat 2014
- Mesajlar
- 13
Kod:
width:100vw;Responsive Web Design Viewport
Difference between Width:100% and width:100vw?
- Katılım
- 29 Ağustos 2014
- Mesajlar
- 2.961
Daha fazla
- Cinsiyet
- Erkek
Biraz geçmiş konunun üzerinden ama başkasınında başına gelir diye yazayım ben. Header cismini tam sığdırmak için genişlik değeri vermenize gerek yok sadece yükseklik değeri verirseniz zaten tam olarak kaplar. Belli ki tüm elemanların padding ve margin değerlerini sıfırlamadınız o yüzden üsten ve sol taraftan boşluk kaldı. Onu da aşağıda (başında yıldız işarati olan satır) gösterdim.
Kod:
<html>
<head>
<title>Document</title>
<style>
*{padding: 0px; margin: 0px;}
header{height: 60px; background: #176093;}
</style>
</head>
<body>
<header></header>
</body>
</html>
Eldar
Hectopat
- Katılım
- 15 Aralık 2014
- Mesajlar
- 163
- Çözümler
- 2
Daha fazla
- Cinsiyet
- Erkek
Bu konuya şöyle birşey eklemem lazım. Eğer bir elementin width, height değeri 100% e ulaşmıyorsa onu kapsayan bir üst elementi kontrol etmeniz gerekiyor. Bir elementin 100% değeri üst elementin ona bıraktığı alanla sınırlıdır. Örnek vermek gerekirse Header elementini yanlışlıkla bir div içine koydunuz ve o dive 500px bir alan ayırdınız, içindeki header veya başka ne koyarsanız koyun 100% dediğinizde 500px anlamına gelir veya 50% yazdığınızda 500px / 2 = 250px anlamına gelir. Eğer üst elementin sınırlarını değiştiremiyorsanız bunu çözmek için birkaç farklı yol vardır.
1- Position değerini absolute yada fixed olarak değiştirmek
Bu şekilde element üst grup elemanları position relative olmadığı sürece 100% olarak büyür ama sanki bir yüksekliği veya genişliği yokmuş gibi alt, üst, sağ, sol elemanları onun yerini kapmaya çalışır ve altına girerler. Bunuda diğer elemanlara padding yada margin vererek düzeltebilirsiniz. Yinede bu yol çok sağlıklı değildir.
2- vh, vw değerleri kullanımı
Bu değerler % işareti yerine kullanılabilir. vh: Görünen bölüm yüksekliği, vw: Görünen bölüm genişliği anlamına gelir ve ekranınızın genişliği 1200px ise 100vw 1200px demek olacaktır.
Yinede size ilk başta üst elementin limitlerini kaldırmayı öneririm.
1- Position değerini absolute yada fixed olarak değiştirmek
Bu şekilde element üst grup elemanları position relative olmadığı sürece 100% olarak büyür ama sanki bir yüksekliği veya genişliği yokmuş gibi alt, üst, sağ, sol elemanları onun yerini kapmaya çalışır ve altına girerler. Bunuda diğer elemanlara padding yada margin vererek düzeltebilirsiniz. Yinede bu yol çok sağlıklı değildir.
2- vh, vw değerleri kullanımı
Bu değerler % işareti yerine kullanılabilir. vh: Görünen bölüm yüksekliği, vw: Görünen bölüm genişliği anlamına gelir ve ekranınızın genişliği 1200px ise 100vw 1200px demek olacaktır.
Yinede size ilk başta üst elementin limitlerini kaldırmayı öneririm.
