Thiết Kế Footer

Thiết Kế Footer

Ở bài học này chúng ta sẽ thêm CSS để thiết kế lại hiển thị của phần footer của website. Thiết kế chúng ta sẽ hướng tới đó là một sticky footer hay footer sẽ luôn hiển thị cố định ở phần dưới cùng của màn hình.

Thiết Lập Vị Trí Footer

Trong tập tin main.css bạn thêm vào đoạn mã CSS dưới đây để thiết lập vị trí cho foooter hiển thị ở phía dưới cùng của màn hình:

#footer {
    position: absolute;
    bottom: 0;
}

Nếu bạn tải lại trang home.html trên trình duyệt thì lúc này bạn vẫn chưa thấy footer được đưa xuống dưới. Điều này là bởi vì chúng ta chưa thiết lập chiều cao cho các phần tử html và body. Ở phía đầu tập tin main.css thêm vào đoạn mã sau:

/* general style & layout */
html, body {
    height: 100%;
}

Bây giờ nếu tải lại trang và kéo thanh cuộn scroll bar xuống dưới một chút bạn sẽ thấy được toàn bộ phần tử footer được hiển thị ở cuối trang. Tuy nhiên các hiển thị này chưa phải là cách chúng ta muốn do footer bị che khuất một phần nếu không kéo thanh cuộn xuống.

Lý do thanh cuộn xuất hiện là bởi vì một vài phần tử được gán margin mặc định và điều này khiến cho phần tử body bao ngoài có chiều cao lớn hơn 100% độ cao của màn hình do đó trình duyệt đã thêm vào thanh cuộn.

Thiết Lập Khoảng Cách Lề

Để thiết lập lại giá trị của thuộc tính margin cho phần tử body thì trong tập tin main.css bạn thêm vào các luật CSS như sau:

...
body {
    margin: 0 0;
    ...
}
...

Và tương tự cho phần tử ul chứa danh sách liên kết của các trang:

...
/* menu */
#main-menu ul {
    margin: 0 0;
    ...
}
...

Lúc này nếu tải lại trang trên trình duyệt bạn sẽ không còn thấy thanh cuộn xuất hiện nữa.

Việc thiết lập margin về 0 cho bộ chọn #main-menu ul như ở trên đã khiến cho menu chứa danh sách liên kết được hiển thị sát với giới hạn trên cùng của màn hình trình duyệt.

Điều này là không tốt bởi vì việc tạo khoảng trống giữa các thành phần khác nhau của trang web là một tập quán phổ biến. Để thêm vào khoảng cách giữa menu chứa danh sách các liên kết và phần trên cùng của trình duyệt giúp menu không hiển thị quá sát so với giới hạn trên cùng của trình duyệt bạn thêm vào đoạn mã CSS sau phía sau đoạn comment code CSS dành cho menu:

/* menu */
#main-menu {
    padding-top: 20px;
}
...

Bây giờ nếu tải lại trang bạn sẽ thấy menu không hiển thị quá sát với giới hạn trên cùng của trình duyệt như hình dưới đây:

Canh Lề Giữa cho Footer

Mặc dù hiện tại footer của website đã nằm ở phía dưới cùng màn hình tuy nhiên chúng lại được canh lề dồn sang phía góc trái ngoài cùng. Chúng ta sẽ muốn footer được hiển thị canh lề ở giữa giống như các container khác. Để làm điều này chúng ta cần thay đổi cấu trúc HTML của phần tử div#foooter. Mở tập tin home.html và cập nhật nội dung của thẻ <div id="footer">...</div> giống với đoạn mã HTML sau đây:

<div id="footer">
    <div class="container">
        <p>ABC Co, Ltd. © 2018</p>
    </div>
</div>

Với thay đổi như trên chúng ta sẽ tránh được xung đột về luật CSS quy địh thuộc tính position cho bộ chọn .container (với position được thiết lập là relative) và bộ chọn #footer (với position được thiết lập là absolute).

Tiếp theo chúng ta sẽ cần thiết lập chiều rộng của phần tử mẹ #footer là 100% để các luật CSS canh lề cho phần tử con .container bên trong phần tử này hoạt động theo đúng như ban đầu:

/* sticky footer */
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

Bây giờ khi tải lại trang bạn sẽ thấy container bên trong footer hiện thị giống với các container khác.

Cuối cùng bạn có thể thêm background cho footer bằng việc thêm vào đoạn CSS đơn giản sau:

#footer {
    ...
    background: #fafafa;
}

Tải lại trang home.html trên trình duyệt thì bạn sẽ thấy footer lúc này hiển thị nổi bật hơn trước đó.

Trước khi kết thúc bài học này bạn cần làm một công việc đó là cập nhật lại cấu trúc HTML cho phần tử div#footer đối với các trang còn lại.

10 bình luận


Đăng bình luận