Thứ Bảy, 5 tháng 3, 2011

Faux Colums & Column 2-1-3

Faux Column : là một kỹ thuật dùng để làm cho các thẻ div có chiều cao bằng nhau. (giống như khi ta dùng thẻ 'td' trong table)
Sau đây là ví dụ :
Chúng ta sẽ tạo ra 3 cột bằng cách dùng 5 thẻ div lồng nhau (main-content, main-content_1, main-content_2, main-content_3, main-content_4) và 3 thẻ div (content-center, content-left, content-right), 3 thẻ div này là phần nội dung sẽ được hiển thị. Ta sẽ quy định phần bên trái và bên phải sẽ có chiều rộng là 25%, còn phần giữa sẽ là 50%.)

HTML :
<div id="main-content">
<div id="main-content_1">
<div id="main-content_2">
<div id="main-content_3">
<div id="main-content_4">
<div id="content-center"></div>
<div id="content-left"></div>
<div id="content-right"></div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>

CSS :
.clear {
clear: both;
}
div#main-content {
background: #a8a8a8;
width: 960px;
margin: 0 auto;
}
div#main-content_1 {
background: #4200ff;
}
div#main-content_3 {
background: #ff0c00;
}


Đặt các thẻ div vào vị trí mình mong muốn bằng cách sử dụng thuộc tính position: relative
div#main-content {
background: #a8a8a8;
width: 960px;
margin: 0 auto;
position: relative;
}

div#main-content_1,
div#main-content_2,
div#main-content_3,
div#main-content_4 {
position: relative;
width: 100%;
}


Đầu tiên chúng ta sẽ cho thẻ div : main-content_1 dịch sang bên trái là 75%
div#main-content_1 {
background: #4200ff;
right: 75%;
}


Tiếp đến là cho thẻ div : main-content_2 dịch sang bên phải là 75% để trở về vị trí ban đầu
div#main-content_2 {
left: 75%;
}

Làm tương tự như vậy với thẻ div : main-content_3 và main-content_4 nhưng với vị trí lần lượt là phải và trái
div#main-content_3 {
background: #ff0c00;
left: 75%
}
div#main-content_4 {
right: 75%
}


Dùng thuộc tính overflow: hidden để ẩn đi phần thừa
div#main-content {
background: #a8a8a8;
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}


Vậy là xong được 1 phần. Bây giờ sẽ là phần nội dung hiển thị. Ở phần này, mình sẽ sử dụng column : 2-1-3. Việc này khá tốt để làm SEO. Chúng ta sẽ đặt phần nội dung chính lên đầu tiên rồi tiếp đến là phần nội dung phụ.
div#content-center,
div#content-left,
div#content-right {
position: relative;
}
div#content-center {
float: left;
left: 25%;
width: 50%;
}
div#content-left {
float: left;
left: -50%;
width: 25%;
}
div#content-right {
float: right;
width: 25%;
}

Thêm 1 chút nội dung vào. Đây là kết quả




4 nhận xét:

  1. anh cho e hỏi với ạ? tại sao việc này lại khá tốt để làm SEO?

    Trả lờiXóa
  2. Nói nôm na là thế này : khi đưa phần nội dung chính lên đầu tiên thì các search engine sẽ tìm và đọc được nhiều thông tin hơn --> Việc làm SEO sẽ tốt hơn.

    Trả lờiXóa
  3. Vấn đề này có thể làm ngắn gọn hơn nhiều nếu như sử dụng display table

    Trả lờiXóa
  4. dùng display: table thì ok, nhưng bạn có chắc nó sẽ hoạt động tốt trên ie 6,7 ?

    Trả lờiXóa