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ờ giúp đỡ canh chỉnh vị trí trong HTML

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

Lượt xem: 5,100

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

    Mình đang thử tạo 1 chỉ mục để dẫn lên đầu trang Web. Code HTML của mình thế này:

    <body>
    <p>

    Học HTML và CSS thấy khó quá trời ba má ơi....
    Học HTML và CSS thấy khó quá trời ba má ơi....
    Học HTML và CSS thấy khó quá trời ba má ơi....
    Học HTML và CSS thấy khó quá trời ba má ơi....
    Học HTML và CSS thấy khó quá trời ba má ơi....
    Học HTML và CSS thấy khó quá trời ba má ơi....
    Học HTML và CSS thấy khó quá trời ba má ơi....
    bla bla ...
    </p>
    <a href="#" style="right:10px">Về đầu trang</a>
    </body>


    ------------------------------------------------------------------------------------------------------------------------
    Mình muốn cho dòng chữ Về đầu trang cách lề phải 10px mình có viết như bên trên(bôi đỏ) vậy mà vẫn không được.

    Các bạn có thể sửa lại giúp mình và giải thích hộ mình tại sao không.

    ...
  2. kjng_lamboghini

    kjng_lamboghini Thành viên cấp 2

    "padding-left: 10px" thử xem
    anhtuan1006 thích bài viết này
  3. blademaster_sf

    blademaster_sf Thành viên cấp 2

    Đơn giản vì không có thuộc tính position. Căn theo body thì để body relative
    Các thuộc tính top, right, left, bottom chỉ dùng khi có thuộc tính position
    anhtuan1006 thích bài viết này
  4. yeucogiao

    yeucogiao Mới đăng kí

    Bạn thử thêm như này nhé:
    <a href="#" style="right:10px;bottom:10px;position:absolute">Về đầu trang</a>
    anhtuan1006 thích bài viết này
  5. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Cảm ơn các bạn đã giúp đỡ mình
  6. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Hôm qua chưa có thời gian, hôm nay mình Test thử thì thấy cả 3 cách trên đều không được các bạn ạ.

    Các bạn xem lại giúp mình với
  7. blademaster_sf

    blademaster_sf Thành viên cấp 2

    Chỉ có 1 cách chứ không phải có 3 cách. Bạn nên đọc lại phần này trên w3schools
    m4FwoNA.jpg
    anhtuan1006 thích bài viết này
  8. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Cảm ơn bạn blademaster_sf , mình đã làm được rồi.

    Bạn cho mình hỏi thêm 1 vấn đề này được không.

    Làm sao để hover vào chữ email Marketing thì có 1 hộp hình chữ nhật con con bên dưới màu trắng xuất hiện giống cái ảnh này này bạn:

    https://i.imgur.com/jB4uZxd.png
    Chỉnh sửa lần cuối: 19/7/16
  9. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    mình diễn đạt có khó hiểu lắm không.

    Ý mình muốn xin cái Code để khi hover vào 1 cái gì đó( ảnh hoặc link) thì bên dưới cái ấy sẽ xuất

    hiện cái khung hình chữ nhật màu trắng như kiểu để chú thích cho cái mình hover vào đó, giống

    như cái ảnh mình gửi ở bài trên đó

    Bạn giúp mình với nha
  10. nhadepkav

    nhadepkav Mới đăng kí

    bạn có thể xem các thuộc tính hover tại đây: w3schools.com/cssref/sel_hover.asp
    anhtuan1006 thích bài viết này
  11. blademaster_sf

    blademaster_sf Thành viên cấp 2

    Bạn tự học css đấy à?

    Thì bạn tạo trước cái khung màu trắng ấy nhưng ẩn nó đi bằng thuộc tính (display:none)
    muốn nó hiện lên thì thay thuộc tính none bằng "block"
    Vd:
    classB{display:none;}
    classA:hover .classb {display:block}
    anhtuan1006 thích bài viết này
  12. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Nhờ các bạn chỉnh giúp mình:
    Mình muốn khi hover vào mũi tên thì sẽ hiện lên cái khung con với dòng chữ về đầu trang.

    Loay hoay mãi mà chưa làm được. Cảm ơn các bạn:
    CODE:
    ---------------------------------------------------------------------------------------------------------
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #menu img:hover .screen-tip{
    display:block}
    </style>

    </head>

    <body>
    <p>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    </p>
    <a href="#" id="menu" style="position:fixed; top:600px; right:10px; opacity:0.4"><img src="http://connguoi.laodong.com.vn/img/up-arrow-icon.png"/></a>

    <p class="screen-tip" style="position:fixed; top:630px; right:10px; border: solid thin; background:#FFF; display:none">Về đầu trang</p>

    </body>
    </html>
    Chỉnh sửa lần cuối: 19/7/16
  13. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    blademaster_sf , umk mình đang tự mày mò học , mong nhận được sự giúp đỡ của bạn
  14. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Search từ khoá tooltip css đi bạn.
    anhtuan1006 thích bài viết này
  15. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Các bạn có thể chỉnh giúp mình đoạn Code trên cho nó ra kết quả được không.

    Mình cảm ơn các bạn
  16. blademaster_sf

    blademaster_sf Thành viên cấp 2

    1. Thêm 1 div bao quanh icon arrrow và chữ lên đầu trang. đặt tên là class="btt"
    Code:
    <div class="btt"><a href="#" id="menu" style="position:fixed; top:600px; right:10px; opacity:0.4"><img src="http://connguoi.laodong.com.vn/img/up-arrow-icon.png"/></a>
    
    <p class="screen-tip" style="position:fixed; top:630px; right:10px; border:solid 1px black; background:#FFF;">Về đầu trang</p></div>
    
    2. Đổi css hover thành:
    .screen-tip{display:none;}
    .btt:hover .screen-tip{display:block !important}

    Túm váy là thằng hover nên là cha thằng bạn muốn thay đổi
    VD:
    <div class="A">
    <div class="B">

    </div>
    </div>

    .A:hover .B{ thuộc tính}

    Còn muốn dùng cho 2 div khác nhau thì bạn dùng js cho nhanh
    anhtuan1006 thích bài viết này
  17. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Bạn blademaster_sf ơi, mình làm như bạn nói rồi mà sao vẫn không được nhỉ
  18. blademaster_sf

    blademaster_sf Thành viên cấp 2

    Code:
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .screen-tip{display:none;}
    .btt:hover .screen-tip{display:block !important}
    </style>
    </head>
    
    <body>
    <p>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
    </p>
    
    <div class="btt"><a href="#" id="menu" style="position:fixed; top:600px; right:10px; opacity:0.4"><img src="http://connguoi.laodong.com.vn/img/up-arrow-icon.png"/></a>
    
    <p class="screen-tip" style="position:fixed; top:630px; right:10px; border:solid 1px black; background:#FFF;">Về đầu trang</p></div>
    
    </body>
    </html>
    
    
    Từ sau bạn đừng viết style ngay ở thẻ. Để nó tránh nhận đó làm thuộc tính quan trọng, phải thêm important vào dòng thuộc tính muốn thay đổi. Đoạn này ko biết bạn hiểu không. Nc là nên viết hết thuộc tính ở style header
    anhtuan1006 thích bài viết này
  19. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    blademaster_sf ơi, quá tuyệt vời rồi , mình cảm ơn bạn nhiều nha

    :-bd:-bd:-bd:-bd:-bd:-bd:-bd:-bd
  20. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Với từ khóa gợi ý của bạn Tư Xả Láng ở bên trên , mình có tìm được đoạn Code tạo Tooltip như sau:

    Code HTML:
    <span id="tooltip">Tooltip bằng CSS</span>


    Code CSS:

    #tooltip{
    background-color:#232323;
    background-image:-moz-linear-gradient(top,#4a4a4a,#232323);
    background-image: -o-linear-gradient(top,#4a4a4a,#232323);
    background-image: -webkit-linear-gradient(top,#4a4a4a,#232323);
    background-image:linear-gradient(top,#4a4a4a,#232323);

    color:white;
    padding:8px 15px;
    font-size:14px;
    border-radius:5px;
    font-family:helvetica,sans-serif;
    position:Relative;
    text-shadow:0 1px 0 rgba(0,0,0,0.7);
    }

    #tooltip:after{
    content:"";
    width:0px;
    height:0px;
    position:absolute;
    border:9px solid transparent;
    border-top:9px solid #232323;
    left:45%;
    bottom:-16px;
    }

    -----------------------------------------------------------------------------------
    Mình không hiểu đoạn bôi đỏ trên có ý nghĩa gì. Mình có Search trên mạng thuộc tính background-image nhưng không thấy có mấy giá trị -moz-linear-gradient ,.. kiểu như mấy cái bên trên ý.

    Các bạn giải thích giùm mình với được không. Hoặc có thể dẫn cho mình link tài liệu liên quan

    đến mấy cái đó để mình đọc thử cũng được.Mình cảm ơn các bạn

Ủng hộ diễn đàn