Căn giữa Tabbed Navigation
- March 20, 2010
- 25 comments
Kỹ thuật tạo Tabbed Navigation sử dụng Sliding Door đã trở nên rất phổ biến trên nhiều trang web. Tabbed Navigation có thể tiết kiệm diện tích và Sliding Door Button cho phép nút di chuyển của bạn giãn nở theo nội dung của nó. Nhưng có một điều là loại Sliding Door phụ thuộc hoàn toàn vào Float cho nên Tab của bạn chỉ có thể ở bên trái hoặc ở bên phải. Nếu như vì một lý do nào đó, bạn lại muốn nó được căn chỉnh ở giữa thì sao?
Có bạn hôm nay email hỏi tôi cách căn chỉnh tabs ra giữa, tôi nghĩ đây là câu hỏi hay và có thể nhiều người quan tâm nên quyết định làm một video về nó. Trong bài này tôi sẽ không giải thích chi tiết cách tạo Sliding Door, tuy tôi có làm trong vieo, nếu bạn không hiểu nguyên lý thì bạn hãy xem video Nút Giãn Nở để biết thêm chi tiết.
Nếu bạn chạy thử phần này trong IE 6 và IE 7 thì sẽ bị lỗi, dưới đây là cách hack. Bạn chèn đoạn code này vào phần Head của tài liệu HTML
<!--[if IE]>
<style type="text/css">
ul#tabs li a {
padding: 0px 0px 0px 10px;
}
</style>
<![endif]-->
Thời lượng: 11:05
Download định dạng .avi chất lượng cao: MediaFire
Dung lượng: 48MB
Để Permalink làm việc trên Localhost »
Thầy giảng hay quá! Em nghe tới đâu biết đến đó.
Thầy có bài giảng nào thiết kế web đơn giản với php không?
Cách chuyển HTML sang PHP (hoặc ASP)
Cách viết “Leave a comment” bằng PHP như thầy đã làm ở trang web này.
Em có cả ngàn câu hỏi mà ngại làm phiền thầy quá.
Cảm ơn thầy.
Tuấn
các bai viết cua anh DW đều hay.xem cái nào hiểu ngay cái đấy
anh viết bằng phần mềm gì thế ạ
em bat dau hoc ve css muon hoc tu dau ah.Anh co the cho em biet nen hov tu video nao khong ah
nếu bạn muốn học từ những video đầu. bạn có thể vào Video Series ở tab Navigation. bạn có thể thấy tất cả mọi video. tùy bạn lựa chọn.
Center tabs
ul#tabs li a {
padding: 0px 0px 0px 10px;
}
dung la tren IE bi loi , minh da hack theo cach anh DW chi roi nhung sao no ko co ket qua nhi , xem dum minh chen nhu vay co dung chua nhe
Center tabs
ul#tabs li a {
padding: 0px 0px 0px 10px;
}
Thanks Dw . Vẫn đang trên con đường học hỏi và cảm thấy thú vị , hứng thú với những clip của bạn
Nếu trang có nhiều tabbed thì khi lick 1 nốt, nó sẽ show hết tất cả các div có cùng ID ra. Ai có giải pháp ko?
Ak, admin ơi, em có xem mấy cái video của anh hướng dẫn thiết kế giao diện bằng photoshop nhưng anh làm nhanh quá em xem ko kip,với lại kiến thức photoshop của em cũng hạn chế, vậy anh có hướng dẫn bằng ebook ko vậy admin , nếu có chia sẻ cho em với, cảm on admin nhiều nha.
em rất thích website chạy css. em làm cũng tương đối tốt chỉ mỗi tội ở VN mình còn xài IE6 em canh mất cả đêm mới xong trên ie 6
cảm ơn anh rất nhiều mong anh luôn có sức khỏe
và mong cộng đồng IT VN phát triển tốt
mình củng đang học web mún làm wen vs cái bạn mê học web. YM: hoangtuonline_duonghung
Em là khôi.Em đang học về web.Không hiểu sao em thiết kế trang bằng css nó luôn bị vỡ trang và không theo ý muốn.
thanks a e làm dc rùi ^^
Anh Demon Warlock làm video sử dụng Dreamwever đi
comment của bạn làm tôi phát cười lên đấy.. chắc bạn mới tham gia izwebz hỉ!? vì anh DW kg ưa Dreamweaver nên chắc yêu cầu của bạn kg khả thi rồi, bạn tham khảo nhé: http://www.izwebz.com/design-usability/khong-nen-dung-wysiwyg-editor/
chào anh Demon Warlock!
anh có thể viết cho em một cái video add Cart của Frameword CI không. theo chuẩn MCV đó
Em cảm ơn anh rất nhiều !
Thanks anh
Nhưng có một vấn đề là khi mình di chuột sang bên trái của hình thì nó chỉ hiện mỗi cái hover của thẻ a thôi. Có cách nào mà khi mình hover qua nó hiện cả hình không anh.
Chúc anh luôn luôn mạnh khoẻ
nếu em viết code bằng jQuery thì em thêm dòng return false vào là nó không bị nữa.
Thật ra thì em đã có 1 cách làm rồi. ví dụ (href=”#vidu”) khi load lại nó sẽ nằm ở vị trí của thẻ div có id =”vidu”, nhưng nó không đẹp. anh có cách nào chèn thêm hiệu ứng cho nó không?
anh DW oi! em làm 1 giao diện có sử dụng Tab ở cuối trang.khi mình chọn Tab (vì <a href="#", hay href="chính trang đó") nên nó cứ nhảy lên đầu, anh có cách nào ju lại tọa độ x,y của trình duyệt không? để khi click nó vẫn nằm y vị trí cũ.
Chào anh DW ! cũng thường ghé vào xem mấy bài tut của anh ,nhưng ít khi để comment .Hôm nay em muốn hỏi anh chút xíu về cách tạo cái Drop-down Box có bo tròn 4 góc và style của nó cũng khác với style mặc định ,tương tự như của thegioididong.com, em không biết làm sao code dc như vậy vì thông thường ngoài button ra các thành phần khác như Drop-down box , radio button .. em phải sử dụng style mặc định của nó , nên nhiều khi nó lại không hợp với giao diện .
À! cái đó không phải là dộ phân giải cả màn hình của anh mà chỉ là một phần thôi. Vì anh không muốn Video quá nặng khi để màn hình bự tổ chảng
Cảm ơn anh rất nhiều, đã giải quyết xong vấn đề
)
Cái độ phân giải màn hình của anh buồn cười nhỉ (1056×868), em xem trên màn thường bị mất một tẹo ở rìa
)