Sửa lỗi nhảy dòng, tự xuống dòng, vỡ giao diện Nukeviet trên Chrome

Thứ tư - 04/02/2015 08:25
Hướng dẫn bạn điều chỉnh CSS cho giao diện NukeViet để sửa các lỗi nhảy dòng, xuống dòng, rớt chữ tại thanh Menu hoặc lệch, vỡ giao diện khi vào web bằng Chrome
Điều chỉnh CSS Nukeviet
Điều chỉnh CSS Nukeviet

Từ phiên bản Google Chrome 39 trở đi, khá nhiều web, bao gồm cả Nukeviet bị ảnh hưởng khá nhiều đến giao diện. Hầu hết các trình duyệt chung mã nguồn hoặc chung engine với Chrome ( Cốc cốc, Opera - mình test và bị y chang, Chromium...) thì đều phát sinh lỗi này, dẫn đến khách truy cập nhìn trang web rất kinh.

Chúng ta có thể điều chỉnh cơ chế Render cho Chrome để cải thiện tình trạng trên, do có rất nhiều trang bị ảnh hưởng nặng, tình cả Facebook. Tuy nhiên nếu sửa lỗi ngay từ website của chúng ta thì có lẽ vẫn tốt hơn, vì bạn đâu có sửa trong Chrome của khách truy cập được. :D

Bài viết này nhằm đưa ra một số CSS nhằm sửa các lỗi phổ biến trên đối với giao diện NukeViet mặc định (default). Các bạn có thể xem xét để sửa cho các giao diện bị lỗi tương tự.

1/ Giao diện NukeViet 3.x :

+ Giao diện có khối bị lệch sang một bên

Bạn mở template.css hoặc screen.css trong theme và tìm dòng

div.contentwrapper {    padding: 10px 0;    clear: both;}

Trong đó thuộc tính clear:both là thuộc tính được thêm vào để sửa lỗi.

+ Lỗi nhảy dòng, chữ bị rớt trong Menu và một số khu vực khác :

Thường các lỗi này phát sinh ở các vùng dùng thẻ <li>. Ta thêm thuộc tính white-space: nowrap; để sửa.

Với các theme sửa từ theme default, thì thường chỉ cần sửa các phần sau :

Tiếp tục trong template.css, tìm dòng

ul.nav li {

Sửa lại như bên dưới :

ul.nav li {float: left;position: relative;white-space: nowrap;}

Đối với phần hiển thị của modules news dạng " Chuyên mục, tin khác nằm bên phải", bạn mở file news.css trong thư mục themes/default/
tìm :

div.news_column div.header a {

sửa  thành

div.news_column div.header a {display: block;float: left;line-height: 20px;height: 28px;padding: 0 0 0 10px;white-space: nowrap;}

Tới đây thì hầu như các lỗi nhảy dòng cơ bản đã được điều chỉnh xong. Chủ yếu là thẻ white-space.

1/ Giao diện NukeViet 4.x :

Đối với giao diện NV4 thì hầu như các lỗi chỉ xảy ra phần nhảy dòng, ta chỉ cần thêm các dòng sau vào dưới cùng file style.css của theme default :

#footer .footer-copyright .menu, .breadcrumb>li, .navbar-nav>li, #toolbar ul li, ul.no-wrap li{white-space:nowrap;}

Đoạn CSS trên sửa hầu hết các lỗi nhảy dòng của Menu, breadcrumb và menu ở footer.

Tuy vậy dòng code này có thể ảnh hưởng đến giao diện khi khách truy cập trên thiết bị di động, do theme default của NV4 là responsive. Ngoài ra thì các trình duyệt đi động không bị ảnh hưởng bởi vấn đề nhảy dòng như trên Chrome của PC, do đó bạn nên điều chỉnh như sau :

Tìm

@media (min-width:768px){

Thêm đoạn CSS bên trên vào dưới dòng này. Khi đó ta sẽ có

@media (min-width:768px){#footer .footer-copyright .menu,.breadcrumb>li,.navbar-nav>li,#toolbar ul li,ul.no-wrap li{white-space:nowrap}

Có nghĩa là các dòng CSS trên chỉ áp dụng cho thiết bị có kích thước chiều rộng màn hình từ 768px trở lên, né được hầu hết các thiết bị di động.

Bạn có thể tham khảo thêm bài về Hướng dẫn chỉnh sửa (RIP) theme default trong NukeViet 4 để biết cách điều chỉnh CSS tốt hơn, cũng như tận dụng tính năng tuỳ chỉnh CSS được tích hợp trong NukeViet 4. Hy vọng các bản tiếp theo của Chrome sẽ giải quyết triệt để vấn đề này.

 

Chúc bạn thành công !

Tổng số điểm của bài viết là: 15 trong 3 đánh giá

Xếp hạng: 5 - 3 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

Mã bảo mật   
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây