Langkah-langkah untuk menghasilkan tinggi yang sama untuk elemen DIV menggunakan CSS bukan boleh dilakukan sebegitu sahaja. Artikel kali ini menyentuh dan membincangkan langkah-langkah untuk menghasilkan lajur yang sama tinggi dan berfungsi dengan sempurna dalam pelbagai jenis perisian pelayar.

Konsep yang digunakan adalah mengambil saiz lajur yang paling tinggi dan disamakan dengan lain-lain lajur.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Kaedah 1: Menggunakan attribut "display: table"

Dalam kaedah ini, kita menggunakan kod HTML senarai (list) yang setiap satunya mengandungi elemen DIV bagi mewakili set setiap lajur. Kemudian, kita memberikan stail kepada setiap DIV dengan atribut "display: table" bagi menterjemahkan elemen DIV bersifat sebagai TABLE.

Ini adalah kod HTML:

<div class=”base”>
  <ul class=”base-row”>
    <li class="cell1"><div class="content1" >.....Lots of  Content....</div></li>
    <li class="cell1"><div class="content2">.....Lots of  content....</div></li>
    <li class="cell1"><div class="content3">.....Lots of  content....</div></li>
  </ul>
</div>

Manakala ini pula adalah kod CSS:

.base {
  /*make it 100% width and a minimum of 1000px width*/
  width: auto;
  margin-left: 0px;
  margin-right: 0px;
  min-width: 1000px;
  padding: 0px;
  display: table;
}
.base-row {
  display: table-row;
}
.base li {
  display: table-cell;
  width: 33%;
}
.cell1 {
  background-color: #f00;
}
.cell2 {
  background-color: #0f0;
}
.cell3 {
  background-color: #00f;
}

Kelebihan:

Sangat mudah dan senang untuk diamalkan. Kaedah ini adalah yang paling ringkas dalam semua kaedah. Ini memberi ruang kepada anda untuk menjimatkan masa pembangunan laman.

Margin untuk setiap lajur adalah bersambungan dan sekiranya anda mahukan ruang antaranya, gunakan atribut border dengan menggunakan saiz bingkai tersebut sebagai ruang antara lajur

Kekurangan:

Kaedah ini tidak berfungsi dengan baik pada pelayar IE7 dan ke bawah. Masa diperlukan sehingga satu dunia menggunakan IE8 sebagai versi perisian pelayar yang paling rendah. Teknik ini sesuai dilakukan kepada laman web yang fokus kepada pelayar moden.

Keadah 2: Menggunakan Javascript

Kaedah ini bergantung sepenuhnya kepada skrip Javascript untuk menentukan saiz secara pengiraan pada lajur yang tertinggi. Seterusnya saiz itu diaplikasikan kepada lajur-lajur yang lain. Kod di bawah dihasilkan dengan bantuan JQuery (bukan aturcara Javascript yang asas -- anda memerlukan JQuery)

Kod HTML:

<div class=”container”>
  <div  class=”leftsidebar”> … Lots Of Content … </div>
  <div class=”content”> ….  Lots Of Content … </div>
  <div  class=”rightsidebar”> … Lots Of Content … </div>
</div>

Dengan bantuan kod CSS untuk memastikan mereka berada dalam satu barisan mendatar

.container {
  Width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.leftsidebar {
  float: left;
  Width: 33%;
}
.content {
  float: left;
  Width: 33%;
}
.rightsidebar {
  float: left;
  Width: 33%;
}

Kemudian suntikan kod Javascript JQuery untuk menyamakan tinggi lajur

function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn  = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container  > div"));
});

Anda boleh mengasingkan skrip Javascript ini dalam fail yang berbeza daripada HTML atau masukkan terus dibahagian <HEAD> dokumen. Namun pastikan JQuery dipanggil bersama-sama pada fail dokumen tersebut. Bahagian kod yang perlu anda ubahsuai untuk menyamai dengan kod anda sendiri adalah pada bahagian:

.container div

Ubahkan nilai ini bagi mendapat struktur kelas CSS yang sama pada kod HTML untuk elemen <div>.

Kelebihan:

Kita tidak menggunakan CSS untuk mengawal saiz tinggi lajur tersebut sebaliknya dilakukan oleh Javascript. Kaedah ini berkesan dan berfungsi pada hampir semua versi dan jenis pelayar

Kekurangan:

Sekiranya Javascript dinyahaktif, saiz tinggi lajur tidak akan diperolehi. Hampir kebanyakan laman web hari ini menggunakan Javascript dan rata-rata pengguna menyahaktifkannya secara lalai bagi mencapai tahap muat turun laman yang lebih pantas.

Kaedah 3: Lajur Faux

Kaedah ini merupakan yang terawal dijumpai untuk mendapatkan lajur yang mempunyai tinggi yang sama. Kaedah ini melibatkan penggunaan elemen gambar sebagai latar belakang yang mempunyai warna berbeza untuk membentuk ruangan yang berbeza. Struktur lajur dibina di atas latar belakang tersebut. Di bahagian pengakhiran, atribut CSS clear: both akan memanggil latar belakang untuk merenggang dan memenuhi ruang berdasarkan kepada lajur yang tertinggi. Latar belakang dipaparkan berulang-ulang secara menegak dan akan kelihat seolah-seolah 3 lajur yang sama tinggi.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Kod HTML yang diperlukan:

<div class=”container”>
  <div class=”left”></div>
  <div  class=”content”></div>
  <div class=”right”></div>
  <div class=”clearer”></div>
</div>

Dan CSS menyokong bentuk paparan:

.container {
  background-image: tile.png;
  background-repeat: repeat-y;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.leftsidebar {
  float: left;
  width: 200px;
}
.content {
  float: left;
  width: 400px;
}
.right {
  float:left;
  width: 300px;
}
.clearer {
  clear: both;
}

Kelebihan:

mudah, ringkas dan tidak memerlukan implementasi CSS yang terlalu banyak dan kompleks.

Kekurangan:

Kaedah ini hanya menyokong saiz lajur yang tetap (statik) dan bukan dinamik (fluid) memandangkan kita menggunakan elemen gambar. Setiap penambahan lajur, memerlukan penghasilan gambar yang baru.

Kaedah 4: Menggunakan latar belakang warna yang berbeza bagi setiap elemen <div>

Kaedah ini menggunakan elemen <div> yang berasingan dan setiap satunya mempunyai warna yang berbeza. Setiap lajur akan mengambil saiz lajur yang tertinggi pada tag penutupnya.

Kod HTML:

<div class=”rightback”>
  <div class=”contentback”>
    <div class=”leftback”>
      <div  class=”leftsidebar”> Masukkan kandungan anda di sini </div>
      <div class=”content”>  Lagi kandungan anda untuk bahagian lajut tengah </div>
      <div  class=”rightsidebar”> Ini pula kandungan di lajur kanan </div>
    </div>
  </div>
</div>

Kod CSS:

.rightback  {
  width: 100%;
  float:left;
  background-color: green;
  overflow:hidden;
  position:relative;
}
.contentback  {
  float:left;
  background-color:blue;
  width: 100%;
  position:relative;
  right: 300px;    /* width of right sidebar */
}
.leftback  {
  width: 100%;
  position:relative;
  right: 400px; /* width of the  content area */
  float:left;
  background-color: #f00;
}

.container  {
  width: 900px;
  margin-left: auto;
  margin-right:auto;
}

.leftsidebar  {
  float:left;
  width: 200px;
  overflow:hidden;
  position:relative;
  left: 700px;
}
.content  {
  float:left;
  width: 400px;
  overflow:hidden;
  position:relative;
  left: 700px;
}
.rightsidebar  {
  float:left;
  overflow:hidden;
  width: 300px;
  background-color:#333;
  position:relative;
  left: 700px;
}

Sangat sukar dan memeningkan bukan? Jangan risau, sekiranya anda dapat memahami konsep yang digunakan dibelakang kaedah ini semuanya akan menjadi mudah. Teknik ini dihasilkan berdasarkan kepada 5 kriteria berikut:

  1. .rightback, .contentback dan .leftback merangkumkan elemen <div> iaitu .leftsidebar, .content dan .rightsidebar yang mempunyai kandungan kandungan di dalamnya
  2. setiap elemen <div> yang dirangkumkan adalah selari dengan elemen <div> yang menentukan warna latar belakang. Dalam contoh ini, lajur .righback adalah selari dengan .rightsidebar dan seterusnya
  3. kecuali untuk bahagian lajur yang paling kanan digerakkan ke kiri bersamaan dengan nilai kelebaran untuk lajur sebelah kanan. Dalam contoh ini, elemen <div> untuk .contentback dan .content dianjakkan ke sebelah kiri sebanyak 300px.
  4. elemen .leftsidebar, .content dan .rightsidebar diapungkan ke sebelah kiri dan diberikan nilai lebar yang tetap
  5. semua elemen yang diapungkan ke sebelah kiri mempunyai saiz lebar tersendiri dan penentuan saiz lebar untuk lajur yang paling ke kanan adalah berdasarkan kepada penolakkan daripada saiz .container iaitu: 900px (.container) - 300px (lajur kiri) - 400px (lajur tengah) = 200px

Gambar di bawah menunjukkan konsep dan ilustrasi yang digunakan. Perhatikan lajur untuk R dan G seolah-olah menindih lajur G di atasnya.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Garisan putus-putus menandakan saiz kandungan yang dipaparkan berdasarkan kepada nilai lebar yang diset dalam .container. Gambar seterusnya menunjukkan pergerakkan anjakan lajur-lajur yang mengandungi kandungan bergerak masuk menepati kedudukan latar belakang selepas kita mengapungkan mereka dengan CSS.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Sekiranya anda memerlukan penjelasan lanjut mengenai teknik terakhir ini, ruangan komen disediakan di bawah.

Penilaian: 
1
Your rating: None Average: 1 (1 vote)