Bu makale, CSS'de 3 sütunlu bir düzenin nasıl oluşturulacağını açıklar. Talimatlar CSS3 ve daha eski sürümler için geçerlidir.

Düzeninizi Çizin

Düzeninizi kağıda veya bir grafik programı. Halihazırda bir tel çerçeve veya daha kapsamlı bir tasarımınız varsa, siteyi oluşturan temel kutulara basitleştirin. Bu makaleye eşlik eden bu tasarım, ana içerik alanında üç sütunun yanı sıra bir üstbilgi ve altbilgiye sahiptir. Yakından bakarsanız, üç sütunun genişlik olarak eşit olmadığını görebilirsiniz.

Düzeninizi çizdikten sonra boyutları düşünmeye başlayabilirsiniz. Bu örnek tasarım aşağıdaki temel boyutlara sahip olacaktır:

• Genişliği 900 pikselden fazla değil
• soldaki 20 piksel oluk
• sütunlar ve satırlar arasında 10 piksel
• 250 piksel, 300 piksel ve 300 piksel genişliğinde sütunlar
• Üst sıra 150 piksel uzunluğunda
• Alt sıra 100 piksel uzunluğunda

Temel HTML/CSS Yazın ve Bir Kapsayıcı Öğesi Oluşturun

Bu sayfa geçerli olacağından HTML belge, boş bir HTML kapsayıcı ile başlayın.

Temel CSS stillerini şuraya ekleyin: sayfa kenar boşluklarını, kenarlıkları ve dolguları sıfırlayın. başkaları varken standart CSS stilleri yeni belgeler için bu stiller, temiz bir düzen elde etmek için ihtiyacınız olan minimumlardır. Bunları belgenizin başına ekleyin.

Düzeni oluşturmaya başlamak için bir kap öğesi yerleştirin. Bazen kapsayıcıdan daha sonra kurtulabilirsiniz, ancak çoğu sabit genişlikli mizanpaj için kapsayıcı öğesine sahip olmak farklı Web'de yönetimi kolaylaştırır. tarayıcılar.

Konteyneri Stillendirin

Kapsayıcı, web sayfası içeriğinin ne kadar geniş olacağını ve ayrıca dış kenar boşluklarını ve iç kısımdaki dolguyu tanımlar. Bu belge için kap, solda 20 piksellik bir oluk ile 870 piksel genişliğindedir. Oluk bir kenar boşluğu stiliyle kurulur, ancak herhangi bir öğenin kap kadar geniş olmasını önlemek için kap üzerindeki dolgu sıfırlanır.

Belgenizi şimdi kaydederseniz, içinde hiçbir şey olmadığı için kabı görmek zor olacaktır. Yer tutucu metin eklerseniz kapsayıcı öğesini daha net görebileceksiniz.

Başlık için Başlık Etiketi kullanın

Başlık satırını nasıl şekillendirmeye karar verdiğiniz, içinde ne olduğuna çok bağlıdır. Başlık satırında yalnızca bir logo grafiği ve başlık olacaksa, bir başlık etiketi (

) kullanmaktan daha mantıklı

. Başlığa, bir div'i şekillendirdiğiniz gibi stil verebilirsiniz ve gereksiz etiketlerden kaçınırsınız.

Başlık satırının HTML'si kapsayıcının en üstüne gelir ve şöyle görünür:

Ardından, stilleri ayarlamak için, nerede bittiğini görebilmeniz için alt tarafa kırmızı bir kenarlık eklendi, kenar boşlukları ve dolgu sıfırlandı, genişlik %100'e ve yükseklik 150 piksele ayarlandı.

Bu öğeyi float: left; ile kaydırmayı unutmayın. Emlak. CSS mizanpajları yazmanın anahtarı, kapla aynı genişlikte olan şeyleri bile, her şeyi yüzdürmektir. Bu şekilde, öğelerin sayfada nerede olacağını her zaman bilirsiniz.

bir CSS alt seçicisi stiller yalnızca #container öğesinin içindeki H1 öğelerine uygulanır.

Üç Sütun Almak İçin İki Sütun Oluşturarak Başlayın

CSS ile üç sütunlu bir düzen oluşturduğunuzda, düzeninizi ikişerli gruplara ayırmanız gerekir. Yani bu üç sütunlu düzen için, orta ve sağ sütun ve iki sütunlu bir düzende sol sütunun yanına gruplandırılmış ve yerleştirilmiş burada sol sütun 250 piksel genişliğinde ve sağ sütun 610 piksel genişliğindedir (iki sütunun her biri için 300, artı aradaki oluk için 10 piksel) onlar).

Soldaki sütun sola kayar, diğeri ise sağa kayar. Her iki sütunun toplam genişliği 860 piksel olduğundan, aralarında 10 piksellik bir oluk vardır.

Geniş İkinci Sütunun İçine İki Sütun Ekleyin

Üç sütunu oluşturmak için, son adımda kap sütununun içine 2 div eklediğiniz gibi, daha geniş olan ikinci sütunun içine iki div ekleyin.

Bu 300px genişliğindeki iki kutu 610px genişliğinde bir kutunun içinde olduğundan, aralarında yine 10px'lik bir oluk olacaktır.

Altbilgiye Ekle

Artık sayfanın geri kalanı biçimlendirildiğine göre, altbilgiye ekleyebilirsiniz. "Altbilgi" kimliğine sahip son bir div kullanın ve görebilmeniz için içerik ekleyin. Ayrıca en üste bir kenarlık ekleyebilirsiniz, böylece nereden başladığını bilirsiniz.

Kişisel Stillerinizi ve İçeriğinizi Ekleyin

Artık düzeni tamamladığınıza göre, kendi kişisel stillerinizi ve içeriğinizi eklemeye başlayabilirsiniz. Üstbilgi ve altbilgideki kenarlıkların, özellikle tasarım için değil, yerleşim bölümlerini göstermek için eklendiğini unutmayın.