CSS ile sayfalarımızı ve elementlerimizi ortalamak
CSS’de kullandığımız içerik alanlarını (blok-level ve inline-level) elementleri nasıl oratalayacağımızı göreceğiz. Inline-level elementleri text-align:center özelliğini kullanarak ortalayabiliriz. Blok-level elementleri ortalamak için ise bir iki metod vardır. Sırası ile inceleyelim.
1- Genişleyebilir blok-level elementleri ortalamak
.ortala
{
margin-left: 10%;
margin-right: 10%;
}
<p class="ortala">Lorem Ipsum is simply dummy text of the printing and typesettingindustry. </p>
Genişliği sabit olmayan, genişleyebilir blok-level elementlerin ortalanması için bu metod kullanılır. Tüm web tarayıcılı bu metodu destekler.
2- Sabit genişlik atanan blok-level elementlerini ortalamak
2.a. margin auto ile genişliği belirlenmiş elementleri ortalamak
Mantık olarak, içerik blokunun sağ ve sol margin değerlerine auto ataması yapıyoruz.
W3C’de bu konu hakkında şu ifade mevcuttur: "Eğer margin-left ve margin-right değerleri auto verilirse bu blokun ortalanması anlamına gelir."
.ortala2
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
NN4 (Mac and Win), Win/IE4, Win/IE5, Win/IE5.5, Win/IE6 (Garip mod : quirks-mode) web tarayıcılıar bu kodu desteklememektedir.
Bu sorunu aşabilemke için iki satır kod yazmamız yeterli olacaktır.(NN4 hariç)
Bu metodu desteklemeyen web tarayıcıları için body etiketine text-align:center ataması yaptığımızda sorun çözülmüş demektir.
body
{
text-align: center;
}
.ortala2
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
Yanlız bir sorunumuz daha var. text-align:center ataması body içindeki tüm elementlerin ortalanmasına neden olacaktır. Bunu engellemek için bir katman oluşturup bu katman da hizalama değerini başlangıç değerine(yani sola yaslamalıyız) çevirmeliyiz.
body
{
text-align: center;
}
.ortala2
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}
Bu kodlama tüm web tarayıcılarında çalışacaktır.(NN4 hariç)
2.b. Konumlandırma(positioning) kullanılan elementlerin negatif margin ile ortalanması
Göreceli konumlandırılmış elementleri ortalamak için bu metod kullanılabilir. Bu metod da bir önceki gibi fazladan bir katman kullanmaya gerek yoktur. Genişlik tanımı yapılan göreceli konumlandırılmış elementin margin-left değeri element genişliğinin yarısı(1/2) kadar verilerek sağlanır.
.ortala3 {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
Burada sizlere bir iki metodla element ortalamayı gösterdik. Siz kullandığınız yer ve ihtiyaçlarınıza göre bunlardan birini kullanabilirsiniz.
gibi
hocam eline,parmaklarına saglık.ne zamandır arıyordum ie6 da ortalamayı.demek mantık bu imiş.
ben bunu hep css sayfası içinde değilde direk kodlarda uyguluyordum.dolayısıyla html bir sayfada hepsine tek tek yapmak zorundaydım.
içerik
şeklinde neyseki bu yazını okudum.tekrar teşekkürler.
Çok faydalı oldu , sağolasın.
[...] CSS ile sayfalarımızı ve elementlerimizi ortalamak bölümündeki metodu uygulayarak sayfamızı ortalayabilriz. [...]
Çok teşekkürler. Sayenizde div tagımı en sonunda ie6 da ortalatabildim.
kodum bu. Burada şöyle bir sorun var left olan yerde menülerim var ve sayfa aşağı büyüdükçe aşağıya kayıyor. dediğiniz gibi absolute yaptım. bu sefer mainbodydeki yazılar kısalınca alt taraf yukarı geliyor ve menu belirlediğim karenin dışına çıkıyor. Burada nasıl bir yol izlemem gerekir.
Kodlar için çok teşekkürler, ellerinize sağlık.
Şu aşağıdaki kodu buna ansıl entegre edebilirim acaba bir türlü beceremedim çünki. Şimdiden teşekkürler.
#stylefour{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(images/bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#stylefour ul{margin:0;padding:0;list-style-type:none;width:auto;}
#stylefour ul li{display:block;float:left;margin:0;}
#stylefour ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(images/bgDIVIDER.gif) no-repeat top right;}
#stylefour ul li a:hover,#stylefour ul li a.current{color:#B30000;background:#fff url(images/bgON.gif) no-repeat top right;}
1. .ortala3 {
2. width: 720px;
3. position: relative;
4. left: 50%;
5. margin-left: -360px;
6. }
verdiğiniz en sonununcu olan bu örnek gerçekten çok işe yaradı üstelik çok zekice tebrik ediyorum teşekkrüler
Tek kelime ile mükemmel bir kaynak. Yardımlarınız için çok teşekkür ederim.
kusura bakma ard arda yazıyorum az önce farkettim kategori yazısı normal ama yorum yazısı biraz alta kayıyor onu nasıl düzeltebilirim?