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ờ chỉnh giúp thuộc tính Float:Left

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi anhtuan1006, 25/7/16.

Lượt xem: 1,604

  1. anhtuan1006 Thành viên cấp 2

    Mình đang thử làm 1 cái menu kiểu thế này ( khi hover vào Menu 1 sẽ xổ ra các danh sách heading như thế này):
    c3L4SMB.png

    ----------------------------------------------------------------------------------------------------
    File HTML của mình như sau:


    <div class="menu">
    <ul>
    <li>
    <a href="#">Menu 1</a>
    <div class="danh-sach">
    <div class="colum">
    <ul>
    <h3>Heading 1</h3>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
    </ul>
    </div>
    <div class="colum">
    <ul>
    <h3>Heading 2</h3>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <h3>Heading 3</h3>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    </ul>
    </div>
    <div class="colum">
    <ul>
    <h3>Heading 4</h3>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    </ul>
    </div>
    <div class="colum">
    <ul>
    <h3>Highlighted Heading I</h3>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <h3>Highlighted Heading II</h3>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
    </ul>
    </div>
    </div>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    </ul>
    </div>

    File CSS của mình như sau:
    @charset "utf-8";
    /* CSS Document */
    .menu{
    margin-left: 300px}

    .menu ul li{
    width:120px; height:50px; line-height:50px;
    float:left;
    list-style-type:none;
    text-align:center;
    background:#000; border-left:#FFF solid thin
    }
    .menu ul li a{
    text-decoration:none;
    color:#FFF; font-weight:bold
    }
    .colum{
    float:left}

    ------------------------------------------------------------------------------------------------

    Mình mới viết CSS đến đây để chỉnh cho các Heading nằm thành các cột. Mình có viết thuộc tính Float: left

    cho mỗi class có tên là colum rồi mà vẫn không được.

    Nhờ các bạn chỉnh giúp mình với. Mình xin cảm ơn !

    ...
    Chỉnh sửa lần cuối: 25/7/16
  2. hoangemini

    hoangemini Thành viên cấp 2

    Mega Menu []---
    anhtuan1006 thích bài viết này
  3. Phượng Nguyễn Phi

    Phượng Nguyễn Phi Thành viên cấp 1

    gửi 1 tệp file có phải hay k? nhìn tn loạn hết cả lên 8-}
    anhtuan1006 thích bài viết này
  4. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Mình không biết cách đính kèm tập tin lên thế nào... các bạn giúp mình với
  5. Phượng Nguyễn Phi

    Phượng Nguyễn Phi Thành viên cấp 1

    Sửa ntn nói cụ thể, mai đi làm m gửi file cho!
  6. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Phượng Nguyễn Phi , mình trình bày lại Code cho dễ nhìn hơn nghe:

    HTML:
    Code:
    <div class="menu">
       <ul>
      
               <li>
                   <a href="#">Menu 1</a>
                       <div class="danh-sach">
                      
                           <div class="colum">
                               <ul>
                                            <h3>Heading 1</h3>
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <li><a href="#">Item 4</a></li>
                                            <li><a href="#">Item 5</a></li>
                                            <li><a href="#">Item 6</a></li>
                                            <li><a href="#">Item 7</a></li>   
                               </ul>
                           </div>
                          
                           <div class="colum">
                               <ul>
                                            <h3>Heading 2</h3>
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <h3>Heading 3</h3>
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li> 
                               </ul>
                           </div>
                          
                           <div class="colum">
                               <ul>
                                            <h3>Heading 4</h3>
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <li><a href="#">Item 4</a></li>
                               </ul>
                           </div>
                          
                           <div class="colum">
                               <ul>
                                            <h3>Highlighted Heading I</h3>
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <h3>Highlighted Heading II</h3>
                                            <li><a href="#">Item 6</a></li>
                                            <li><a href="#">Item 7</a></li>
                               </ul>
                           </div>
                          
                       </div>
               </li>
              
               <li><a href="#">Menu 2</a></li>
               <li><a href="#">Menu 3</a></li>
               <li><a href="#">Menu 4</a></li>
               <li><a href="#">Menu 5</a></li>
    
        </ul> 
    </div>
    CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    .menu{
        margin-left:300px}
      
    .menu ul li{
        width:120px; height:50px; line-height:50px;
        float:left;
        list-style-type:none;
        text-align:center;
        background:#000; border-left:#FFF solid thin
        }
    .menu ul li a{
        text-decoration:none;
        color:#FFF; font-weight:bold
        }
    .colum{
        float:left}
  7. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Bạn cho Code của mình chạy thì sẽ thấy các Heading đang nằm trên nhau mà không phải nằm cùng hàng như hình mình gửi lên, bạn cho chạy Code là sẽ thấy ngay điều đó mà
  8. Phượng Nguyễn Phi

    Phượng Nguyễn Phi Thành viên cấp 1

    Của bạn đây
    <style>
    body {
    padding: 0;
    margin: 0;
    }
    ul, li {
    list-style-type: none;
    }
    .menu {
    width: 1000px;
    height: auto;
    margin: 0 auto;
    }
    .menu ul li {
    width: 120px;
    height: 50px;
    line-height: 50px;
    float: left;
    text-align: center;
    background: #000;
    border-left: #FFF solid thin
    }
    .menu ul li a {
    text-decoration: none;
    color: #FFF;
    font-weight: bold
    }
    .danh-sach {
    width: 600px;
    height: 500px;
    }
    .colum {
    width: 30%;
    height: auto;
    float: left;
    }
    </style>
    anhtuan1006 thích bài viết này
  9. anhtuan1006

    anhtuan1006 Thành viên cấp 2

  10. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Một lần nữa cảm ơn bạn Phượng Nguyễn Phi nha, sau khi được bạn giúp đỡ mình đã hoàn thành bài rồi ...

Ủng hộ diễn đàn