[]
css div sorunu
div kullanımında, sayfayı tam ekran yaptığımda farklı, sayfanın boyutunu
değiştirdiğimde farklı bir görünüm oluyor,divler olması gereken yerde durmuyor.Bu sorunu nasıl çözebilirim.
değiştirdiğimde farklı bir görünüm oluyor,divler olması gereken yerde durmuyor.Bu sorunu nasıl çözebilirim.
position absolute kullanabilirsin, marginlerle de halledilebilir. duruma göre değişir.
- yuto
(02.02.12 18:59:45)
her çözünürlükte (pencere boyutunda) aynı görüntülenen bir layout oluşturmaya çalışıyorsanız işiniz çok zor hatta pratikte imkansız.
bunun dışında bir amacınız varsa çözümü ne elde etmek istediğinize göre değişir. daha fazla detay verin.
bunun dışında bir amacınız varsa çözümü ne elde etmek istediğinize göre değişir. daha fazla detay verin.
- blackdog (02.02.12 19:03:28)
resim yükleyerek ya da link vererek örnek gösterseydiniz sorunu daha iyi anlayıp sorunu giderme olasılığı daha yüksek bir cevap verilebilirdi.
genel geçer bir cevap vereceğim bu durumda.
div gibi html öğelerini stil vererek doğru şekilde konumlandırmanız ve boyutlandırmanız durumunda tarayıcının ebadına göre konumu ve görünümünün bozulmasını engelleyebilirsiniz. konumlandırma için öncelikle "position" adı verilen stil özelliğine absolute, relative gibi değerler atarsınız. absolute olarak konumlandırılan bir div'e daha sonra top (üst), left (sol), right (sağ), bottom (alt) değerleri de atayarak bu değerlere göre tarayıcının en sol üst noktası 0-0 koordinatları olmak üzere koordinat verirsiniz. Örneğin şöyle birşey yaparsanız <div style="position: absolute; left:100px; top:100px" bu div'in sol üst köşesi her türlü durumda tarayıcının sol üst köşesinden 100'er piksel aşağıda ve solda bulunan noktadan başlar. position özelliği için relative kullanırsanız bu sefer koordinatlarınızın 0-0 noktasını div'in içinde bulunduğu block elemanının sol üst köşesine göre ayarlayacaksınız demektir. eğer top ve left yerine right ve bottom kullanırsanız bu sefer tarayıcının (ya da divi kapsayan block elemanının) sağ alt köşesini koordinat sisteminizin merkezi yapmış olursunuz. Konumlandırma için float denen bir başka stil özelliğinden faydalanabilirsiniz. bu bir nevi kütüphanenize birşeyler dizmek gibidir. 5 tane 100 birim genişliğinde kitabınız (div'iniz) var diyelim ve bunları toplam 300 birim genişliğinde bir yere dizmek istiyorsunuz. tüm divlere style="float: left" derseniz ilk üç kitabı yanyana koyduktan sonra 4. kitap sığmadığı için bu bir alt rafa kendiliğinden kayar; ta ki siz rafı 400 birim genişliğe getirene kadar. margin denen stil özelliğini kullanarak bu kitapların (ya da divlerin) dizilirken aralarında ne kadar boşluk kalacağını da ayarlayabilirsiniz.
boyut konusuna gelirsek; div vd. elemanların boyutlarını iki türlü ayarlayabilirsiniz. birincisi piksel türü değerler atarsınız. bu durumda o div ne olursa olsun o yükseklik ve genişlikte kalır (<div style="width:100px; height:100px"> gibi). ikinci tür boyutlandırmada ise dive % olarak yükseklik ve genişlik atarsınız (<div style="width:100%; height:100%"> gibi). bu durumda div kendisini kapsayan elemanın boyutuna orantılı olarak genişler ya da daralır; veya uzar ya da kısalır. hiç bir stil tanımı yapmazsanız %100 genişlik vermişsiniz gibi yorumlar tarayıcılar bunu.
izahat karmaşık ya da yetersiz gelmiş olabilir. bir iki saatinizi css ile konumlandırmayı (positioning with css) anlatan bir dolu web sayfalarını okumaya ayırırsanız doyurucu bilgiler edinebilirsiniz.
genel geçer bir cevap vereceğim bu durumda.
div gibi html öğelerini stil vererek doğru şekilde konumlandırmanız ve boyutlandırmanız durumunda tarayıcının ebadına göre konumu ve görünümünün bozulmasını engelleyebilirsiniz. konumlandırma için öncelikle "position" adı verilen stil özelliğine absolute, relative gibi değerler atarsınız. absolute olarak konumlandırılan bir div'e daha sonra top (üst), left (sol), right (sağ), bottom (alt) değerleri de atayarak bu değerlere göre tarayıcının en sol üst noktası 0-0 koordinatları olmak üzere koordinat verirsiniz. Örneğin şöyle birşey yaparsanız <div style="position: absolute; left:100px; top:100px" bu div'in sol üst köşesi her türlü durumda tarayıcının sol üst köşesinden 100'er piksel aşağıda ve solda bulunan noktadan başlar. position özelliği için relative kullanırsanız bu sefer koordinatlarınızın 0-0 noktasını div'in içinde bulunduğu block elemanının sol üst köşesine göre ayarlayacaksınız demektir. eğer top ve left yerine right ve bottom kullanırsanız bu sefer tarayıcının (ya da divi kapsayan block elemanının) sağ alt köşesini koordinat sisteminizin merkezi yapmış olursunuz. Konumlandırma için float denen bir başka stil özelliğinden faydalanabilirsiniz. bu bir nevi kütüphanenize birşeyler dizmek gibidir. 5 tane 100 birim genişliğinde kitabınız (div'iniz) var diyelim ve bunları toplam 300 birim genişliğinde bir yere dizmek istiyorsunuz. tüm divlere style="float: left" derseniz ilk üç kitabı yanyana koyduktan sonra 4. kitap sığmadığı için bu bir alt rafa kendiliğinden kayar; ta ki siz rafı 400 birim genişliğe getirene kadar. margin denen stil özelliğini kullanarak bu kitapların (ya da divlerin) dizilirken aralarında ne kadar boşluk kalacağını da ayarlayabilirsiniz.
boyut konusuna gelirsek; div vd. elemanların boyutlarını iki türlü ayarlayabilirsiniz. birincisi piksel türü değerler atarsınız. bu durumda o div ne olursa olsun o yükseklik ve genişlikte kalır (<div style="width:100px; height:100px"> gibi). ikinci tür boyutlandırmada ise dive % olarak yükseklik ve genişlik atarsınız (<div style="width:100%; height:100%"> gibi). bu durumda div kendisini kapsayan elemanın boyutuna orantılı olarak genişler ya da daralır; veya uzar ya da kısalır. hiç bir stil tanımı yapmazsanız %100 genişlik vermişsiniz gibi yorumlar tarayıcılar bunu.
izahat karmaşık ya da yetersiz gelmiş olabilir. bir iki saatinizi css ile konumlandırmayı (positioning with css) anlatan bir dolu web sayfalarını okumaya ayırırsanız doyurucu bilgiler edinebilirsiniz.
- stopnsilence (02.02.12 19:03:55 ~ 19:06:09)
- edsy
(02.02.12 19:45:53)
soldaki div'e position: absolute ve left:5px top: 5px verin
sağdakine de position:absolute right:5px top:5px
sağdakine de position:absolute right:5px top:5px
- yuto (02.02.12 21:54:02)
1
