CSS Uzmanlarına Birkaç Soru
-
Merhaba arkadaşlar,
Css uzmanlarına şöyle birkaç sorum olacaktı:
1. Bir div'e position: fixed; top: 0; left: 0; değerlerini verdiğimde istediğim konumda bulunuyor fakat tarayıcının boyutunu yatay olarak küçülttüğümde div'in içeriği alta doğru uzuyor ve yükseklik artıyor. Niçin yükseklik bozulmadan aşağıda yatay bir scroll çıkmıyor?
2. İç içe div kullandığımda, dıştaki div'e verdiğim bazı özellikler içteki div'e uygulanmıyor. Dıştaki div'e overflow: auto; verdiğimde problem çözülüyor. Neye göre ve nerede kullanmalıyım bu overflow'u? Ve bu problem niçin bazen çıkarken bazen çıkmıyor?
3. Sola yaslı bir panel düşünün (sidebar), top: 0; left: 0; bottom: 0; niteliklerine sahip olan. Sayfa yüksekliği arttığında bottom: 0; olmasına rağmen, bu sidebar niçin görünmüyor, azıcık scroll olduğunda kayboluyor? Yani sidebar niçin sadece ekranın yüksekliğini alıyor?
Çözünürlüğe göre uygun, sağlam css tasarımları için en çok nelere dikkat etmeli/özen göstermeliyim?
Birkaç sorum daha olacaktı fakat şu an aklıma gelmedi. Geldiğinde konudan yazacağım.
Yardım etmeye çalışanlara şimdiden teşekkürlerimi iletirim.
Not: Sorunları internette arayarak çözebilirdim fakat yorumlarınızı almak istedim. Bu şekilde daha öğretici oluyor.
-
wking bunu yazdı
Merhaba arkadaşlar,
Css uzmanlarına şöyle birkaç sorum olacaktı:
1. Bir div'e position: fixed; top: 0; left: 0; değerlerini verdiğimde istediğim konumda bulunuyor fakat tarayıcının boyutunu yatay olarak küçülttüğümde div'in içeriği alta doğru uzuyor ve yükseklik artıyor. Niçin yükseklik bozulmadan aşağıda yatay bir scroll çıkmıyor?
2. İç içe div kullandığımda, dıştaki div'e verdiğim bazı özellikler içteki div'e uygulanmıyor. Dıştaki div'e overflow: auto; verdiğimde problem çözülüyor. Neye göre ve nerede kullanmalıyım bu overflow'u? Ve bu problem niçin bazen çıkarken bazen çıkmıyor?
3. Sola yaslı bir panel düşünün (sidebar), top: 0; left: 0; bottom: 0; niteliklerine sahip olan. Sayfa yüksekliği arttığında bottom: 0; olmasına rağmen, bu sidebar niçin görünmüyor, azıcık scroll olduğunda kayboluyor? Yani sidebar niçin sadece ekranın yüksekliğini alıyor?
Çözünürlüğe göre uygun, sağlam css tasarımları için en çok nelere dikkat etmeli/özen göstermeliyim?
Birkaç sorum daha olacaktı fakat şu an aklıma gelmedi. Geldiğinde konudan yazacağım.
Yardım etmeye çalışanlara şimdiden teşekkürlerimi iletirim.
Not: Sorunları internette arayarak çözebilirdim fakat yorumlarınızı almak istedim. Bu şekilde daha öğretici oluyor.
1. Cevap: overflow: auto ibaresi ekleyebilirsin.
2. Cevap: overflow scroll barlardır. yani sağda çıkan kayar çubuk. auto yaptığında bu çubuklar gerektiği zaman çıkar. çıktığı zaman da (sanırım 7px'ti) divin içeriği bir miktar küçülür bu da haliyle kelimelerin bir alta kayabilmesini doğurur.
3. Cevabı verecektim fakat sorunu pek anlamadım biraz daha görsel olarak enazından açıklarsan daha iyi olur
Diğerlerinin cevabını tek tek vericem burayı editleyip
by_Tet tarafından 26/Oca/13 19:44 tarihinde düzenlenmiştir -
by_Tet bunu yazdıwking bunu yazdı
Merhaba arkadaşlar,
Css uzmanlarına şöyle birkaç sorum olacaktı:
1. Bir div'e position: fixed; top: 0; left: 0; değerlerini verdiğimde istediğim konumda bulunuyor fakat tarayıcının boyutunu yatay olarak küçülttüğümde div'in içeriği alta doğru uzuyor ve yükseklik artıyor. Niçin yükseklik bozulmadan aşağıda yatay bir scroll çıkmıyor?
2. İç içe div kullandığımda, dıştaki div'e verdiğim bazı özellikler içteki div'e uygulanmıyor. Dıştaki div'e overflow: auto; verdiğimde problem çözülüyor. Neye göre ve nerede kullanmalıyım bu overflow'u? Ve bu problem niçin bazen çıkarken bazen çıkmıyor?
3. Sola yaslı bir panel düşünün (sidebar), top: 0; left: 0; bottom: 0; niteliklerine sahip olan. Sayfa yüksekliği arttığında bottom: 0; olmasına rağmen, bu sidebar niçin görünmüyor, azıcık scroll olduğunda kayboluyor? Yani sidebar niçin sadece ekranın yüksekliğini alıyor?
Çözünürlüğe göre uygun, sağlam css tasarımları için en çok nelere dikkat etmeli/özen göstermeliyim?
Birkaç sorum daha olacaktı fakat şu an aklıma gelmedi. Geldiğinde konudan yazacağım.
Yardım etmeye çalışanlara şimdiden teşekkürlerimi iletirim.
Not: Sorunları internette arayarak çözebilirdim fakat yorumlarınızı almak istedim. Bu şekilde daha öğretici oluyor.
1. Cevap: overflow: auto ibaresi ekleyebilirsin.
2. Cevap: overflow scroll barlardır. yani sağda çıkan kayar çubuk. auto yaptığında bu çubuklar gerektiği zaman çıkar. çıktığı zaman da (sanırım 7px'ti) divin içeriği bir miktar küçülür bu da haliyle kelimelerin bir alta kayabilmesini doğurur.
3. Cevabı verecektim fakat sorunu pek anlamadım biraz daha görsel olarak enazından açıklarsan daha iyi olur
Diğerlerinin cevabını tek tek vericem burayı editleyip
1. overflow: auto; istediğim şey değil. Mesela Twitter'ın giriş sayfasına gel. Tarayıcıyı yatay olarak küçültmeye başla, bir yerden sonra kullanıcı adı ve şifre kısmı ekrana sığmıyor ve aşağıda scroll çıkıyor. Fakat hiçbir şeyin yüksekliği, genişliği değişmiyor.
2. Bu soruyu sanırım anlayamamışsın hocam ya da ben seni anlayamadım. overflow: auto; yazmadığımda niçin içteki div dıştaki div'e ait olmuyor? Ve bu her zaman için geçerli olmuyor. Bazen overflow yazmaya gerek kalmıyor.
3. Ekran çözünürlüğü 1280x800 olduğunu varsay ve aşağıdaki siteye girdin. Bir sidebar bir de content var. Content içeriği doldu ve sayfa aşağıya doğru taştı, scroll çıktı. Bu durumda sen 801. pikselden itibaren sidebar'ın bittiğini görüyorsun. Bunun sebebini merak ediyorum. Ben bottom: 0; vermeme rağmen sayfa scroll olduğunda sidebar uzamıyor.
-
wking bunu yazdıby_Tet bunu yazdıwking bunu yazdı
Merhaba arkadaşlar,
Css uzmanlarına şöyle birkaç sorum olacaktı:
1. Bir div'e position: fixed; top: 0; left: 0; değerlerini verdiğimde istediğim konumda bulunuyor fakat tarayıcının boyutunu yatay olarak küçülttüğümde div'in içeriği alta doğru uzuyor ve yükseklik artıyor. Niçin yükseklik bozulmadan aşağıda yatay bir scroll çıkmıyor?
2. İç içe div kullandığımda, dıştaki div'e verdiğim bazı özellikler içteki div'e uygulanmıyor. Dıştaki div'e overflow: auto; verdiğimde problem çözülüyor. Neye göre ve nerede kullanmalıyım bu overflow'u? Ve bu problem niçin bazen çıkarken bazen çıkmıyor?
3. Sola yaslı bir panel düşünün (sidebar), top: 0; left: 0; bottom: 0; niteliklerine sahip olan. Sayfa yüksekliği arttığında bottom: 0; olmasına rağmen, bu sidebar niçin görünmüyor, azıcık scroll olduğunda kayboluyor? Yani sidebar niçin sadece ekranın yüksekliğini alıyor?
Çözünürlüğe göre uygun, sağlam css tasarımları için en çok nelere dikkat etmeli/özen göstermeliyim?
Birkaç sorum daha olacaktı fakat şu an aklıma gelmedi. Geldiğinde konudan yazacağım.
Yardım etmeye çalışanlara şimdiden teşekkürlerimi iletirim.
Not: Sorunları internette arayarak çözebilirdim fakat yorumlarınızı almak istedim. Bu şekilde daha öğretici oluyor.
1. Cevap: overflow: auto ibaresi ekleyebilirsin.
2. Cevap: overflow scroll barlardır. yani sağda çıkan kayar çubuk. auto yaptığında bu çubuklar gerektiği zaman çıkar. çıktığı zaman da (sanırım 7px'ti) divin içeriği bir miktar küçülür bu da haliyle kelimelerin bir alta kayabilmesini doğurur.
3. Cevabı verecektim fakat sorunu pek anlamadım biraz daha görsel olarak enazından açıklarsan daha iyi olur
Diğerlerinin cevabını tek tek vericem burayı editleyip
1. overflow: auto; istediğim şey değil. Mesela Twitter'ın giriş sayfasına gel. Tarayıcıyı yatay olarak küçültmeye başla, bir yerden sonra kullanıcı adı ve şifre kısmı ekrana sığmıyor ve aşağıda scroll çıkıyor. Fakat hiçbir şeyin yüksekliği, genişliği değişmiyor.
2. Bu soruyu sanırım anlayamamışsın hocam ya da ben seni anlayamadım. overflow: auto; yazmadığımda niçin içteki div dıştaki div'e ait olmuyor? Ve bu her zaman için geçerli olmuyor. Bazen overflow yazmaya gerek kalmıyor.
3. Ekran çözünürlüğü 1280x800 olduğunu varsay ve aşağıdaki siteye girdin. Bir sidebar bir de content var. Content içeriği doldu ve sayfa aşağıya doğru taştı, scroll çıktı. Bu durumda sen 801. pikselden itibaren sidebar'ın bittiğini görüyorsun. Bunun sebebini merak ediyorum. Ben bottom: 0; vermeme rağmen sayfa scroll olduğunda sidebar uzamıyor.
Hocam birinci dediğini mantığım almadı. Yani Hangi div olacakmış ki tarayıcıyla beraber küçülecekmiş? Senin width ve heighti belirledikten sonra hiçbirşekilde değişmez.
Bu anlattığın kodları yüzeysel olarak değil de kodlarıyla http://jsfiddle.net/ adresine eklersen sorununa çare bulabiliriz belki. Bulabiliri(z) diyorum çünkü kendimi okadar kalın kafalı hissettim ki :) Ben yardımcı olamazsam başkası yardımcı olur belki ama yalnız sorunları açıklama şeklin çok absürt geldi.
Yani somut bir şekilde göstersen daha mantıklı hadi herşeyi geçtim yalnızca kodlarını buraya koysan "hatam nerde?" desen hatanı sana söyleyebilirdim ki daha önce çoğu kişiye böyle yardım ettim ama seni anlayamadım pek kusura bakma :)
-
Hocam bende pek birşey anlamadım,açıkcası merakta ettim kodları paylaşırsan yada tam olarak ne istediğini örnekleyebilirsen filan yardımcı oluruz.Tarayıcı boyutuna göre büyütüp küçültmek istiyorsan mediaquery(css) dosyasını indirip işlem yapabilirsin.
onparlak tarafından 26/Oca/13 20:28 tarihinde düzenlenmiştir -
çözünürlükler farklı olunca pikselli değerler atayınca farklı ekranlar ve çözünürlüklerde sorunlara neden oluyor, en iyisi left right gibi x ve y eksenlerindeki hizlamalarda %'li değerler kullanmak veya javascript ile ekranın çözünürlüğüne göre hesap yaptırıp belli bir piksel atamak geçen gün bu konuya benzer bir konu açmıştım burayı incelersen eminim çözüm bulursun: http://www.tahribat.com/Forum-Farkli-Cozunurluklerde-Kayma-Sorunu-172262/
-
Responsive tasarım mantığını kullanman lazım bence media query yani
Bir örnek verecek olursam mesela ekran çözünürlüğü 980px altına düşünce şöyle davran gibi
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {width: 94%;}
#content {width: 65%;}
#sidebar {width: 30%;}
}
detay için http://sanagrafi.com/2011/12/responsive-web-design