Nhờ giúp đỡ canh chỉnh vị trí trong HTML

anhtuan1006 · 18/7/16

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.

kjng_lamboghini · 18/7/16

"padding-left: 10px" thử xem

blademaster_sf · 18/7/16

Đơ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

yeucogiao · 18/7/16

Bạn thử thêm như này nhé:
<a href="#" style="right:10px;bottom:10px;position:absolute">Về đầu trang</a>

anhtuan1006 · 18/7/16

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

anhtuan1006 · 19/7/16

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

blademaster_sf · 19/7/16

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

anhtuan1006 · 19/7/16

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

anhtuan1006 · 19/7/16

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

nhadepkav · 19/7/16

bạn có thể xem các thuộc tính hover tại đây: w3schools.com/cssref/sel_hover.asp

blademaster_sf · 19/7/16

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 · 19/7/16

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>

anhtuan1006 · 19/7/16

blademaster_sf , umk mình đang tự mày mò học , mong nhận được sự giúp đỡ của bạn

Tư Xả Láng · 19/7/16

Search từ khoá tooltip css đi bạn.

anhtuan1006 · 20/7/16

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

blademaster_sf · 20/7/16

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 · 20/7/16

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

blademaster_sf · 20/7/16

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 · 20/7/16

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

anhtuan1006 · 21/7/16

Với từ khóa gợi ý của bạn Tư Xả Lá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 Nhập hoặc Đăng Ký

Nhờ giúp đỡ canh chỉnh vị trí trong HTML

anhtuan1006 Thành viên cấp 2

Xem thêm các chủ đề cùng chuyên mục

kjng_lamboghini Thành viên cấp 2

blademaster_sf Thành viên cấp 2

yeucogiao Mới đăng kí

anhtuan1006 Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

blademaster_sf Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

nhadepkav Mới đăng kí

blademaster_sf Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

Tư Xả Láng Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

blademaster_sf Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

blademaster_sf Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

Ủng hộ diễn đàn

Dự án con

Box tiêu biểu

Giải trí

Đăng Nhập hoặc Đăng Ký

Nhờ giúp đỡ canh chỉnh vị trí trong HTML

anhtuan1006 Thành viên cấp 2

Xem thêm các chủ đề cùng chuyên mục

kjng_lamboghini Thành viên cấp 2

blademaster_sf Thành viên cấp 2

yeucogiao Mới đăng kí

anhtuan1006 Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

blademaster_sf Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

nhadepkav Mới đăng kí

blademaster_sf Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

Tư Xả Láng Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

blademaster_sf Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

blademaster_sf Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

anhtuan1006 Thành viên cấp 2

Ủng hộ diễn đàn

Tìm kiếm hữu ích