Tạo một CSS layout từ một bản thiết kế - phần 8

Ở phần trước chúng ta đã có được phần nội dung của cột bên phải và đưa phần nội dung đó nằm ở vị trí mình muốn. Trong phần này chúng ta sẽ bắt đầu làm đến phần Header. Đây có thể coi là phần quan trọng tạo nên phong cách của cả website. Nếu làm tốt phần này thì giao diện của website nhìn sẽ rất bắt mắt.

Trước tiên ta tách phần logo và phần header thành 2 bức ảnh khác nhau.

{mosimage} Và logo được cắt riêng. 

Để đưa logo vào ta thêm đọan code sau vào file Html

<div id="header">
    <h1><img src="/images/general/logo_enlighten.gif" 
    width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
   </div>

Sau đó là ảnh của header được load làm background của div Header

#header {
  height: 150px;
  background: url(../images/headers/about.jpg) #db6d16;
}

Bây giờ ta sẽ thấy vị trí của logo nằm ở gốc tọa độ trên cùng bên trái. Nhưng ta lại muốn đưa logo vào vị trí mà ta đã định trước là nằm trong ô màu đen trên header. Vì vậy ta dùng Css để điều chỉnh vị trí của logo. Vì thế ta sửa 1 chút trong file Css

h1 {
   margin: 0;
   padding: 0;
   float: right;
   margin-top: 57px;
   padding-right: 31px;
}

 

Bây giờ giao diện trông đã giống hệt với thiết kế ban đầu, phần tới ta sẽ làm đến Footer và hệ thống menu.