Thứ tự hiển thị với CSS

English | Vietnamese

Rules

Main Forum

Portal

Member Listing

Statistics

Search

Reading Room
[Register]

Login [ | https ]

Forum Index

Thảo luận hệ điều hành Windows

Thứ tự hiển thị với CSS

[Question] Thứ tự hiển thị với CSS	04/04/2008 16:23:16 (+0700) \| #1 \| 123189

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Chào mọi người,

Mình có 1 vấn đề nhỏ như sau khi thiết kế các layout với CSS: giả sử mình có 3 thẻ div1, div2 và div3 được xếp theo đúng thứ tự đó, có nghĩa là khi trình duyệt mở trang web lên thì thẻ div1 sẽ được hiển thị đầu tiên, thẻ div2 và div3 lần lượt được hiển thị tiếp theo. Vấn đề của mình là muốn căn lề cho div1 trôi vào giữa, div2 bên trái và div3 bên phải; nhưng yêu cầu cả 3 thẻ div này nằm ngang hàng nhau.

Mình đã thử với đoạn code sau:
Code:

<html>
<head>
  <style type="text/css">
    #div1 {
      width: 50%;
      margin: 0 auto;
      border: 1px solid black;
    }
    #div2 {
      width: 20%;
      float: left;
      border: 1px solid black;
    }
    #div3 {
      width: 20%;
      float: right;
      border: 1px solid black;
    }
  </style>
</head>
<body>
    <div id="div1">Day la phan text o giua</div>
    <div id="div2">Day la phan text ben trai</div>
    <div id="div3">Day la phan text ben phai</div>
</body>
</html>

Đoạn code này đảm bảo cho div1 vào giữa, div2 bên trái, div3 bên phải (tức yêu cầu 1 được thỏa mãn), nhưng sẽ làm cho div1 ở phía trên của div2 và div3 (div2 và div3 nằm ngang nhau, mình đã có thêm border chỉ để dễ nhận biết vị trí của chúng không bằng nhau) (yêu cầu 2 không thỏa mãn).

Có ai có kinh nghiệm với vấn đề này xin hãy giúp đỡ mình. 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

[Question] Re: Thứ tự hiển thị với CSS	04/04/2008 21:54:52 (+0700) \| #2 \| 123200

canh_nguyen
Elite Member

Joined: 23/08/2004 18:55:09
Messages: 775
Location: Broken dream
Offline

Đơn giản chỉ cần đổi thứ tự div trong body
Code:

<body>
<div id="div2">Day la phan text ben trai</div>
<div id="div3">Day la phan text ben phai</div>
<div id="div1">Day la phan text o giua</div>
 </body>

[Question] Re: Thứ tự hiển thị với CSS	05/04/2008 06:32:04 (+0700) \| #3 \| 123301

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Nếu thay đổi thứ tự thì đơn giản rồi, mình cũng rõ chuyện đó. Có điều bắt buộc thứ tự phải giữ nguyên như vậy. Đó là 1 vấn đề về SEO thôi, phần div1 sẽ lưu nội dung chính, đối với SEO mà nói thì phần nội dung nên được xếp trên đầu, sẽ có 2 cái lợi: 1 là người đọc sẽ nhìn thấy nội dung trước những thứ râu ria không cần thiết, 2 là phần nội dung nằm trên sẽ được index tốt hơn.

Nếu như không được phép thay đổi thứ tự các div thì làm thế nào nhỉ? Có ai biết xin được chỉ giùm.

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Thứ tự hiển thị với CSS	05/04/2008 10:57:46 (+0700) \| #4 \| 123330

superthin
Member

Joined: 25/08/2003 10:29:42
Messages: 52
Location: Vietnam
Offline

Hoặc bạn dùng postion là absolute để cố định các DIV và đạt được thứ tự như bạn mong muốn hoặc là bạn dùng Ajax để load nội dung cho các DIV không quan trọng (tức không chứa nội dung như bạn nói). Khi <body onload="gọi ajax"> thì nghĩa là trang đã nạp xong, nội dung của bạn đã load lên lúc này mới gọi Ajax nạp hai cái DIV rìa như bạn nói.

Nếu bạn không dùng Absolute để cố định DIV, cũng không dùng Ajax thì có lẽ là bạn phải chấp nhận cách đảo vị trí DIV thôi, chưa nghĩ ra cách nào hay hơn.

www.khoancatbetong.com - khó ăn cát bê tông!

[Question] Re: Thứ tự hiển thị với CSS	05/04/2008 11:12:01 (+0700) \| #5 \| 123332

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Mình đã thử với kiểu vị trí absolute, kiểu này cơ bản có thể giải quyết vấn đề, nhưng nó lại gặp 1 loạt các vấn đề khác cũng khó chịu không kém như:
- sắp xếp các lớp khác rất khó khăn, vì 3 lớp này cơ bản là absolute, các lớp còn lại sẽ kéo theo bị absolute, cho nên bố trí sẽ khá phức tạp
- cách làm với vị trí absolute này sẽ làm cho toàn bộ layout bị cố định, rất khó sửa chữa và tùy biến, VD khi đưa cả 3 lớp này vào 1 lớp chung để di chuyển chúng đến 1 vị trí khác (có thể là trên cùng, dưới cùng, ...) sẽ gần như không được
- vị trí absolute sẽ dẫn đến khó thiết kế hình nền, vì cơ bản là chúng không có liên hệ với nhau. Nếu như thử cho thuộc tính background vào thẻ body, thì sẽ thấy nó sẽ ảnh hưởng đến các lớp khác, còn 3 lớp này thuộc hàng ngoại lệ.
...

Cách làm Ajax mình chưa nghĩ đến, cũng là 1 ý hay đấy smilie

, cám ơn bạn rất nhiều về gợi ý này. Tuy nhiên trước khi thử với việc load nội dung động thì mình muốn đợi xem có cách nào load nội dung tĩnh không, vì dù sao Ajax cũng sẽ phức tạp hơn đôi chút.

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Thứ tự hiển thị với CSS	06/04/2008 03:41:36 (+0700) \| #6 \| 123422

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Mình tìm được 1 cách để làm việc này như sau: bao bọc div1 và div2 bởi 1 thẻ div lớn (tạm gọi là div4). Như thế trang web sẽ gồm 2 lớp lớn là div3 và div4, chúng ta có thể dùng float để đặt chúng đúng vị trí. Sau đó trong div4 sẽ bao gồm div1 và div2, chúng ta cũng dùng float để xếp đặt chúng.

Không biết có ai còn có giải pháp nào khác không?

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Thứ tự hiển thị với CSS	08/04/2008 00:03:49 (+0700) \| #7 \| 123846

keyboardDigger
Member

Joined: 27/03/2008 16:45:48
Messages: 26
Offline

Xin chào learn2hack. Sorry bạn vì thấy có topic này lâu lâu rồi mà chẳng chịu vào xem gì cả. Cũng tại mình không có mấy kinh nghiệm CSS.
Riêng trường hợp của bạn, mình viết ẩu theo cách dưới đây. Mình đã test trên các browser khác nhau rồi, ko vấn đề gì cả.

Đoạn code vẽ ra 3 DIV có kích thước 100x 200 nằm trong 1 DIV lớn, sử dụng vị trí relative để sắp đặt.
Code:

<html>
<BODY>
<div style="width:700 px; height: 300px; border: solid 1px white; background-color: yellow;">
<div id = "div1" style="position: relative; top: 0; left: 250;width:100px; height:200px; background-color: red">DIV 1</div>
<div id = "div2" style="position: relative; top: -200px; left: 0; width:100px; height:200px; background-color: red">DIV 2</div>
<div id = "div3" style="position: relative; top: -400px; left: 500; width:100px; height:200px; background-color: red">DIV 3</div>
 </div>
</BODY>
</html>

Thấy vui mỗi lần nhận ra mình có thể viết lại sản phẩm trong quá khứ hiệu quả và gọn gàng hơn 1 nửa

[Question] Re: Thứ tự hiển thị với CSS	08/04/2008 14:27:57 (+0700) \| #8 \| 124000

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

@keyboardDigger: có gì đâu mà phải sorry, đâu phải bài nào mình cũng có thể xem được hết, bỏ qua là chuyện bình thường thôi.

Về cách làm của bạn mình cũng thử xem kỹ lưỡng lại vì trước giờ không nghĩ đến chuyện dùng thuộc tính position: relative mà lại kèm với top, left. Tra cứu lại hóa ra là dùng được và cũng rất tốt nữa. Thanks nhiều nhé.

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

Go to:

Users currently in here
1 Anonymous