Nhóm lưu trữ: Css

CSS – Viết tắt của Cascading Style Sheets, ngôn ngữ trình bày, định dạng phổ biến cho các trang web viết bằng HTML hoặc XHTML. Tìm hiểu thêm về mẹo, thủ thuật, hướng dẫn về CSS tại đây.

canh-giua-khung-hinh-cho-moi-trinh-duyet

Css canh giữa khung hình cho mọi trình duyệt

Việc canh giữa khung hình được áp dụng trên nhiều trang web, nhất là những trang bán hàng online cần show nhiều hình sản phẩm. Việc canh hình dù có kích thước lớn hay nhỏ đều nằm trong khung hình cố định và được canh giữa khung là một chuyện không dễ. Nhất là đối với người dùng ở Việt Nam còn sử dụng nhiều phiên bản trình duyệt đã lỗi thời. Tuy nhiên, mọi việc sẽ trở nên dễ dàng hơn nếu bạn biết chút ít về CSS và HTML. Bài viết sau đây sẽ hướng dẫn bạn thực hiện việc này.

Trong thiết kế giao diện, việc chia tỉ lệ hình ảnh và khung hình đồng thời cố định size khung hình thường thấy ở nhiều trang web. Tuy nhiên, phải làm sao đảm bảo việc size của hình được upload lên không phụ thuộc vào size khung ảnh. Cụ thể là cho dù bạn up hình có chiều rộng hay cao như thế nào(có thể vượt quá khung hình hoặc nhỏ hơn khung hình) nhưng nó vẫn nằm trong khung hình và phải nằm chính giữa khung hình.

Với yêu cầu như vậy ta có code HTML như sau:

<div class="img-wrap">
      <img src="canh-giua-hinh.jpg" />
  </div>

Và CSS:

.img-wrap {
    background:#fff;
    width:500px;
    height:400px;
    position:relative;
    display:block;
}
.img-wrap img{
    max-width:500px;
    max-height:400px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

Như ví dụ trên, khung hình cố định rộng x cao = 500px x 400px, với CSS như trên thì hình nằm trong khung sẽ được canh giữa khung và không bao giờ vượt qua khỏi khung cho dù chiều cao hay rộng của hình lớn hơn chiều cao hoặc rộng của khung. Tuy nhiên, CSS trên làm việc tốt ở các trình duyệt web mới và trình duyệt IE8 trở lên. Để IE7 (hiện tại còn khá nhiều người sử dụng) hiển thị tốt thì ta cần thêm đoạn CSS sau cho thẻ img:

margin-left:expression((500-this.width)/2);
margin-top:expression((400-this.height)/2);

Như vậy CSS đầy đủ sẽ là  :

.img-wrap {
    background:#fff;
    width:500px;
    height:400px;
    position:relative;
    display:block;
    box-shadow:0 0 10px #ccc;
    border:1px solid #ccc;
    margin:0 auto;
}
.img-wrap img{
    max-width:500px;
    max-height:400px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    margin-left:expression((500-this.width)/2);
    margin-top:expression((400-this.height)/2);
}

Bạn có thể tham khảo demo trong bài để dễ dàng thực hiện hơn. Chúc bạn thành công.

 

 

drop-down-menu-css

Làm menu xổ xuống(drop-down menu) bằng css và html

Menu là một thành phần không thể thiếu của website. Việc xây dựng một hệ thống menu hợp lý và dễ sử dụng không hề đơn giản, nhất là những website có hệ thống đa cấp và phức tạp. Menu xổ xuống(drop-down menu) là sự lựa chọn hàng đầu cho những website này. Sau đây là phần hướng dẫn tạo một menu đa cấp chỉ dùng css và html, tinh chỉnh gọn nhẹ và dễ sử dụng.

drop-down-menu

Để có được một hệ thống menu đa cấp như trên, bạn có thể thực hiện theo các bước như sau:

  1.  Tạo một hệ thống menu HTML:
    Thường thì trong lập trình, hệ thống menu html sẽ tự sinh ra, sau đây là đoạn html mô phỏng cho một menu đa cấp

    <div>
          <ul>
            <li>
                <a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Menu 1 - Lv2</a>
                        <ul>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 1 - Lv2</a>
                        <ul>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                </ul>
            </li>
       </ul>
    </div>
  2. CSS cho menu:
    <style type="text/css">
    .menu
    {
        width:70%; 
        height:30px; 
        line-height:30px;
        margin:0 auto;
    }
    .menu li
    {
        position:relative;
        display:inline-block;
        width:100%;
    }
    .menu li ul
    {
        position:absolute; 
        display:none;
    }
    .menu li:hover > ul
    {
        display:block;
    }
    .menu a
    {
        display:block; 
        color:#fff;
        background:#606c88;
    }
    .menu ul ul,
    .menu li:hover > a,
    .menu a:hover
    {
        opacity:.8;
    }
    /*Level 1*/
    .menu > ul > li
    {
        float:left;
        width:24%;
    }
    .menu > ul > li > a
    {
        width:94%;
        padding-left:3%; 
        padding-right:3%; 
        text-transform:uppercase; 
        font-weight:bold;
    }
    /*Level 2*/
    .menu > ul > li > ul
    {
        position:absolute; 
        top:100%; 
        left:0; 
        width:100%; 
    }
    .menu > ul > li > ul > li
    {
        width:100%;
    }
    .menu > ul > li > ul > li > a
    {
        width:94%;
        padding-left:3%;
        padding-right:3%;
    }
    /* Level +++ */
    .menu ul ul ul
    {
        width:100%;
        left:100%;
        top:0;
        background:#a1b1d4;
    }
    .menu ul ul ul li
    {
        width:100%;
    }
    .menu ul ul ul li a
    {
        width:94%;
        padding-left:3%;
        padding-right:3%;
    }
    
    </style>

    Code CSS sử dụng % làm đơn vị, vì vậy menu sẽ tự co giãn theo chiều rộng của website. Bạn có thể quy định cụ thể chiều rộng bằng cách  set chiều rộng cụ thể cho menu.

Bạn có thể sử dụng file demo để làm mẫu cho việc xây dựng menu cho website của mình. Bạn có thể sử dụng jQuery để tạo hiệu ứng cho menu trở nên mượt hơn, bài viết này hướng dẫn bạn sử dụng Css để tạo menu, vì vậy phần hướng dẫn sử dụng jQuery tạo hiệu ứng cho menu xin vui lòng xem hướng dẫn ở một bài viết khác.