Bilgiler
  • Ekleyen:
  • Ayberk Atasay
  • Tarih:
  • December 13, 2008
  • Kategori:
  • CSS
  • Paylas:
CSS ile Ortalama

Kendime ilk kez bir blog kurma fikri geldiginde bunu kuralina gore oynayarak hem yeni teknolojilere ayak uydurmak, hem kullaniminin avantajlarindan yararlanmak, hem de daha sonra uygulanabilecek temalar icin daha kolay bir hazirlama sureci saglamakti.

Ilk hazirladigim CSS temasini Design Disease temasinin stillerini birazda kendime gore degistirerek kullanmistim. Fakat daha sonra kendime daha kisisel daha guzel bir tema hazirlama istegi dogdu. Bu sirada beni en cok oyalayan aslinda cok basit bir cozumu olan siteyi ekran cozunurlugune gore ortalamakti.

Bunun icin kullanacagimiz kod margin: 0 auto;

Genel Kod Kullanimi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Ortalama</title>
<style>
#Cerceve{margin: 0px auto;background: #ccc;width:300px;}
</style>
</head>
<body>
<div id="Cerceve">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry?s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</body>
</html>


ornegi gormek icin tiklayiniz.
Yorumlar
  • Eski Yorumlar:
  • Ibrahim CAKICI
  • CSS ile tasarim yaparken bu ozellik cok hemde cok isinize yarayacak, bilmenizde kesinlikle fayda var. Ben bile ayberk abi sayesinde sorarak yeni ogrendim. Tesekkur ederim bu guzel yazi icin. :)
  • 2008-12-13 11:10:35
  • scorpion
  • paylasim icin tesekkurler
  • 2008-12-14 16:53:09
  • mcakir
  • birsey sormak istiyorum, burda verilen CSS'miz daha dogrusu bizi etkileyen kod surasi; #Cerceve{margin: 0 auto;background: #ccc;width:300px;} benim anlamadigim nokta(af buyrun bilmiyorum) bolumun(div'in) ortalanmasini saglayan hangi kod... yani #ccc kodu renk kodu width'i zaten biliyoruz benim tek tahmin edebildigim margin kodu kaliyor...margin'de dis kenar boslugu manasinda oldugundan bunun can alici noktasi margin'e bicilen 0 ve auto degerleri mi olacaktir...cevaplarsaniz sevnrm...
  • 2008-12-28 15:02:39
  • Ayberk Atasay
  • @mcakir; Seninde dedigin gibi bizim div elemanimizin ortalanmasini saglayan kullanilan margin etiketi. Burdaki durumu kisaca soyle aciklayayim (daha sonra margin ve padding ile iligli genis bir konu yazicam) margin dedigin gibi elemanlarin dis objelerle olan birbirine olan ozelliklerini gosterir. Burda 0 olan ust ve alt, auto olan sag ve soldan uzakliklari gosterir. Auto is bulundugu alana gore kendisi otomatik bir ortalama saglar. Ornegin; genislik 500 ve cercevemiz 300 ise sag ve soldan 75 er pixellik bos olan birakir ve kendini ortalar. Umarim anlatabilmisimdir. Dedigim gibi daha soinra daha ayrintili bu ozellik kullanimi ile ilgili bir yazi ekleyecegim.
  • 2008-12-29 09:10:59
  • mcakir
  • @ Ayberk : aciklamaniz icin tesekkur ederim.. Yazilarinizi bekliyorum, bu CSS yi ogrenmeyi cok istiyorum, Fatih Hayrioglu'nun kitabiyla da sadece olmuyor illaki biirlerinin anlatimina ihtiyac duyuluyor, ne de olsa sifir temel atmaya calisiyoruz....Baslik(RSS)'nize uye oluyorum....
  • 2008-12-29 15:31:55
  • Yusuf
  • hocam ie7 de bu ozellik calismiyor buna esdeger ama ie7 de calisan baska bir ortalama kodu var mi ?
  • 2009-06-17 05:15:46
  • Ayberk Atasay
  • Bir yerde hata yapiyor olabilirsin. Cunku bu basit bir css kodu ve her tarayicida uyumlu. margin: 0px auto; yazdigindan emin olman yeter.. yada ornek gosterirsen sevinirim.
  • 2009-06-17 14:17:47
  • QNFUPDuKpztNhP
  • Oh yeah, fabuluos stuff there you!
  • 2011-08-24 14:52:21