PDA

View Full Version : Giúp đỡ mình sử dụng float trong thiết kế layout 3 cột



newmem90
04-02-2010, 18:49
Mình mới tập thiết kế layout bằng Div. Layout của mình mình bố cục như sau



<div id="wrapper">

<div id="header"></div><!--#End header-->

<div id="content">

<div id="left"></div><!--End #left-->
<div id="right"></div><!--End #right-->
<div id="sidebar"></div><!--End #sidebar-->

</div><!--End #content-->

<div id="footer"></div><!--#End footer-->

</div><!--End #wrapper-->



Mình muốn hiển thị layout với 3 cột, lần lượt từ trái qua phải là cột left, cột right và cuối cùng là cột sidebar thì thuộc tính float mình phải đặt vào trong các thẻ Div của các cột sẽ là như nào. mong các bạn hướng dẫn. Mình cám ơn nhiều !

naruto1
04-02-2010, 20:16
side bar float left . cột giữa và cột phải cho vào chung một div và cho float ringht.
Sau đó cột giữa float left và cột còn lại float right được không bạn

bạn vào izwebz.com có nhiều cái hay có thể tham khảo thêm trong đó bạn ạ.
hoặc bạnc có thể sử dụng firebug một addon của fire fox tìm đến các trang có 3 cột tham khảo thêm

tuanit85
05-02-2010, 00:10
Mình mới tập thiết kế layout bằng Div. Layout của mình mình bố cục như sau



<div id="wrapper">

<div id="header"></div><!--#End header-->

<div id="content">

<div id="left"></div><!--End #left-->
<div id="right"></div><!--End #right-->
<div id="sidebar"></div><!--End #sidebar-->

</div><!--End #content-->

<div id="footer"></div><!--#End footer-->

</div><!--End #wrapper-->



Mình muốn hiển thị layout với 3 cột, lần lượt từ trái qua phải là cột left, cột right và cuối cùng là cột sidebar thì thuộc tính float mình phải đặt vào trong các thẻ Div của các cột sẽ là như nào. mong các bạn hướng dẫn. Mình cám ơn nhiều !

Phần content của bạn mình sửa lại như sau


<div id="content">

<div id="left-col">
<div id="left"></div><!--End #left-->
<div id="right"></div><!--End #right-->
</div><!--End #left-col-->

<div id="right-col"></div><!--End #right-col-->

</div><!--End #content-->


Phần stytle như sau:

#left-col{
float: left;
}

#left{
float: left;
}

#right{
float: right;
}

#right-col{
float: right;
}

taddynguyen
05-02-2010, 11:39
bạn cần thêm thông số width vào thì mới chia đúng cột!
Mình có 1 số mẫu mình làm sẵn để training cho lính mới, bạn có nhu cầu thì mail cho mình nha!

newmem90
05-02-2010, 14:53
bạn cần thêm thông số width vào thì mới chia đúng cột!
Mình có 1 số mẫu mình làm sẵn để training cho lính mới, bạn có nhu cầu thì mail cho mình nha!

Ok bạn gửi vào mail vietpro.vnn@gmail.com cho mình nha. Cám ơn bạn nhiều !

nvhoangviet
25-04-2010, 17:04
Ban oi, ban vui long gui cho minh luon nha. Mail cua minh: nvhoangviet@yahoo.com.
Cam on ban nhieu

sptnkh
29-04-2010, 14:19
Bạn vui lòng share cho mình với nhé. email: xuanannguyen1@gmail.com
Cám ơn bạn nhiều!