banner

[Rule] Rules  [Home] Main Forum  [Portal] Portal  
[Members] Member Listing  [Statistics] Statistics  [Search] Search  [Reading Room] Reading Room 
[Register] Register  
[Login] Loginhttp  | https  ]
 
Forum Index Thảo luận hệ điều hành Windows Hỏi 1 chút về căn lề giữa với CSS  XML
  [Question]   Hỏi 1 chút về căn lề giữa với CSS 19/11/2007 18:11:32 (+0700) | #1 | 98608
[Avatar]
learn2hack
Elite Member

[Minus]    0    [Plus]
Joined: 29/06/2006 16:32:37
Messages: 825
Offline
[Profile] [PM] [WWW]
Chào mọi người.

Mình thiết kế web theo CSS, đang gặp phải 1 vấn đề nhỏ thế này: làm thế nào để đặt nội dung của 1 thẻ <div></div> nằm căn giữa màn hình (chỉ theo chiều ngang giống <center></center>, ko có chiều dọc), yêu cầu là bên trong thẻ <div></div> đó có thể có bất cứ thứ gì, kể cả table, header, link, list, ...

Trước mình thiết kế web có 3 cột thì dùng thuộc tính float và margin kiểu như sau để cho cột thứ 2 nằm chính giữa
Code:
#cot1, #cot2, #cot3 {
float: left;
position: relative;
}
#cot1, #cot3 {
width: 100px;
}
#cot2 {
width: 400px;
margin: 0 auto 0 auto;
}

Đối với 3 cột thì nó chạy đúng, nhưng khi mình thử với web chỉ có 1 cột thì ở trình duyệt IE bị lỗi, còn Firefox thì được.

Rất mong mọi người giúp đỡ, xin cám ơn rất nhiều.
Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 20/11/2007 18:20:22 (+0700) | #2 | 98848
[Avatar]
learn2hack
Elite Member

[Minus]    0    [Plus]
Joined: 29/06/2006 16:32:37
Messages: 825
Offline
[Profile] [PM] [WWW]
Mình mới tìm được 1 cách, áp dụng với thẻ div đã biết sẵn độ rộng width, ai có cách khác xin chỉ giúp:

Code:
width: 400px;
left: 50%; // đặt mặc định lề trái tính từ giữa màn hình
margin-left: -200px; // giá trị âm bằng 1/2 độ rộng, do lề tính từ chính giữa màn hình nên đối tượng sẽ được căn vào giữa
position: absolute;
Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 22/11/2007 09:37:31 (+0700) | #3 | 99239
ngonchan
Elite Member

[Minus]    0    [Plus]
Joined: 23/02/2004 12:03:51
Messages: 136
Offline
[Profile] [PM] [WWW] [Yahoo!]

learn2hack wrote:
Mình mới tìm được 1 cách, áp dụng với thẻ div đã biết sẵn độ rộng width, ai có cách khác xin chỉ giúp:

Code:
width: 400px;
left: 50%; // đặt mặc định lề trái tính từ giữa màn hình
margin-left: -200px; // giá trị âm bằng 1/2 độ rộng, do lề tính từ chính giữa màn hình nên đối tượng sẽ được căn vào giữa
position: absolute;
 


Chào bác, bác thêm vào Code:
margin: 0 auto;
nhé. Khỏi cần cái margin-left cũng ok như thường thôi smilie Bác thử xem.
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 22/11/2007 19:29:01 (+0700) | #4 | 99326
[Avatar]
learn2hack
Elite Member

[Minus]    0    [Plus]
Joined: 29/06/2006 16:32:37
Messages: 825
Offline
[Profile] [PM] [WWW]
Ko được ngonchan à, tớ thử đoạn code sau thì thấy bị lệch:
Code:
width: 400px;
left: 50%; // đặt mặc định lề trái tính từ giữa màn hình
margin: 0 auto;
position: absolute;

Đoạn mã margin: 0 auto chỉ là căn lề trái là 0, lề phải tự động, khi đó nếu đặt thuộc tính left: 50% thì lề sẽ được tính từ giữa, và toàn bộ nội dung của thẻ div bị nằm ở nửa bên phải; còn nếu ko có thuộc tính left: 50% thì toàn bộ nội dung nằm lệch về nửa bên trái.
Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 23/11/2007 01:12:13 (+0700) | #5 | 99383
ngonchan
Elite Member

[Minus]    0    [Plus]
Joined: 23/02/2004 12:03:51
Messages: 136
Offline
[Profile] [PM] [WWW] [Yahoo!]
Bác thử cái này xem smilie
Code:
<html>
 <head>
 <style>
body{
 text-align:center;
}

 #wrapper{
 width:770px;
 margin: 0 auto; 
 }

 #left{
 width:30%;
 background: pink;
 float: left;
 }

 #right{
 width:70%;
 background: green;
 float: right;
 }

#footer{
 clear: both;
}
 </style>
 </head>
 <body>
 <div id="wrapper">
 <div id="left">Navigator</div>
 <div id="right">Content page</div>
 <div id="footer">© 2007</div>
 </div>
 </body>
</html>


Đã test trên IE và FF, smilie hiện ok rồi smilie
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 24/11/2007 12:56:08 (+0700) | #6 | 99652
[Avatar]
learn2hack
Elite Member

[Minus]    0    [Plus]
Joined: 29/06/2006 16:32:37
Messages: 825
Offline
[Profile] [PM] [WWW]
Ấn tượng đấy ngonchan smilie. Có lẽ tớ phải ngẫm lại 1 chút. Bữa trước tớ thử với table đặt trong thẻ div như vậy mà hiển thị bị lệch. Thanks cậu nhiều.
Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 24/11/2007 18:11:10 (+0700) | #7 | 99680
[Avatar]
learn2hack
Elite Member

[Minus]    0    [Plus]
Joined: 29/06/2006 16:32:37
Messages: 825
Offline
[Profile] [PM] [WWW]
Tớ thử và thấy thuộc tính text-align: center; của thẻ body cũng nắm 1 vai trò quyết định. Cách này rất tuyệt, mã lệnh gọn nhẹ. Cám ơn cậu lần nữa smilie.
Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 27/11/2007 03:34:02 (+0700) | #8 | 100326
ngonchan
Elite Member

[Minus]    0    [Plus]
Joined: 23/02/2004 12:03:51
Messages: 136
Offline
[Profile] [PM] [WWW] [Yahoo!]

learn2hack wrote:
Cám ơn cậu lần nữa smilie


Không có gì smilie tớ cũng đang làm web tableless, cũng còn nhiều chỗ chưa làm được lắm. Nếu l2h có hứng thú, muốn tìm người để học chung cho dzui thì hú một tiếng, có 2 ngươì nghiên cứu có hứng thú hơn là một người đó.

À, l2h (nick dzài thòn smilie ) có thể chèn hình giống như slide của Photoshop mà chỉ dùng div, không dùng table được chưa ? ngón chân đang xem mà làm chưa được smilie
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 27/11/2007 12:45:37 (+0700) | #9 | 100483
[Avatar]
learn2hack
Elite Member

[Minus]    0    [Plus]
Joined: 29/06/2006 16:32:37
Messages: 825
Offline
[Profile] [PM] [WWW]
Ừ, tớ đang tìm hiểu về cái này để chỉnh sửa giao diện chút xíu cho gọn nhẹ hơn mà vẫn hiển thị tốt. Học chung thì hơi khó nhưng mà trao đổi thì tớ rất thích, có vài cái nhiều khi vướng mắc có người trao đổi thì vẫn hay hơn là tự nghịch 1 mình smilie.
Cái slide để tớ về thử nghiên cứu xem nào, thú vị đây smilie.
Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 18/12/2007 14:58:23 (+0700) | #10 | 104548
ducmanh
HVA Friend

Joined: 12/09/2004 18:07:25
Messages: 143
Location: Hà Nội
Offline
[Profile] [PM] [WWW] [Yahoo!] [MSN]
Hix, thuộc tính text-align: center mà để thế thì tất cả nội dung sẽ ở giữa mất.

Nếu cần ở giữa gì để ở cột 2 thôi. Nếu bạn muốn cả khối đó ở giữa thì dùng float: center. Còn muốn nội dung trong khối nào đó căn giữa thì text-align: center hoặc justify nếu căn lề trái phải thẳng tưng smilie
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 19/12/2007 13:02:32 (+0700) | #11 | 104723
[Avatar]
learn2hack
Elite Member

[Minus]    0    [Plus]
Joined: 29/06/2006 16:32:37
Messages: 825
Offline
[Profile] [PM] [WWW]
Thực ra lúc nói thuộc tính text-align: center có vai trò là do tớ thử với table mà không để width=100% nên có cảm giác bị lệch, chứ thực ra không cần, chỉ cần 2 thuộc tính width, và margin: 0 auto là đủ rồi.
Dùng float có vẻ không ổn lắm với website 1 cột, vì thực ra chuẩn CSS không có thuộc tính float: center (chỉ có left, right và none thôi).
Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 22/12/2007 09:47:42 (+0700) | #12 | 105287
ngonchan
Elite Member

[Minus]    0    [Plus]
Joined: 23/02/2004 12:03:51
Messages: 136
Offline
[Profile] [PM] [WWW] [Yahoo!]

learn2hack wrote:
chuẩn CSS không có thuộc tính float: center (chỉ có left, right và none thôi). 

Cái này hoàn toàn chính xác smilie
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 31/01/2008 14:41:16 (+0700) | #13 | 113113
[Avatar]
SonNguyen_sn
Member

[Minus]    0    [Plus]
Joined: 16/04/2007 20:10:44
Messages: 53
Offline
[Profile] [PM]
Hay hay!
E cũng đang chuyên dụng về cái thằng cSS này.

Có gì cùng trao đổi với các bác cho vui. Dạo này, có mấy khi dùng table nữa đâu. Táng thẻ div vào cho sướng.

Nhưng có nhiều cái, không hiểu sao IE nhận thì đẹp còn FF thì méo xẹo và ngược lại.
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 01/02/2008 05:19:53 (+0700) | #14 | 113193
cvhainb
Member

[Minus]    0    [Plus]
Joined: 04/01/2007 14:32:38
Messages: 251
Offline
[Profile] [PM]

SonNguyen_sn wrote:
Hay hay!
E cũng đang chuyên dụng về cái thằng cSS này.

Có gì cùng trao đổi với các bác cho vui. Dạo này, có mấy khi dùng table nữa đâu. Táng thẻ div vào cho sướng.

Nhưng có nhiều cái, không hiểu sao IE nhận thì đẹp còn FF thì méo xẹo và ngược lại. 


!important <- phân biệt giữa IE và FF.Bác muốn biết chi tiết thì có lẽ lên mạng search smilie .
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 01/02/2008 09:30:24 (+0700) | #15 | 113225
[Avatar]
learn2hack
Elite Member

[Minus]    0    [Plus]
Joined: 29/06/2006 16:32:37
Messages: 825
Offline
[Profile] [PM] [WWW]
Lâu rồi quay lại topic này, hôm trước đọc 1 bài báo nào đó trên mạng cũng nói qua cách căn lề giữa dùng CSS, ở đó trình bày cách của ngonchan, nhưng viết chi tiết hơn, code mà họ dùng là thế này"
Code:
body {
    text-align: center;
}
wrap {
    margin: 0 auto;
    text-align: left
}

Họ gán lề cho body rồi gán lại cho wrap để đảm bảo không bị lệch. Làm thế này an toàn hơn và tốt hơn smilie.

Ngoài ra còn 1 cách nữa tớ mới đọc được trong sách: đó là tạo 1 phần tử có border trái và phải bằng nhau smilie:
Code:
border-left: 100px solid white;
border-right: 100px solid white;

Cách này độc đáo ở chỗ nếu làm web có 3 cột chẳng hạn, thì cho phần boder này to ra, phủ vừa cả 2 cột 2 bên smilie. Thế là phần ở giữa tha hồ co dãn thoải mái mà vẫn nằm chính giữa.
Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 02/02/2008 10:54:57 (+0700) | #16 | 113333
[Avatar]
SonNguyen_sn
Member

[Minus]    0    [Plus]
Joined: 16/04/2007 20:10:44
Messages: 53
Offline
[Profile] [PM]

learn2hack wrote:
Lâu rồi quay lại topic này, hôm trước đọc 1 bài báo nào đó trên mạng cũng nói qua cách căn lề giữa
Ngoài ra còn 1 cách nữa tớ mới đọc được trong sách: đó là tạo 1 phần tử có border trái và phải bằng nhau smilie:
Code:
border-left: 100px solid white;
border-right: 100px solid white;

Cách này độc đáo ở chỗ nếu làm web có 3 cột chẳng hạn, thì cho phần boder này to ra, phủ vừa cả 2 cột 2 bên smilie. Thế là phần ở giữa tha hồ co dãn thoải mái mà vẫn nằm chính giữa. 


He he!

Cái này là mẹo rồi. Nếu thằng ku nào dùng backgrond-color không phải màu trắng thì ......

Cái này là hay đấy smilie

smilie smilie smilie smilie smilie
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 02/02/2008 14:38:59 (+0700) | #17 | 113347
[Avatar]
canh_nguyen
Elite Member

[Minus]    0    [Plus]
Joined: 23/08/2004 18:55:09
Messages: 775
Location: Broken dream
Offline
[Profile] [PM] [WWW] [Yahoo!] [MSN] [ICQ]

SonNguyen_sn wrote:

He he!

Cái này là mẹo rồi. Nếu thằng ku nào dùng backgrond-color không phải màu trắng thì ......

Cái này là hay đấy smilie

smilie smilie smilie smilie smilie  


Thì transparent smilie
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 08/02/2008 12:25:54 (+0700) | #18 | 113894
[Avatar]
woodyboy
Member

[Minus]    0    [Plus]
Joined: 13/05/2007 15:55:01
Messages: 18
Offline
[Profile] [PM]
Trời ơi các bác lằng nhằng quá. Em có cách này nhé, các bác cài dreamwaver8 vào máy, chạy graphic mà thiết kế sau đó chuyen qua code hay slip de xem code, sẽ học đwowcj nhiều lám đấy. smilie
[Up] [Print Copy]
  [Question]   Re: Hỏi 1 chút về căn lề giữa với CSS 09/02/2008 10:27:38 (+0700) | #19 | 113964
[Avatar]
learn2hack
Elite Member

[Minus]    0    [Plus]
Joined: 29/06/2006 16:32:37
Messages: 825
Offline
[Profile] [PM] [WWW]
Tớ không dùng thạo Dreamwaver nên không rõ lắm. Bạn có thể chỉ vài cách mà bạn làm với Dreamwaver và những gì bạn học hỏi được ở đó lên đây được không? Cám ơn rất nhiều.
Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org
[Up] [Print Copy]
[digg] [delicious] [google] [yahoo] [technorati] [reddit] [stumbleupon]
Go to: 
 Users currently in here 
1 Anonymous

Powered by JForum - Extended by HVAOnline
 hvaonline.net  |  hvaforum.net  |  hvazone.net  |  hvanews.net  |  vnhacker.org
1999 - 2013 © v2012|0504|218|