Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Đã giới hạn chiều rộng ảnh nhưng vẫn bị lỗi khi responsive

Chủ đề thuộc danh mục 'Blogspot' được đăng bởi Lâm Kiều, 14/1/14.

Lượt xem: 4,069

  1. Lâm Kiều Thành viên cấp 1

    Hiện tại thì kiến thức về HTML, CSS, cũng như ngôn ngữ lập trình của Blogger mình nắm khá rõ về cơ bản rồi, tự học là chính. Mình có tự tay làm ra một vài template Blogger, mượn ý tưởng của những mã nguồn khác khá nhiều. Vào thẳng vấn đề chính mình có thiết kế giao diện với các thuộc tính css như sau:

    HTML:
    img  {
max-width: 100%;
height: auto;
}
    HTML:
    .widget {
margin-bottom: 27px;
overflow: hidden;
}
    HTML:
    .article {
width: 66%;
float: left;
padding-bottom: 20px;
border-right: 1px solid #D5D5D5;
padding-right: 20px;
padding-top: 22px;
}
    và đoạn css tùy chỉnh cho responsive tại blog của mình.

    Vấn đề đây khi thu nhỏ màn hình lại mặc dù đã giới hạn img max-width là 100% rồi nhưng ảnh vẫn lấn ra ngoài, và bị che mất đi một đoạn. Biện pháp khắc phục tạm bợ của mình hiện tại là khi chiều rộng trang 500px< thì
    HTML:
    .post img {margin-left:-15px}
    Nhờ các bạn chuẩn đoán tại sao hình ảnh bị như thế, và cách khắc phục ạ.

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    Lâm Kiều, 14/1/14
    #1
  2. TrollVL

    TrollVL Thành viên cấp 2

    Thật ra bạn nói vậy không ai hiểu bạn muốn nói về vấn đề gì đâu. Hơn nữa kể cả người đang thiết kế blog dưới nền tảng blogspot cũng vậy,bởi vì mỗi template có cấu trúc khác nhau.
    TrollVL, 14/1/14
    #2
  3. Lâm Kiều

    Lâm Kiều Thành viên cấp 1

    Cái này không post link demo được không thể nói sao cho rõ, thực chất mình nghĩ cái này chã liên quan gi tới cấu trúc của Blogger cả.

    Ví dụ đi

    www . kslzone . net/2014/01/tao-va-su-dung-includable-trong-blogger.html

    bạn có thể thu nhỏ cửa sổ lại bạn sẽ thấy mấy cái hình lớn của mình bị ăn đi ở phía bên phải, mình nghĩ cái này chỉ liên quan đến CSS thôi.
    Lâm Kiều, 14/1/14
    #3
  4. TrollVL

    TrollVL Thành viên cấp 2

    Sở dĩ mình nói vậy vì bạn đang post bài trong box blogger, vì thế mình nghĩ bạn nói về CSS trong template. Về vấn đề của bạn đưa ra phía trên mình nghĩ bạn muốn nói khi xem blog ở chế độ màn hình nhỏ thì hình ảnh vẫn lấn sang sidebar, có thể khác phục được bằng cách thêm !important vào. Và mẹo nhỏ này mình đã viết cách đây hơn 1 năm trên blog này tại đây
    Code:
    .post img {max-width:98% !important}
    Đoạn code trên có tác dụng tối đa chiều rộng của ảnh trong bài viết để không cho lấn sang sidebar dù cho màn hình có nhỏ như thế nào.
    Về vấn đề responsive cho blogspot mình có viết 1 bài hướng dẫn tại đây. Bạn có thể xem qua và góp ý cho mình, cảm ơn!
    TrollVL, 14/1/14
    #4
    Lâm Kiều thích bài viết này
  5. Lâm Kiều

    Lâm Kiều Thành viên cấp 1

    Nếu bạn để ý ở đầu trang mình đã giới hạn max-width 100%, trước đây mình đã thử giảm xuống 98% nhưng vẫn vậy, bạn có thể tự mình kiểm chứng = firebug or những thứ tương tự. Dù sao cũng cám ơn bạn!
    Lâm Kiều, 14/1/14
    #5
  6. TrollVL

    TrollVL Thành viên cấp 2

    Ý của mình không phải 100% hay 98% mà là thêm !important vào cho nó :)
    TrollVL, 15/1/14
    #6
    Lâm Kiều thích bài viết này
  7. Lâm Kiều

    Lâm Kiều Thành viên cấp 1

    !important chỉ đưa thứ tự ưu tiên của đoạn css mình lên đầu thôi ^^, trong khi mình có mỗi một đoạn css quy định cho thẻ img.

    Vấn đề mình phát hiện ra lúc chèn ảnh, thì thẻ <a ...> bao ngoài tất cả các thẻ img có sẵn thuộc tính style="margin-left: 1em; margin-right: 1em;".

    Mình đã thêm
    và hình như hoạt động tốt rồi.

    Lại có thêm ý tưởng để chia sẽ trên Blog của mình :)

    Cám ơn trollvl nhiệt tính giúp đỡ!
    Chỉnh sửa lần cuối: 15/1/14
    Lâm Kiều, 15/1/14
    #7
    TrollVL thích bài viết này
  8. khanhhlu

    khanhhlu Mới đăng kí

    sao không có demo gì hết vậy
    khanhhlu, 19/1/14
    #8
  9. Lâm Kiều

    Lâm Kiều Thành viên cấp 1

    Có demo ở trên mà bạn kslzone[dot]net, ksltech[dot]blogspot[dot]com nhưng mà mình sửa xong hết rồi :)
    Lâm Kiều, 20/1/14
    #9

Ủng hộ diễn đàn