[Nhờ vả] Về Html/CSS cơ bản

Thảo luận trong 'Thư giãn' bắt đầu bởi Keni_, 18/9/15.

  1. Keni_

    Keni_ One-winged Angel

    Tham gia ngày:
    12/3/10
    Bài viết:
    7,653
    Nơi ở:
    Tân Bình
    dạo này đang học HTML/CSS cơ bản, làm tới đoạn này thì cứ bị lỗi chữ đẩy lên phía trên, lay hoay mãi không biết fix thế nào, bác nào rành thì giúp mình edit hộ với T_T

    Hình
    Phần bị lỗi
    upload_2015-9-18_21-4-48.png

    Bài yêu cầu
    upload_2015-9-18_21-5-27.png
    Html
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Bai 02</title>
    </head>
    <link rel="stylesheet" type="text/css" href="../CSS/common_lamnqps03509.css">

    <body>
    <div id=wrapper>
    <div id=left>
    <div id=header>
    <div class="hd1"> <h1> THẾ GIỚI DI ĐỘNG HCM </h1> </div>
    <div class="hd2"> <h2> Tin Tức Công Nghệ </h2> </div>
    </div>
    <div id=content>
    <div class="img"><img src="../Image/Bai02/anh01_lamnqps03509.jpg" width="147" height="98" hspace="8" vspace="18" align="left"><p> Instagram đã có phiên bản dành cho Android
    (CafeF1.com) Instagram là ứng dụng chụp ảnh được ưa chuộng nhất trên iOS, nay đã có mặt trên Android. Ngay từ bây giờ người dùng có thể tải Instagram miễn phí từ Google Play.</p></div>
    <div class="img"><img src="../Image/Bai02/anh02_lamnqps03509.jpg" width="147" height="98" hspace="8" vspace="18" align="left" ><p>K-Touch K1 – “siêu điện thoại” cho người lớn tuổi
    CafeF1.com) K-Touch K1 hướng đến nhóm đối tượng người dùng cao tuổi có thiết kế phù hợp như bàn phím số lớn, có hướng dẫn bằng giọng nói, thao tác sử dụng trên giao diện máy cũng rất đơn giản và thân thiện.</p></div>
    <div class="img"><img src="../Image/Bai02/anh03_lamnqps03509.jpg" width="147" height="98" hspace="8" vspace="18" align="left"><p>Những smartphone được mong chờ nhất tháng 4
    (CafeF1.com) Trong tháng 4 này hứa hẹn nhiều smartphone đa dạng từ cấu hình cho đến giá cả. Trong số đó model của HTC được người dùng mong đợi nhất, tiếp đến là dòng Lumia của Nokia, rồi đến smartphone giá rẻ của LG.</p></div>
    </div>
    <div id=footer> <h3>Địa chỉ: 391A Nam Kỳ Khởi Nghĩa<br>
    Điện thoại: 0987844858</h3> </div>
    <div id=right>
    </div>

    </div>

    </body>
    </html>
    CSS
    @charset "utf-8";
    /* CSS Document */
    #wrapper {
    width: 900px;
    height: 500px;
    margin-left:auto;
    margin-right:auto;
    }
    #left {
    width:600px;
    height:500px;
    float:left;
    }
    #right {
    witdh:300px;
    height:500px;
    float:left;
    }
    #header {
    width:600px;
    height:40px;


    }
    #content {
    width:600px;
    height:400px;
    }
    #footer {
    width:600px;
    height:60px;
    background-color:#F90;
    }
    .hd1 {
    background-color:#F90;
    padding: 5px;
    }
    .hd2 {
    background-color:#FFC;
    padding:1px;
    }
    h1 {
    font-size:28px;
    text-align:center;
    color:#FFF;
    }
    h2 {
    font-size:24px;
    text-align:center;
    color:#F36;
    }
    h3 {
    font-size:20px;
    text-align:left;
    color:#FFF;
    padding: 2px;
    margin: 2px;
    }
    p {
    font-size: 16px;
    }



    .img {
    width:600px;
    float:left;
    padding:5px;
    margin:5px;
    }

    cám ơn mấy bác :8cool_cry:
     
  2. _keita_

    _keita_ Mr & Ms Pac-Man

    Tham gia ngày:
    10/8/07
    Bài viết:
    252
    Keni_ thích bài này.
  3. Keni_

    Keni_ One-winged Angel

    Tham gia ngày:
    12/3/10
    Bài viết:
    7,653
    Nơi ở:
    Tân Bình
  4. 934944

    934944 Baldur's Gate GameOver Lão Làng GVN

    Tham gia ngày:
    13/8/06
    Bài viết:
    30,740
    Nơi ở:
    đà nẵng
    code nhìn tởm quá , chả muốn sửa , nói chung viết lại 3 cái tin ngắn đó thành 1 class cho vào 3 div đi rồi xem tiếp :/
    với dùng clear fix sau div header thử
     
    Keni_ thích bài này.
  5. megaman_zero

    megaman_zero Mario & Luigi Lão Làng GVN

    Tham gia ngày:
    19/2/05
    Bài viết:
    771
    Nơi ở:
    [GVN]
    http://codepen.io/anon/pen/JYXeJr
    Bạn bỏ định nghĩa height ở #header, #content, #footer nhé, để độ cao được quy định bởi content.
    Các thẻ div chứa ảnh thì bỏ float, để float: left vào ảnh bên trong, còn div.img thì thêm clearfix.
     
    Keni_ thích bài này.
  6. Keni_

    Keni_ One-winged Angel

    Tham gia ngày:
    12/3/10
    Bài viết:
    7,653
    Nơi ở:
    Tân Bình
    cám ơn mấy bác :D, mới học được vài hôm, mỗi tiết có 2hrs mà lại sơ sài, đa số phải tự ngồi mò
     
  7. DkLx

    DkLx Mayor of SimCity Lão Làng GVN

    Tham gia ngày:
    26/7/11
    Bài viết:
    4,437
    Nơi ở:
    Trên tum
  8. thanhtungtnt

    thanhtungtnt You Must Construct Additional Pylons Lão Làng GVN

    Tham gia ngày:
    23/8/06
    Bài viết:
    8,848
    Nơi ở:
    Balamb City
    1 card mobiphone 50k và nó sẽ xong cho bác ngay và luôn. Chỉ trong 10 phút \m/
     
  9. duonghiep1

    duonghiep1 C O N T R A

    Tham gia ngày:
    19/11/09
    Bài viết:
    1,659
    Nơi ở:
    Hà nội
    cho cái div header ra ngoài ngang cap voi div left là đc nhé , đặt height cho cái #header nữa
    bỏ hết cái đống css right,left đi
    http://jsfiddle.net/iceball/2xwnzygg/
     

Chia sẻ trang này