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 Góp ý và Hỏi đáp thắc mắc chung Vỡ khung trên màn hình có độ phân giải nhỏ hơn hoặc bằng 1366x768  XML
  [Discussion]   Vỡ khung trên màn hình có độ phân giải nhỏ hơn hoặc bằng 1366x768 05/03/2013 15:44:55 (+0700) | #1 | 273862
tenminhlaanh
Member

[Minus]    0    [Plus]
Joined: 11/02/2013 09:34:07
Messages: 4
Offline
[Profile] [PM]
Có nhiều chủ đề thường phải để Full screen mới đọc hết được nội dung - không thì scroll mệt mỏi.
Đặc biệt trong " /hvaonline/readingRoom/list.html" hay các tuts, muốn đọc và làm luôn mà nhảy qua lại windows khá mệt.
VD: /hvaonline/posts/list/17283.html
[Up] [Print Copy]
  [Discussion]   HVA có thể thay đổi cách hiển thị bài viết cho dễ nhìn hơn ? 05/03/2013 16:29:15 (+0700) | #2 | 273867
[Avatar]
Ky0
Moderator

Joined: 16/08/2009 23:09:08
Messages: 532
Offline
[Profile] [PM]

tenminhlaanh wrote:
Có nhiều chủ đề thường phải để Full screen mới đọc hết được nội dung - không thì scroll mệt mỏi.
Đặc biệt trong " /hvaonline/readingRoom/list.html" hay các tuts, muốn đọc và làm luôn mà nhảy qua lại windows khá mệt.
VD: /hvaonline/posts/list/17283.html  

Bạn dùng trình duyệt nào? Màn hình độ phân giải bao nhiêu mà không đọc được hết nội dung?

Bất cứ bài viết nào dài thì đều phải scroll xuống để đọc nội dung!


- Ky0 -
UITNetwork.com
Let's Connect
[Up] [Print Copy]
  [Discussion]   HVA có thể thay đổi cách hiển thị bài viết cho dễ nhìn hơn ? 05/03/2013 18:06:06 (+0700) | #3 | 273873
tenminhlaanh
Member

[Minus]    0    [Plus]
Joined: 11/02/2013 09:34:07
Messages: 4
Offline
[Profile] [PM]
Mình nói scroll sang trái và sang phải ấy smilie
Browser đang dùng là Chrome version 25, đôi khi là opera. Resolution: 1366x768 ( chắc k liên quan smilie )
Bài viết bị lỗi vượt cỡ thì xảy ra khá thường xuyên, có bài tự co vừa trình duyệt và bài khác thì không:
- Lỗi trong tư liệu phòng đọc:



- Lỗi co bài viết trong đề tài sticked:/hvaonline/posts/list/17283.html



- Bài viết ổn định:/hvaonline/posts/list/4090.html





Mọi bài viết nên cùng bật chức năng co dãn sẽ tiện tham khảo hơn phải không?
[Up] [Print Copy]
  [Discussion]   HVA có thể thay đổi cách hiển thị bài viết cho dễ nhìn hơn ? 05/03/2013 22:05:21 (+0700) | #4 | 273874
cayaoanh830
Member

[Minus]    0    [Plus]
Joined: 13/06/2011 09:34:01
Messages: 37
Location: Nowhere
Offline
[Profile] [PM] [Email] [Yahoo!]
Tôi thấy là do các hình ảnh Quote và thanh công cụ không thu hẹp lại được.
...Yesterday - Today - Tomorrow...
[Up] [Print Copy]
  [Discussion]   HVA có thể thay đổi cách hiển thị bài viết cho dễ nhìn hơn ? 09/03/2013 23:58:12 (+0700) | #5 | 273970
lovezee
Member

[Minus]    0    [Plus]
Joined: 21/04/2010 22:41:40
Messages: 20
Offline
[Profile] [PM]
Em cũng gặp vấn đề tương tự. Đề xuất là với ảnh (đa số trường hợp là do ảnh) và nên đặt max-width là 800px, và body với min-width là 800px luôn (trường hợp sử dụng windows 8 1024x768 chia màn hình thành 2 phần).
[Up] [Print Copy]
  [Discussion]   HVA có thể thay đổi cách hiển thị bài viết cho dễ nhìn hơn ? 11/03/2013 12:06:47 (+0700) | #6 | 274007
hcvtpt
Member

[Minus]    0    [Plus]
Joined: 09/09/2004 00:27:24
Messages: 1
Offline
[Profile] [PM]
Khi mình zoom chữ cho to lên cũng bị như tràn như vậy, phải sử dụng thanh trượt qua trái phải (firefox), mà để chữ nhỏ thì đọc mỏi mắt quá.
[Up] [Print Copy]
  [Discussion]   HVA có thể thay đổi cách hiển thị bài viết cho dễ nhìn hơn ? 21/03/2013 06:15:24 (+0700) | #7 | 274255
[Avatar]
Flat
Member

[Minus]    0    [Plus]
Joined: 27/01/2013 01:40:29
Messages: 2
Offline
[Profile] [PM]

hcvtpt wrote:
Khi mình zoom chữ cho to lên cũng bị như tràn như vậy, phải sử dụng thanh trượt qua trái phải (firefox), mà để chữ nhỏ thì đọc mỏi mắt quá. 

Zoom set default 100%
[Up] [Print Copy]
  [Discussion]   HVA có thể thay đổi cách hiển thị bài viết cho dễ nhìn hơn ? 17/07/2013 14:15:10 (+0700) | #8 | 277518
[Avatar]
quanta
Moderator

Joined: 28/07/2006 14:44:21
Messages: 7265
Location: $ locate `whoami`
Offline
[Profile] [PM]

tenminhlaanh wrote:

Browser đang dùng là Chrome version 25, đôi khi là opera. Resolution: 1366x768 ( chắc k liên quan smilie )
 

Mình nghĩ có liên quan đấy. Vấn đề nằm ở [ code ] tag, độ phân giải màn hình, và cả browser nữa.

Ví dụ với bài viết này: /hvaonline/posts/list/44967.html
- Độ phân giải màn hình: 1366x768
- Trên Firefox, dùng Firebug, chọn Inspect Element, di chuột vào khung [ code ], chọn sang Layout tab sẽ thấy chiều rộng = 1270 + 2*10 (padding) + 2*10 (margin) = 1310 => dẫn đến vỡ khung.
- Trên Chromium, làm tương tự rồi di chuột đến <div class="coded"> thì thấy chiều rộng chỉ là 1290px => không bị vỡ khung.

Lý do:
- Trong Firebug, quay lại Style tab sẽ thấy đoạn này:
Code:
.coded {
    background-color: #444444;
    color: White;
    font-family: "Times New Roman",Times,serif;
    margin: 10px;
    padding: 10px;
    width: 1270px;
}

Disable "width" đi hoặc giảm xuống 1220px chẳng hạn thì... thanh cuốn sẽ biến mất.

Giải pháp tạm thời:
- cài Stylish addon lên: https://addons.mozilla.org/en-US/firefox/addon/stylish/
- Write new style => For www.hvaonline.net rồi thêm vào đoạn sau:
Code:
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.hvaonline.net") {
    .coded {
        width: 1220px !important;
    }
}


Giải pháp chuẩn: nên lấy độ phân giải màn hình và set width theo %.
Let's build on a great foundation!
[Up] [Print Copy]
  [Discussion]   Vỡ khung trên màn hình có độ phân giải nhỏ hơn hoặc bằng 1366x768 18/07/2013 09:35:35 (+0700) | #9 | 277551
[Avatar]
conmale
Administrator

Joined: 07/05/2004 23:43:15
Messages: 9353
Location: down under
Offline
[Profile] [PM]

Code:
.coded {
    background-color: #444444;
    color: White;
    font-family: "Times New Roman",Times,serif;
    margin: 10px;
    padding: 10px;
    width: 1270px;
}



chỉnh lại width = 90% rồi. Chờ vài giờ cache nó refresh rồi thử lại coi smilie.
What bringing us together is stronger than what pulling us apart.
[Up] [Print Copy]
  [Discussion]   Vỡ khung trên màn hình có độ phân giải nhỏ hơn hoặc bằng 1366x768 18/07/2013 12:50:13 (+0700) | #10 | 277558
[Avatar]
quanta
Moderator

Joined: 28/07/2006 14:44:21
Messages: 7265
Location: $ locate `whoami`
Offline
[Profile] [PM]

conmale wrote:

Code:
.coded {
    background-color: #444444;
    color: White;
    font-family: "Times New Roman",Times,serif;
    margin: 10px;
    padding: 10px;
    width: 1270px;
}

chỉnh lại width = 90% rồi. Chờ vài giờ cache nó refresh rồi thử lại coi smilie.
 

Chưa ổn anh ạ. Thanh cuốn vẫn xuất hiện khi nội dung [ code ] quá dài: /hvaonline/posts/list/44966.html#277505

Có lẽ phải sửa cả <pre> tag để wrap text nữa:
Code:
pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


http://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag
Let's build on a great foundation!
[Up] [Print Copy]
  [Discussion]   Vỡ khung trên màn hình có độ phân giải nhỏ hơn hoặc bằng 1366x768 29/07/2013 11:08:01 (+0700) | #11 | 277851
PXMMRF
Administrator

Joined: 26/09/2002 07:17:55
Messages: 946
Offline
[Profile] [PM]
Không một website nào lại có thể đáp ứng hoàn hảo mọi màn hình có độ phân giải khác nhau và các loại trình duyệt mà user đang sử dụng.

Vì vậy người thiết kế website phải thiết kế trang mạng của mình theo một chuẩn "thông dụng" nhất, thí dụ cho màn hình có độ phân giải 1024x768 và trình duyệt IE (hay Firefox). Khi đó họ phải lập các table và điều chỉnh size của hình ảnh (trong trang) cho phù hợp với "chuẩn " trên.
Vì vậy không ít trang mang thường có chú thích đại khái như thế này: "Website xem tốt nhất với màn hình có độ phân giải 1024x768 (pixel) và với IE (browser)"

Khi thấy khung hình của trang đang đọc bị phá vỡ (nên người đọc phải "rê" chuột sang trái và phải mỗi dòng trên post-và như vậy rất mất thì giờ, khó chịu) thì người đọc có thể zoom out liên tục. Nhưng nếu zoom out quá cỡ thì chữ trên post sẽ nhỏ xíu- lại khó đọc.

Thiết kế trang HVA forum tôi thấy cơ bản là tốt, chỉ có 2 trường hợp cần lưu ý vì dễ gây vỡ khung hình:

1- Thành viên HVA upload lên forum các hình ảnh có Width quá rộng > 800 pixels. Họ không resize (Width) image trước khi upload. Height của image thì lại không quan trọng. Ta cần phải nhắc nhở các thành viên. Tốt nhất là giữ cho Width của image khoảng 700 pixels.

2- Có không ít trường hợp user sử dụng tiện ích "code" trên forum gây vỡ khung hình. Nếu dùng tiên ích "quote" thì lại không sao cả. Việc này là thực tế, nhung tôi chưa tìm hiểu để biết nguyên nhân.



The absence of disagreement is not harmony, it's apathy.
(Socrates)
Honest disagreement is often a good sign of progress.
(Mahatma Gandhi)
[Up] [Print Copy]
  [Discussion]   Vỡ khung trên màn hình có độ phân giải nhỏ hơn hoặc bằng 1366x768 29/07/2013 12:33:47 (+0700) | #12 | 277853
PXMMRF
Administrator

Joined: 26/09/2002 07:17:55
Messages: 946
Offline
[Profile] [PM]
Tại trang mà quanta dẫn ra dưới đây:
/hvaonline/posts/list/44966.html#277528

thì lỗi phá vỡ khung hình gây ra từ bài viết thứ ba trong trang (bài số 17/07/2013 04:47:25 (+0700) | #3 | 277505 ) do bạn minhquang.qhamy post.
Tại bài viết này bạn minhquang.qhamy đã dùng tiện ích "code" thay vì nên dùng "quote"

(Ai đó thử editt lại bài này với "quote" sẽ thấy hiệu quả ngay)

Có một điều tôi thắc mắc mà chưa có dịp bàn. Đó là tiện ích "code" trong không ít trường hợp vẫn phá vỡ khung hình forum, ngay cả khi chiều rộng của dòng text (trong code) không dài, thậm chí khá ngắn. Đó là thực tế.
The absence of disagreement is not harmony, it's apathy.
(Socrates)
Honest disagreement is often a good sign of progress.
(Mahatma Gandhi)
[Up] [Print Copy]
  [Discussion]   Vỡ khung trên màn hình có độ phân giải nhỏ hơn hoặc bằng 1366x768 29/07/2013 13:01:15 (+0700) | #13 | 277856
[Avatar]
quanta
Moderator

Joined: 28/07/2006 14:44:21
Messages: 7265
Location: $ locate `whoami`
Offline
[Profile] [PM]

PXMMRF wrote:
Không một website nào lại có thể đáp ứng hoàn hảo mọi màn hình có độ phân giải khác nhau và các loại trình duyệt mà user đang sử dụng.
 

Vâng, nhưng với những trình duyệt và độ phân giải màn hình thông dụng thì chắc sẽ làm được.

Ví dụ:
- độ phân giải màn hình >= 1024x768
- trình duyệt: Firefox, Chrome, ...

PXMMRF wrote:

Khi thấy khung hình của trang đang đọc bị phá vỡ (nên người đọc phải "rê" chuột sang trái và phải mỗi dòng trên post-và như vậy rất mất thì giờ, khó chịu) thì người đọc có thể zoom out liên tục. Nhưng nếu zoom out quá cỡ thì chữ trên post sẽ nhỏ xíu- lại khó đọc.
 

Tạm thời em đang phải dùng Stylish add-on như đã đề cập ở trên.

PXMMRF wrote:

Thiết kế trang HVA forum tôi thấy cơ bản là tốt, chỉ có 2 trường hợp cần lưu ý vì dễ gây vỡ khung hình:

1- Thành viên HVA upload lên forum các hình ảnh có Width quá rộng > 800 pixels. Họ không resize (Width) image trước khi upload. Height của image thì lại không quan trọng. Ta cần phải nhắc nhở các thành viên. Tốt nhất là giữ cho Width của image khoảng 700 pixels.
 

Tốt nhất là: dù họ có chèn ảnh rộng thế nào đi nữa, mình sẽ làm 1 cái thanh cuốn chỗ bao quanh image thôi, chứ không để xuất hiện thanh cuốn ở cuối trang.

PXMMRF wrote:

2- Có không ít trường hợp user sử dụng tiện ích "code" trên forum gây vỡ khung hình. Nếu dùng tiên ích "quote" thì lại không sao cả. Việc này là thực tế, nhung tôi chưa tìm hiểu để biết nguyên nhân.
 

PXMMRF wrote:
Tại trang mà quanta dẫn ra dưới đây:
/hvaonline/posts/list/44966.html#277505

thì lỗi phá vỡ khung hình gây ra từ bài viết thứ ba trong trang (bài số 17/07/2013 04:47:25 (+0700) | #3 | 277505 ) do bạn minhquang.qhamy post.
Tại bài viết này bạn minhquang.qhamy đã dùng tiện ích "code" thay vì nên dùng "quote"

(Ai đó thử edit lại bài này với "quote" sẽ thấy hiệu quả ngay)
 

Có những cái phải dùng [ code ] mới đẹp anh ạ.

PXMMRF wrote:

Có một điều tôi thắc mắc mà chưa có dịp bàn. Đó là tiện ích "code" trong không ít trường hợp vẫn phá vỡ khung hình forum, ngay cả khi chiều rộng của dòng text (trong code) không dài, thậm chí khá ngắn. Đó là thực tế. 

Sau khi anh conmale chỉnh width thành 90% rồi, anh vẫn còn thấy topic nào đó bị tình trạng này ạ? Anh cho em 1 ví dụ với.
Let's build on a great foundation!
[Up] [Print Copy]
  [Discussion]   Vỡ khung trên màn hình có độ phân giải nhỏ hơn hoặc bằng 1366x768 29/07/2013 15:59:29 (+0700) | #14 | 277864
PXMMRF
Administrator

Joined: 26/09/2002 07:17:55
Messages: 946
Offline
[Profile] [PM]

Hì hì.
Chúng ta sẽ kiểm tra lại chính cái trang mà chúng ta vừa nói nhé.
Trang này;

/hvaonline/posts/list/44966.html#277528

Máy của tôi set độ phân giải là 1024x768 (thông dung)
Tôi sử dung trình duyệt Firefox version 22.0 , Zoom= 100%

Đây là các hình chụp toàn màn hình bị vỡ khi bài viết thứ ba trong trang (bài số 17/07/2013 04:47:25 (+0700) | #3 | 277505 ) do bạn minhquang.qhamy post.
mà trong bài viết này bạn minhquang.qhamy đã dùng tiện ích "code"






Và đây là hình chụp toàn màn hình sau khi tôi đã edit lại bài nói trên: chỉ thay "code" bằng "quote" mà thôi.






Ghi chú: Hiện nay tôi đã chỉnh lại trang
/hvaonline/posts/list/44966.html#277528 (thay code= quote tại bài thứ ba)
----------------------------

Tôi đã tự mình thiết kế khá nhiều website (loại khó thiết kế vì dùng nhiều flash).

Khi thiết kế web có hai cách setting width của một table, image, flash ... xác định bằng % (1) (thí dụ 80% , 90% ...width của trang) và xác định với trị số pixel cụ thể (2) (thí dụ width= 600, 724 pixels...).
Setting với trị số % thì dễ và nhanh nhưng website rất dễ bị phá vỡ khung hình (frame) và /hoặc khung hình không bị phá vỡ khi xem bằng IE lại bị phá vỡ, hoặc các hình đè lên nhau khi xem website với Firefox....

Vì vây nên setting bằng pixels. Không nên setting bằng %

Các bạn nhớ đọc thật kỹ bài viết của tôi nhé. Cảm ơn!


The absence of disagreement is not harmony, it's apathy.
(Socrates)
Honest disagreement is often a good sign of progress.
(Mahatma Gandhi)
[Up] [Print Copy]
  [Discussion]   Vỡ khung trên màn hình có độ phân giải nhỏ hơn hoặc bằng 1366x768 29/07/2013 21:13:40 (+0700) | #15 | 277867
[Avatar]
quanta
Moderator

Joined: 28/07/2006 14:44:21
Messages: 7265
Location: $ locate `whoami`
Offline
[Profile] [PM]
Anh PXMMRF,

Khi anh dùng [ quote ] thì không còn xuất hiện thanh cuốn nữa, đó là bởi vì [ quote ] đã tự enable text wrapping rồi, trong khi [ code ] thì không.

PXMMRF wrote:

Khi thiết kế web có hai cách setting width của một table, image, flash ... xác định bằng % (1) (thí dụ 80% , 90% ...width của trang) và xác định với trị số pixel cụ thể (2) (thí dụ width= 600, 724 pixels...).
Setting với trị số % thì dễ và nhanh nhưng website rất dễ bị phá vỡ khung hình (frame) và /hoặc khung hình không bị phá vỡ khi xem bằng IE lại bị phá vỡ, hoặc các hình đè lên nhau khi xem website với Firefox....

Vì vây nên setting bằng pixels. Không nên setting bằng %
 

Vâng ạ. Ý em là nếu để được % là đẹp nhất chứ để pixels với màn hình có độ phân giải cao (ví dụ 1440x900) thì nhiều khi hơi lọt thỏm.
Let's build on a great foundation!
[Up] [Print Copy]
  [Discussion]   Vỡ khung trên màn hình có độ phân giải nhỏ hơn hoặc bằng 1366x768 30/07/2013 09:38:13 (+0700) | #16 | 277876
PXMMRF
Administrator

Joined: 26/09/2002 07:17:55
Messages: 946
Offline
[Profile] [PM]

quanta wrote:
Anh PXMMRF,
Khi anh dùng [ quote ] thì không còn xuất hiện thanh cuốn nữa, đó là bởi vì [ quote ] đã tự enable text wrapping rồi, trong khi [ code ] thì không. 

Chính xác.
Và việc bây giờ là anh conmale cần tạo một cell trong table. Cell này dùng cho "code" và cell này cũng được fix bởi giá trị pixels cụ thể, phù hợp. Anh conmale thiết kế website-forum bằng Java, tôi biết ít về lĩnh vực này, không bằng anh conmale, nên không dám lạm bàn.


Vâng ạ. Ý em là nếu để được % là đẹp nhất chứ để pixels với màn hình có độ phân giải cao (ví dụ 1440x900) thì nhiều khi hơi lọt thỏm. 

Khi ta dùng cách xác định table, image, flash... bằng %, thì có nghĩa là width của table xác định bằng % đồng thời width của image trong một cell nào đó cũng fix bằng % width của cell (một table có nhiều cell). Đó chính là sự rắc rối dễ gây vỡ khung hình.

Như tôi đã viết:
Không một website nào lại có thể đáp ứng hoàn hảo mọi màn hình có độ phân giải khác nhau và các loại trình duyệt mà user đang sử dụng. 


Dẫn ra là một thí dụ cụ thể (cái gì cũng phải cụ thể thì bàn mới hay. Hi hì). Đây là một website mà tôi thiết kế từ A--->Z (Y, Z là đánh máy bài viết)
http://mybich.com
Thiết kế về mỹ phẩm nên phải mầu mè, xinh động chút ít
Các bạn vào mục "Products" để kiểm tra.
Nếu xem với IE (8,9,10) thì dù màn hình setting ở độ phân giải nào (từ thấp đến cao) và tại bất cứ độ phân giải nào nếu điều chỉnh thay đổi zoom (từ 50%-200%..) thì khung hình cũng không bị phá vỡ, xô lệch.
Nhưng khi dùng Firefox thì khung hình ổn định ở mọi độ phân giải màn hình. Nhưng tại một độ phân giải cụ thể nào đó, nếu đặt zoom ở 100% (reset zoom) thì OK. Nhưng nếu "zoom in" hay "zoom out" thì một số khung hình bị xô lệch. Đúng không?

Tuy nhiên website cũng xem khá trên CentoS 6.x.

Như thế đấy!


(Các bạn xem và nhắc bạn gái mua mỹ phẩm của Mỹ bích nhé. Cám ơn! Hì hì)
The absence of disagreement is not harmony, it's apathy.
(Socrates)
Honest disagreement is often a good sign of progress.
(Mahatma Gandhi)
[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|