Konular

EBooklar

Yapacağınız bir sitenin, sayfanın tam ortasında görünmesini istiyorsunuz diyelim. Bunu çok basit ve pratik bir işlemle çözebilirsiniz.

www.dijitalders.com

Öncelikle kendimize bir taşıyıcı belirliyoruz. Taşıyıcı nedir derseniz , resimdeki "container" taşıyıcıdır. Taşıyıcı bütün öğeleri içine alır. Yazacağımız her şey bunun içinde yer alır ve sayfayı hizalarken bunu kullanırız.

Sayfayı ortalamanın ilk yolu kodda göründüğü gibidir.

#container { width: 760px; margin: 0 auto; }

 
Css dosyanızda bu şekilde bir kullanım opera ve firefox gibi tarayıcılarda sorunsuz görünse de internet explorer'da sorun çıkartacaktır. Bütün tarayıcılarda ortalanmış sorunsuz bir görüntü elde etmek istiyorsak yapmamız gereken css dosyamızdaki body seçicisini şu şekilde düzenlemek.

body { text-align: center; }
 
 

Böylece sayfadaki her şey ortalanacaktır. Fakat bizim istediğimiz sadece taşıyıcının (container) ortalanması ve diğerleri nesnelerin(yazır, resim...) taşıyıcının içinde sola yaslanması. Kodumuza son halini verip bütünleştirirsek css dosyamız şöyle olmalıdır

body {text-align: center; }
#container {width: 760px; margin: 0 auto; text-align: left; }
  Artık tamamen ortalanmış bir sitemiz var

Divi ortalamak

margin:0 auto 0 auto;

 Divde dikey ortalama   

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle
}

   

<DIV class="container">
  <P>This small paragraph...
</DIV>

 

Resim Ortalamak   

margin:3px auto 3px auto; display:block;

 

 


Kaynak

 

Yorumunuzu Ekleyin


  • CSS ile Web Sayfası Oluşturma
  • CSS ile Web Sayfası Oluşturma ~ 54,774

    CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır.CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır.Eskiden sayfayapısını tablolarla oluştururduk.Bu kullanımın bir çok sorunları vardı.Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır.Biz burada bu konudan bahsedeceğiz.






  • CSS ile Content Menü Yapımı
  • CSS ile Content Menü Yapımı ~ 21,745

    İçeriğe göre boyutlarını ayarlayabilen ve gerekli resimleri tek bir dosyadan alan bir Content Menü tasarımı


  • CSS Konumlandırma (Position)
  • CSS Konumlandırma (Position) ~ 19,696

    CSS konseptinin en önemli konusukonumlandırma (positioning) dir. positon:static, position:absolute, position:relative, position:fixed şeklinde kullanılır.


  • CSS’i Web Sayfalarına Eklemek
  • CSS’i Web Sayfalarına Eklemek ~ 19,316

    CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value)


  • CSS Seçicileri ~ 19,312

    CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir


  • Internet Explorer Koşullu İşlemleri ~ 18,218

    Koşullu yorum basit bir Internet Explorer özelliğidir, Microsoft Windows ve IE5 sonrasında geçerlidir. Mantık olarak Ineternet Explorerin sürümüne görefarklı HTML blokları kullanıcılara sunmak olarak özetlenebilir.


  • CSS ile yazıcı çıktı işlemleri
  • CSS ile yazıcı çıktı işlemleri ~ 17,461

    Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların daha okunaklı olması için sans-serif font ailesi kullanılır ancak çıktı için uygun olan font tipi serif font ailesidir. Ayrıca bir çok site de çıktıda görünmememsi gereken sol menü, banner ve alt kısım gibi alanlar vardır





  • CSS te kullanılan kısaltmalar
  • CSS te kullanılan kısaltmalar ~ 15,668

    CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını en aza indirmiş oluruz








  • Pseudo-sınıfları ve Pseudo-elementleri ~ 14,507

    Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi. )



  • (X)HTML Döküman Hiyerarşisini Anlamak ~ 14,402

    CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir