PDA

View Full Version : Cho hỏi ông Spirit cái coi ! ^^


trhthong
07-03-2008, 20:24
Tui có đoạn code sau:
#banner {
position: relative;
width: 778px;
margin: 0 auto;
height: 212px;
background: url(imgs/banner.jpg);
}
#banner #topmenu {
position: absolute;
top: 180px; left: 208px;
width: 564px; height: 32px;
background: url(imgs/bgr_topbar1.gif) repeat-x;
}
Trong phần body, tui cho cái #topbanner nằm trong #banner. Tôi có hai vấn đề để hỏi như sau:
1. Nếu trong #topmenu, tui đổi cái top và left thành:
bottom: 0px;
right: 0px;
thì kết quả luôn là cái phần topmenu luôn nằm ở góc trên bên trái, giống như khi đặt: top: 0; và left: 0; ???
Giải thích giùm nghen!
2. Nếu tôi không đặt thuộc tính: position: relative; trong #bannner thì cái #topbanner lại không tài nào ở một vị trí mong muốn được?
Giải thích giùm luôn nghen!
Spirit
07-03-2008, 20:41
<html>
<head>
<style>
#banner {
position: relative;
width: 778px;
margin: 0 auto;
height: 212px;
background: url(imgs/banner.jpg);
}

#topmenu {
position: absolute;
bottom: 0px;
right: 0px;
width: 564px; height: 32px;
background: url(imgs/bgr_topbar1.gif) repeat-x;
}
</style>
</head>
<body>
<div id="banner">
<div id="topmenu">
</div>
</div>


1. Gõ chính xác là bottom: 0px; right: 0px; thì chắc chắn sẽ nằm ở bottom right của cái #banner.

2. Format Position với các thông số như Top, Left, Right, Bottom đòi hỏi đầu tiên là phải có position Relative. Nó sẽ format position theo cái div nào chứa nó với thuộc tính relative. :)

Nguyên văn document sử dụng 1 trong 4 cái đó tiếng anh như sau: (Cái này Bottom)


For absolutely positioned boxes, specifies how far from the bottom of the containing box (which is the first containing relatively positioned box or the page itself) the box should be.

For relatively positioned boxes, specifies how far from the bottom a box should be shifted.
trhthong
07-03-2008, 20:49
Chà! Sao hôm trước mình làm thế nào mà không được đây? Cảm ơn Spirit nghen! Làm được rồi!