Giải đáp nhanh

Trả lời

Trong làm web bạn dùng position là absolute cho đối tượng div hoặc bất kì đối tượng nào khác, nếu muốn cân giũa cho đối tượng đó bạn phải sử dụng các thuộc tính margin, left và right, ví dụ:

Bạn đặt một thẻ div với class là elements, trong css bạn viết css cho class này như sau:

.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}

Để đối tượng .elements luôn nằm trên các đối tượng khác, bạn chỉ việc thêm vào thuộc tính z-index thật lớn, ví dụ như 9999. Rất đơn giản phải không nào? Chúc các bạn thành công!

Nếu câu trả lời sai ngại gì không chỉnh? Nếu câu trả lời thiếu ngại gì không thêm? Nếu có câu trả lời hay hơn ngại gì không chia sẻ? Mời các bạn comment bên dưới

Sau đây là 5 HTML, CSS, JS framework ( Frontend Frameworks) được sử dụng phổ biến nhất hiện nay. Mỗi Framework đều có những đặc điểm riêng phù hợp với từng mục đích sử dụng của người phát triển web. Nếu bạn chưa từng dùng qua thì có thể tham khảo để tìm ra một frameworks phù hợp với dự án của mình.

1 Bootstrap: 

Là HTML, CSS, JS framework phổ biến nhất hiện nay với lượng người dùng khá lớn. Framework này hỗ trợ hầu hết các thành phần có trong một website cũng như tính năng responsive + mobile nên nó có thể sử dụng cho nhiều dự án khác nhau từ lớn đến nhỏ.

Một số thông tin chi tiết:

    Tác giả: Mark Otto và Jacob Thornton.
    Phát hành: 2011
    Phiên bản hiện tại: 3.3.5 ( + 4.0 Alpha)
    Mức độ phổ biến: 75,000 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: RWD ( Responsive web design ) & mobile first
    Preprocessors: Less and Sass
    Responsive: Có
    Modular: Có
    Icon set: Glyphicons Halflings set
    Add-ons: Không kèm theo, nhưng có rất nhiều plugin từ bên thứ 3.
    Thành phần độc đáo: Jumbotron
    Tài liệu: Hỗ trợ đầy đủ
    Customization: Basic GUI Customizer , bạn cần phải nhập vào các giá trị màu bằng tay, vì không có bảng chọn màu có sẵn.
    Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE8+ (Bạn cần thêm Respond.js để hỗ trợ IE8)
    Giấy phép: MIT

Download


2 Foundation by ZURB:

Foundation là tên tuổi thứ 2 mà ta nhắc tới. Được sự bảo bọc của công ty ZURB đây là một nền tảng vô cùng mạnh mẽ. Foundation được sử dụng cho các website lơn nhứ Facebook, Mozilla, Ebay, Yahoo!...

Một số thông tin chi tiết:

    Tác giả: ZURB
    Phát hành: 2011
    Phiên bản hiện tại: 5.5.2
    Mức độ phổ biến: 18,000 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: RWD ( Responsive web design ), mobile first, semantic
    Kích thước: 326 KB
    Preprocessors: Sass
    Responsive: Có
    Modular: Có
    Icon set: Foundation Icon Fonts
    Add-ons: Có.
    Thành phần độc đáo:  Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
    Tài liệu: Hỗ trợ đầy đủ
    Customization: No GUI customizer, chỉ có hướng dẫn tùy biến
    Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
    Giấy phép: MIT

Download 


3 Semantic UI:
 
Semantic UI nỗ lực không ngừng để làm cho các trang web xây dựng nhiều ngữ nghĩa (Semantic - Phần này nếu không hiểu bạn nên tìm hiểu riêng). Nó sử dụng các nguyên tắc ngôn ngữ tự nhiên, do đó làm cho mã dễ đọc và dễ hiểu.

Một số thông tin chi tiết:

    Tác giả: Jack Lukic
    Phát hành: 2013
    Phiên bản hiện tại: 2.1.4
    Mức độ phổ biến: 12,900 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: Semantic, tag ambivalence, responsive.
    Kích thước: 552 KB
    Preprocessors: Less
    Responsive: Có
    Modular: Có
    Icon set: Font Awesome
    Add-ons: Không.
    Thành phần độc đáo:  Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
    Tài liệu: Hỗ trợ rất tốt
    Customization: No GUI customizer, chỉ có hướng dẫn tùy biến
    Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
    Giấy phép: MIT

Download


4 Pure by Yahoo!:

Có trọng lượng nhẹ, hỗ trợ modul,viết thuần CSS, bao gồm các thành phần có thể được sử dụng cùng nhau hoặc riêng tùy thuộc vào nhu cầu của bạn.

Một số thông tin chi tiết:

    Tác giả: Yahoo
    Phát hành: 2013
    Phiên bản hiện tại: 0.6.0
    Mức độ phổ biến: 9,900 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi:  SMACSS, minimalism
    Kích thước:  18 KB
    Preprocessors: Không có
    Responsive: Có
    Modular: Có
    Icon set: Không có, nhưng bạn có thể sử dụng Font Awesome
    Add-ons: Không.
    Thành phần độc đáo: Không
    Tài liệu: Hỗ trợ tốt
    Customization: Basic GUI Skin Builder
    Trình duyệt hỗ trợ: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
    Giấy phép: Yahoo! Inc. BSD

Download


5 UIkit by YOOtheme:

là một bộ sưu tập ngắn gọn dễ sử dụng và dễ dàng tùy chỉnh các thành phần. Mặc dù nó không phải là phổ biến như các đối thủ khác,nhưng nó cung cấp các chức năng tương tự và chất lượng.

Một số thông tin chi tiết:

    Tác giả: YOOtheme
    Phát hành: 2013
    Phiên bản hiện tại: 2.22.0
    Mức độ phổ biến:  3,800 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi:  RWD, mobile first
    Kích thước:   118 KB
    Preprocessors: Less, Sass
    Responsive: Có
    Modular: Có
    Icon set: Font Awesome
    Add-ons: Có.
    Thành phần độc đáo: Article, Flex, Cover, HTML Editor
    Tài liệu: Hỗ trợ tốt
    Customization: Advanced GUI Customizer
    Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9+
    Giấy phép: MIT

Download

Với một số thông tin trên, chúc các bạn tìm được framework ưng ý nhất.

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- BlueTrip - Css Framework phong cách đơn giản dễ sử dụng 
- 6 slider miễn phí mà sử dụng thư viện jQuery
- Tạo menu dropdowns nhanh trong Bootstrap  
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Khung comment và like box của Facebook thường bị cố định kích thước nên khi giao diện web co giãn (resposive) thì sẻ bị lỗi phần này. Để fix lỗi này ta chỉ cần sử dụng đoạn css đơn giản với thẻ !important.

Bạn thêm vào file css của website đoạn code sau:

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style], .fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style]
{
       width: 100% !important;
}

Lưu lại và xem kết quả nhé!

Lưu ý là việc fix lỗi này giúp cho giao diện website để đáp ứng được nhiều kích thước màn hình khác nhau hoặc khi co giản cửa sổ trình duyệt. Còn trên giao diện mobile thì Facebook sẻ tự load khung comment Facebook phiên bản mobile rồi.

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

Xem thêm:

- Hướng dẫn gắn nhanh comment Facebook cho blogger
- Cách gắn comment Facebook cho diễn đàn Xenforo
- Hướng dẫn fix lỗi Moderator không quản lý được comment Facebook

Với một người thiết kế web thông thạo css thì 2 thuộc tính  margin và padding có vẻ không có gì mơ hồ, nhưng đối với một người mới tiếp cận với css thì việc phân biệt cũng như sử dụng 2 thuộc tính này hay bị nhầm lẫn. Sau đây là một bài viết ngắn giúp các bạn phân biệt 2 thuộc tính này, sử dụng chúng thành thạo hơn trong làm web.

1. Margin
Nghĩa là lề, căn lề, trong css nó dùng để điều chỉnh khoản cách giữa các thành phần của trang web:

Sử dụng:
Thuộc tính Margin có 4 giá trị lần lượt là Top, Right, Bottom, Left và sử dụng theo các cách sau:

Cách 1: margin 5px 5px 0 5px;

Nghĩa là top:5px, right:5px, bottom:0px, left:5px;

Cách 2: margin: 10px 20px 5px;

Nghĩa là top:10px, right:20px, bottom:5px, left:20px;

Cách 3: margin: 10px 20px;

Nghĩa là Top: 10px và bottom:10px; right: 20px và left:20px;

Cách 3: margin: 10px;

Nghĩa là: top, right, bottom, left đều có giá trị là 10px;

Cách 3: Đưa ra từng vị trí cụ thể:

Ví dụ:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 8px;
margin-left: 15px;

2. Padding
Thuộc tính padding tuy có cách dùng tương tự thuộc tính margin nhưng lại có ý nghĩa khác, nó dùng để phân cách giữa nội dung và viền (border) của một thành phần.

Sử dụng:
Thuộc tính Padding cũng có 4 giá trị lần lượt là Top, Right, Bottom, Left và sử dụng ương tự padding:

Cách 1: padding 5px 5px 0 5px;

Nghĩa là top:5px, right:5px, bottom:0px, left:5px;

Cách 2: padding: 10px 20px 5px;

Nghĩa là top:10px, right:20px, bottom:5px, left:20px;

Cách 3: padding: 10px 20px;

Nghĩa là Top: 10px và bottom:10px; right: 20px và left:20px;

Cách 3: padding: 10px;

Nghĩa là: top, right, bottom, left đều có giá trị là 10px;

Cách 3: Đưa ra từng vị trí cụ thể:

Ví dụ:
padding-top: 10px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 15px;

Lưu ý: Khi sử dụng thuộc tính padding thì độ lớn của một thành phần sẻ bao gồm cả padding, còn nếu sử dụng margin thì độ lớn của thành phần không đổi, giá trị của margin chỉ là khoản cách bên ngoài thành phần.

Còn bây giờ nếu các bạn đã hiểu thì bắt tay vào thực hiện một file html sử dụng padding và margin xem nhé.

Chúc các bạn thực hiện tốt!

Một ví dụ cơ bản về tạo menu dropdown với các đoạn code html và css ngắn bên dưới sẻ giúp bạn tạo nhanh một menu dropdown mà không cần phải mất nhiều công sức.

Code HTML cần có:

<ul><li>Trang chủ</li>
  <li>Giới thiệu</li>
  <li>
    Sản phẩm
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog</li>
  <li>Liên hệ</li>
</ul>

Code css cần có:

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Tạo một file html và đặt code html tại nơi bạn muốn menu dropdown xuất hiện, đặt code css trong một file .css và gọi nó từ file html vừa tạo. Chạy file html trên trình duyệt để xem kết quả.

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