Về kỹ thuật tự co dãn theo nội dung... Các Pro chỉ với!

[trhthong]

Hôm nay đang ngồi nhìn cái khung viết theo kỹ thuật 4div, tớ chợt nghĩ hình như kỹ thuật 4div chỉ cho phép tự động co dãn theo chiều dọc, còn chiều ngang thì không được ??? Ngồi nghĩ lại, thì thấy hình như đúng là như vậy. Ngồi sửa lại code html (thêm nhiều nội dung) cũng thấy đúng như vậy. Lục lại kỹ thuật Slicing Door, thì thấy cũng tương tự.
Nhưng giờ tớ muốn cái khung tự động co dãn dựa vào nội dung, theo chiều ngang thì có cách nào không vậy?
Ai biết chỉ mình với hen!
Hỏi cho biết thôi. Chứ tất nhiên không ai áp dụng cái tớ nói vào trang web đâu nhỉ? Chẳng biết áp dụng vào đâu nữa. Nếu ai biết chỗ áp dụng thì chỉ luôn với hen!
Cảm ơn nhiều!

[superthin]

Thì đừng đặt kích thước DIV cho chiều ngang, dùng 2 DIV, DIV bao bên ngoài có kích thước để canh chỉnh khung cho đẹp, còn DIV chứa bên trong nó thì đừng có đặt width để tự nó co giãn khi có nội dung.

[trhthong]

Cảm ơn bạn!
Nhưng mình muốn nội dung tự co dãn, trong khung được tạo thành từ kỹ thuật 4div hoặc tương tự 4div à. Nếu thực hiện như bạn nói, thì có lẽ không thực hiện được yêu cầu trên... Bạn thử kiểm tra xem mình nói có đúng không hen, vì có thể mình thực hiện sai. Xin đưa ra đoạn mã CSS mình đã dùng như sau:


div.wrap {
width: 15%;
background: #00FF66 url(topleft.png) no-repeat top left;
}
div.wrap div {
background: transparent url(topright.png) no-repeat top right;
}
div.wrap div div {
background: transparent url(bottomleft.png) no-repeat bottom left;
}
div.wrap div div div {
background: transparent url(bottomright.png) no-repeat bottom right;
}

[phongjalvn]

http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/
All expandable nè bồ

[trhthong]

Ừa... cảm ơn bạn nhen. Ví dụ trong trang bạn đưa ra, tronng Firefox hoạt động tốt lắm.
Nhưng có vấn đề là tớ thấy nó chỉ co dãn theo chiều thẳng đứng, còn chiều ngang thì không.
Và trong IE thì bị lỗi hiễn thị như vầy nè:
http://trhthong.webng.com/data/pics/css_error.jpg

[darkera13]

http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/
All expandable nè bồ

Cái ví dụ này tác giả của nó làm ra để tránh trường hợp người dùng zoom cỡ chữ to lên thì bị vỡ layout. Kỹ thuật này không khó, nhưng cần sự khéo léo và tỉ mỉ (thay vì dùng px chúng ta chuyển hết sang dùng em, cái em nó là kích thước theo tỷ lệ chứ không phải kích thước fix như px).

Kỹ thuật này trong tương lai sẽ bị thất truyền (theo tôi) vì thực tế ít người sử dụng chức năng zoom, nếu có sử dụng thì cũng chỉ zoom 1,2 cỡ nên cũng không đến nỗi phá vỡ layout, thứ 2 là dần dần các trình duyệt sẽ hỗ trợ việc zoom toàn bộ (tất cả thành phần trên) trang web (Firefox 3 đã hỗ trợ).

Còn theo tôi hiểu thì bác thong muốn nói đến là khả năng co dãn của cái box được bo = kỹ thuật 4 div khi thay đổi chiều ngang, thay đổi độ phân giải của trình duyệt thì phải?

http://www.mediafire.com/?md45a9gois3

Tôi làm dựa trên cái image của ví dụ phía trên, bạn thử tham khảo xem nhé.

[trhthong]

:D lục trong diễn đàn mới thấy có một topic thảo luận về cái này.
http://ddth.com/showthread.php?t=180652&page=2
Nhưng mà 1 topic này lại thảo luận cả... 2 nội dung.
Chân thành cảm ơn mọi người nha! Ai có solution cho cái này thì share cho tớ với!

[darkera13]

:D lục trong diễn đàn mới thấy có một topic thảo luận về cái này.
http://ddth.com/showthread.php?t=180652&page=2
Nhưng mà 1 topic này lại thảo luận cả... 2 nội dung.
Chân thành cảm ơn mọi người nha! Ai có solution cho cái này thì share cho tớ với!

Có vẻ như bác không quan tâm đến cái solution của tôi nhỉ?

Nửa tiếng của mình hóa ra vô nghĩa vậy sao. Buồn 1s.

[trhthong]

:D @darkera13 Quên một lời cảm ơn riêng tới bác...
Ghé qua topic này (có comment) là tớ đã ghi nhận tất cả ý kiến của các bạn rồi, có lẽ lúc đó hơi đãng trí nên quên mất thôi. Thông cảm nhé!
Mọi ý kiến của mọi người đều có cái hay riêng, và tất nhiên là rất bổ ích cho tớ. Vì vậy mong có được sự hướng dẫn từ các bạn - như bác darkare13 chẳng hạn.
Mong được các bạn đóng góp thêm để tớ có thể hoàn thành được topic này. Cảm ơn nhiều!
À, dạo này bận cực kỳ, nên chẳng ngó ngàn gì tới CSS, cũng như không thể ghé qua diễn đàn được, nên việc reply hơi chậm trễ, nếu gây phiền gì, mong các bạn thông cảm nhen. :)

[hellangle381]

Bạn muốn nội dung nào co giãn theo chiều ngang thì để width của nó có đơn vị là em còn height là px, đồng thời font-size củng dùng đơn vị là em nhé :D

[=========> Bổ sung bài viết <=========]

Việc áp dụng cũng nhiều chứ bạn, mình cho một vì dụ: một người nào đó ghé tragn web của bạn, thấy chữ nhỏ quá muốn phóng to lên đọc, lúc này nếu bạn để font-size là em thì mới có thể phóng to được chứ để px là chiệu chít :)