Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
NAVIGATION
PHP Căn Bản – Bài 6 – Phần 1
Phần 1: Chuyển PSD thành xHTML
Tạo WordPress Theme – Search form và Random
Posts
Một trang web một chủ đề
Tình hình chung của những trang web Việt
Tôi nên làm trang web về chủ đề gì?
Không nên dùng WYSIWYG Editor
10 lý do bạn nên sử dụng WordPress
Top 10 trình soạn thảo code
Xuất bản SWF Player V1.1
PHP CO BẢN – NÂNG CAO
tìm hiểu cú pháp và phương thức PHP
Phép toán và phát biểu có điều kiện trong php
$_POST và $_GET
Làm quen đối tượng Session
Khai báo hàm, chèn tập tin và tập tin dùng chun
Cách xử lý chuỗi, mảng, kiểu DataTime
Thao tác trên cơ sở dữ liệu MySQL
PHP và Database
Phân trang với PHP
Xóa, Cập nhật dữ liệu dạng mảng
Tạo Mailing List: PHP & Mysql
RECENT COMMENTS
Random News Popular
EMAIL ARTICLES
Absolute Position trong thiết kế
giao diện

6 <div id="right">&nbsp;</div>
7 </div>
CSS
CSS Cơ bản
jQuery
jQuery Cơ bản
Phát triển Web
Bài viết, kinh nghiệm
Videos
Các thể loại
WordPress
Tutorials, Hacks
HOME CÂU HỎI THƯỜNG GẶP LIÊN HỆ TÁC GIẢ BẢN QUYỀN
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
QUẢNG CÁO
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
Tạo WordPress Theme – Dựng xHTML (16)
chicken_roll: hahaha hay quá hết chổ trê (thanks you

Những bài viết có liên quan
Thiết kế giao diện với Photoshop (phần 1/4)
Contextual Position
Position Property
Giao diện với CSS – Phần 1
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
Your Ad Here!
BIDVERTISER ADS
Chính vì thế điều quan trọng nhất trong khi sử dụng Absolute Position là xác định thành phần
bao quanh và đặt position của nó thành relative
Nghe cũng hay mà bạn có ví dụ trong thực tế
không?
Tôi biết là bạn sẽ hỏi do vậy tôi đã chuẩn bị trước một giao diện được sử dụng Absolute
Position cho bạn tham khảo. Bạn sẽ dễ dàng nhận thấy ở giao diện này có một tấm hình lớn
choán hết phần Header và nó nằm “chông chênh” ở giữa. Đây là ví dụ hoàn hảo về sử dụng
Absolute Position để định vị các thành phần.
Ngoài ra các thành phần còn lại như thanh di chuyển ở trên và dưới, logo và phần Featured
đều được sử dụng Absolute Position. Tôi đã thử trong IE 6, 7 và 8 và hầu như không phải
hack bất cứ phần nào ngoại trừ phần PNG hack cho IE 6. Nếu giao diện này làm bằng Float
thì sẽ ít nhất là cũng phải hack cái Double Margin của IE.
Bạn có thể download ví dụ này về để xem phần code HTML và CSSCompatible Implant
Trilobe Compatible Implant The $145.00 Alternative
www.BlueSkyBio.com
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.

hỏi là sau này để đi làm thì người ta hay dùng cách nào hả anh :-s . giờ em băn
khoăn quá.
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
Demon Warlock says:
November 17, 2009 at 8:35 pm
Nếu nói về thiết kế giao diện thì em nên tránh hoàn toàn phương pháp sử dụng Table
và cũng nên tránh luôn cả những chương trình WYSIWYG Editor như Dreamweaver.
Anh biết anh nói điều này có nhiều người sẽ không đồng tình về việc sử dụng trình
Dreamweaver. Nhưng cá nhân anh không thích những chương trình to, cồng kềnh và
nặng máy.
Hơn nữa những chương trình này khi cho ra code HTML cực kỳ khó hiểu và nhiều
“rác rưởi”. Em chỉ nên sử dụng Table cho dạng Data Tabular.
Reply
Quốc Anh says:
November 19, 2009 at 6:57 pm
Cho em hỏi trong CSS ngoài thành phần con ra còn có các thành phần cháu. Cái khó
ở đây là khi có các thành phần nhỏ hơn nữa.
Ví dụ như trong #Wrapper>#sidebar>#(…), #(…)
Cái div (…)là đồng cấp với nahu giờ em ko rõ đặt cái position của cái sidebar như
nào nữa nó cứ loạn lên.
Reply
Trung Hiếu says:
November 22, 2009 at 8:27 am
Anh ơi, trong ví dụ mà anh upload ở cuối bài này, trong đoạn code css có phần:
#featured img.featuredImg {
position: absolute;
top: -192px; right: -4px;
}

không hiểu cho lắm. Nhờ có website của anh nên em cũng đỡ nhiều.
Reply
(^-^) says:
November 23, 2009 at 10:38 am
oh.sao gữi nhiều comment thế không biết. Xin lỗi anh nhé.
Reply
Demon Warlock says:
November 23, 2009 at 11:28 am
Em vào phần contact có email của Anh đó
Reply
(^-^) says:
November 23, 2009 at 10:31 pm
Em da gui email cho anh rui, mong anh giup do. thanks
Reply
Demon Warlock says:
November 23, 2009 at 10:46 pm
Nhìn qua code thì biết em khai báo không đúng phần Position Relative. Cho nên khi
kéo trình duyệt tấm hình nó định vị theo thành phần body nên gây ra hiệu ứng như
thế.
Code HTML của em nhìn giống “ma trận” ghê
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
(^-^) says:
November 24, 2009 at 4:34 am
hi. Em mới tìm hiểu thôi nên cũng hơi giống ma trận thật,nhưng em đã khai báo
position relative ở thẻ div chứa bức ảnh rùi sau đó em mới sử dụng position absolute
cho thẻ div chứa image mà.
Anh xem kỹ lại giúp em với em hết cách rùi.
Reply

<div id="in_header">
<img src=" " />
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
</div><! End #in_header >
</div><! end #header >
- Position cho #header : Relative
- Position cho #in_header : Absolute. đó là điều hiển nhiên, nhưng em muốn cái
#in_header của em có Position là Relative để em có thể định dạng cho thẻ IMG trong
nó là Absolute thì làm sao ?, trong khi bản thân nó là Absolute và được điều chỉnh
theo #header ^^
Demon Warlock says:
January 8, 2010 at 7:58 am
Cái đó thì anh nghĩ cũng như bình thường thôi. Bởi vì nếu em đã đặt thẻ div#header
có position là Relative thì 2 cái con đều có thể là Absolute. Cả cái #in_header và img
đều là absolute. Nhưng cái #in_header thì định vị tương đối với #header còn img thì
tương đối với #in_header. Trong trường hợp này sử dụng giá trị âm là được hết.
Mà ít khi có trường hợp này xảy ra hỉ? trên lý thuyết thôi chứ hỉ?
Reply
Văn Đức says:
June 10, 2010 at 1:33 am
Anh ơi ! Em muốn học hướng đối tượng bằng php nhưng em không biết phải xuất
phát từ đâu.Em cũng có chút kiến thức về php rồi.Mong anh góp ý chỉ đường giùm
em cái.Em sẻch trên mạng không có tài liệu tiếng việt.Tiếng anh thì em học ko tốt lắm
Reply
Emily Pham says:
April 8, 2010 at 10:50 pm
Truoc gio minh toan tan dung FLOAT. Doc xong bai nay thi co the ap dung Position
thoai mai hon. Cam on Tac Gia nhieu lam nghen.

May 6, 2010 at 8:00 am
Anh thật tuyệt. em đang lơ mơ phần này dùng float ảnh của em nó cứ nhảy lên tận
trời xanh à thanks anh nhiêu yêu anh
Reply
nguyen_linh1987 says:
June 9, 2010 at 7:30 pm
Anh ơi …Nhưng em sử dụng thuộc tính Absolute của position thì khi co kéo lại khung
trình duyệt em thấy nó khác so với float…nếu m kết hợp cả với float thì có vẻ ai đó ko
xem fullscreen thì sẽ bị khác ở vài chỗ :-ss….m pải có 1 khung bao những cái
Absolute và đặt positon của nó là Relative hả anh
Reply
TT97IT says:
June 15, 2010 at 9:43 pm
Mình nghĩ ở cái trang demo Absolute Position:
—> <—
của Demon Warlock không ổn nếu dữ liệu động, ví dụ ở phần ul trong div "featured"
thêm mấy thể "li" với nội dung tương tự thì lập tức sẽ bị "tràn dữ liệu ra ngoài"….
Absolute Position có lẽ không phù hợp với dữ liệu động dài ngắn thay đổi nên nó
không được dùng nhiều bằng float.
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
tuânnh says:
June 19, 2010 at 12:08 pm
troi oi, sao bây giờ tôi mới biết có trang tutorial tuyệt voi the nay ?!
thanks bạn rất nhiều
Reply
Tuan Vy says:
July 6, 2010 at 5:47 am
Cho mình hỏi, nếu div một định position:relative; div thứ hai (phụ thuộc vị trí div một)

Leave a comment
( Chọn hình đại diện )
Chọn kiểu gõ: Tự động TELEX VNI Tắt
ltbinh says:
July 28, 2010 at 7:16 pm
Đúng là position dùng thì hay thật,nhưng dùng để chia layout thì ko thể được
vì khi chia cột chưa có chiều cao thì những thằng bên dưới sẽ nhảy lên,tóm lại vẫn
phải dùng foat.cái này chỉ dùng để định vị những cái có kích thước cố định thôi(chẳng
hạn chèn ảnh vào vị trí nào đấy
Reply
Tên bạn
Email
Website
Comment
Luu ý khi post comment:
Không "bóc tem" topic
Dùng lời lẽ có văn hoá và lịch sự
Xem trang FAQs trước khi hỏi
Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
Wrap code trong dấu `backtick` (dấu trên phím Tab)
Izwebz is solemnly hand coded and designed
from scratch by Demon Warlock. It is also very
proud of being powered by WordPress, which
is an exceptionally well written and beautiful
Rules are not made to be broken at Izwebz
Bạn không được tự ý copy và phát hành
lại nội dung của izwebz nếu chưa được sự
đồng ý của tôi.
Câu hỏi thường gặp
Liên hệ