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

Định dạng menu bằng CSS

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi Loga, 22/11/13.

Lượt xem: 4,198

  1. Loga Mới đăng kí

    Chào các bạn, mình là newbie, mình gặp một vấn đề về CSS khi thiết kế menu. mình tạo menu ,khi ở chế độ zoom 100% thì ko sao, nhưng khi tăng hoặc giảm zoom thì các dòng bị dịch chuyển hoặc đẩy xuống dòng. Và không biết mình đặt các tag như vậy có tốt chưa. Mong các bạn giúp đỡ.
    Đây là code HTML:
    HTML:
    <div class="nav-menu">
                    <div class="nav-menu-block">
                        <ul>
                            <li class="nav-menu-span"><a href="index.php">Trang chủ</a></li>
                            <li class="nav-menu-span"><a href="#">Danh mục sản phẩm</a></li>
                            <li class="nav-menu-span"><a href="#">Liên hệ</a></li>
                            <li class="nav-menu-span"><form>
                                    <input class="txt-search-content"type="text" name="searchcontent" placeholder="Tìm kiếm">
                                    <input class="btn-search" type="submit" name="search" value="Tìm">
                            </form></li>
                        </ul>
                    </div>
    </div>
    còn đây là CSS:
    Code:
    .nav-menu{
        width:75%;
        background: none;
        height:50px;
        clear:both;
        position:absolute;
        right:0;
        top:120px;
        border-top:1px solid #de1819;
        box-shadow: 1px #CCCCCC;
    }
     
    .nav-menu-block{
        position:relative;
    }
     
    .nav-menu-block ul{
        margin-top:10px;
        margin-left:20px;
    }
    .nav-menu .nav-menu-block ul .nav-menu-span{
        color:#000;
        line-height:2em;
        margin:0px 5px 0 5px;
        float:left;
    }
     
     
    .nav-menu .nav-menu-block ul .nav-menu-span a{
        text-decoration:none;
        color:#000;
        display:block;
        padding: 0 10px;
        text-transform:uppercase;
        font-size: 16px;
        font-weight:500;
        border-right: 1px solid #de1819 !important;
        border:1px solid rgba(255,255,255,0);
        transition: .3s linear;
        -webkit-transition: .3s linear;
     
    }
     
    .nav-menu .nav-menu-block ul .nav-menu-span a:hover{
        border:1px solid #de1819;
        border-radius: 30px;
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
    }
    .nav-menu .nav-menu-block ul .nav-menu-span form{
    /*    display:inline;*/
    }
     
    .nav-menu .nav-menu-block ul .nav-menu-span .txt-search-content{
        margin-top: 3px;
        margin-left:10px;
        text-indent: 20px;
        width: 180px;
        border-radius: 5px;
        border: 1px solid #CCCCCC;
        line-height: 1.6em;
    }
     
    .nav-menu .nav-menu-block ul .nav-menu-span .btn-search{
        width: 40px;
        text-indent:2px;
        line-height: 1.6em;
        height:25px;
        border: 1px solid #CCCCCC;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        cursor:pointer;
        margin-top:2px;
    }

    ...
  2. Vũ Quang Thịnh

    Vũ Quang Thịnh Mới đăng kí

    Sử dụng width của nav menu là % trong khi một số thành phần như font-size lại dùng pixel. Dẫn tới khi zoom to nhỏ nav menu ko thu phóng cùng tỉ lệ với các thành phần khác => nav menu có chiều rộng không đủ cho các thành phần còn lại.
    Nên sử dụng cùng 1 loại đơn vị (px) để tránh tình trạng này.
    pitlamgi thích bài viết này
  3. Loga

    Loga Mới đăng kí

    Vũ Quang Thịnh cám ơn bạn đã giúp đỡ,mình đã chuyển tất cả lại sang 1 đơn vị là px như bạn nói rồi, nhưng vẫn có hiện tượng chạy chỗ khi zoom xuống còn dưới 40%.
    Và mình có bị thêm 1 chỗ nhỏ này nữa như hình dưới :) hình trên là 75%, hình dưới là 100%
    html:
    Code:
    <div class="hotline">
                        <span class="hotline-number">
                            <div class="hotline-title">Hỗ trợ và Tư vấn</div>
                            <div>0936 290 292 - 01675 744 022</div>
                        </span>
    </div>
    css:
    Code:
    .header-right-block .hotline{
        display: block;
        margin-top:55px;
        margin-left:10px;
    }
     
    .header-right-block .hotline .hotline-number{
        background-color: #F27B04;
        border-radius: 3px 0 0 3px;
        color: #FFFFFF;
        display: block;
        font-family: Tahoma;
        font-size: 12px;
        font-weight: 700;
        padding: 5px 0 5px 12px;
        text-align: left;
        line-height: 1.6em;
        padding-left:20px;
    }
     
    .header-right-block .hotline .hotline-title{
        font-size:16px;
    }
    [​IMG]
    [​IMG]
  4. Vũ Quang Thịnh

    Vũ Quang Thịnh Mới đăng kí

    Một số thành phần không nên set cứng width. Thường thì mình chỉ set các cái liên quan đến bố cục thôi để tránh lỗi kiểu thế này.
    Không nên lạm dụng nhiều thẻ div
    <div>0936 290 292 - 01675 744 022</div>
    nên dùng thẻ span
    Đọc về overflow, display, width, height thử xem

Ủng hộ diễn đàn