Bày tỏ IT

Một tut nhanh chóng. Đây là một cái gì đó đơn giản và tốt đẹp bằng cách sử dụng POWER của CSS ... nhưng khó khăn concieve (và chắc chắn không phải là tôi) để bắt đầu với. Thêm DropShadow, có thể là một mảnh bánh cho nhiều người trong chúng ta, bằng cách sử dụng một số công cụ chỉnh sửa hình ảnh như Photoshop và Fireworks.
Lý do tại sao, tôi đã lựa chọn hiệu ứng bóng đổ bằng cách sử dụng CSS, thường là trong khi tạo ra một thiết kế trang / html của một ứng dụng, yêu cầu giữ iterating. Những gì tôi có nghĩa là, một trang web hiện có với nhiều hình ảnh, giống như những hiển thị freinds danh sách hoặc thư viện hình ảnh, nó sẽ rất khó để tái xử lý toàn bộ tải trọng của hình ảnh đã được đã được dỡ xuống để thêm hoặc loại bỏ các bóng tối, cho rằng vấn đề.
Vì vậy, Nếu bạn đã làm được một chút suy nghĩ về phía trước trong khi tạo ra các HTMLS thêm các bộ phận phòng, hay thường tình hình là bạn có một logic vòng tạo ra các biểu tượng / hình thu nhỏ trong XSL, PHP. JAVA hoặc bất kỳ ngôn ngữ lập trình / kịch bản khác, bạn có thể thêm nó vào bất cứ lúc nào, sau đó chỉ là vấn đề của các hiển thị và ẩn các bóng tối bằng cách sử dụng tài sản hiển thị CSS, theo các khách hàng bao giờ thay đổi yêu cầu ... Tôi havn't làm điều này loại suy nghĩ về phía trước trước khi điều này ... nhưng ahev bắt đầu ngay bây giờ!

Trong ví dụ dưới đây, hình ảnh ban đầu là bóng tối miễn phí và dropshadows được áp dụng theo yêu cầu! CŨNG, tôi đã đi thêm một chút, bằng cách sử dụng các thủ đoạn của Tut trước đây của tôi (Well! này có thể là ngắn nhất của Hướng dẫn khác nhau, do đó, nó chỉ hợp lý gọi họ là "Tut" 's) Sử dụng tài sản Clip CSS cho hiện chỉ

Hình ảnh Gốc

CSS DropShadow Kết quả

Demo | Tải về sourcefiles

Tại sao tôi muốn hiểu được điều này? ... Humm!!

Hầu hết các nhà văn CSS sẽ đồng ý rằng CSS Clip tài sản có lẽ là một trong những tài sản chưa được sử dụng hầu hết CSS. Đó là thực sự cho tôi và hạnh phúc nhất để bỏ qua nó, cho đến khi tôi bắt đầu sửa đổi Knob trượt các phần MooTools HAI (Pin) (với Dải Chỉ số) .

Có một gợi ý tốt từ một trong những người sử dụng thành phần để sửa đổi phần trượt bằng cách sử dụng cắt bớt hình ảnh backgroud (chống lại một bộ phận biến chiều rộng) để chỉ ra phạm vi thanh trượt. Như vậy đến thời gian của tôi để vui vẻ, nhưng un-điều lệ (đối với tôi ofcourse) vùng biển của tài sản Clip CSS.

Vâng! nó có thể được khó khăn như thế nào? Không có nhiều ở tất cả các ... YES và NO. Cú pháp để sử dụng tài sản Clip CSS là khá ngay thẳng, nhưng ý nghĩa / usuage là một chút croocked. Với một bộ nhớ của tôi như thế, mọi lúc tôi ngồi để làm lại trên Script trượt của tôi ... Tôi có tokeep đề cập trở lại để sử dụng tài sản CLIP này, để nhắc nhở bản thân mình logic mà tôi đã tạo ra trong kịch bản của tôi .... Do đó! cho bút xuống, với một hy vọng để ghi nhớ nó trong tương lai (và cũng vì lợi ích của những người có vẻ boggled Sở hữu Clip CSS)

CSS Clip làm gì?

Clip là một phần của mô-đun hiệu ứng hình ảnh của CSS 2.1. Đơn giản chỉ cần đặt, công việc của nó là để đặt một cửa sổ có thể nhìn thấy trên đầu trang của một đối tượng đang bị cắt bớt, do đó cắt hình ảnh và tạo hình thu nhỏ mà không cần phải tạo ra các tập tin bổ sung (tôi đã đặt tính năng này để sử dụng tốt hơn trong phần trượt )

Sử dụng tài sản Clip CSS, bạn có thể tạo ra một clipping bằng cách sử dụng hình dạng rect. Giống như nhiều thuộc tính CSS khác (như lợi nhuận đệm, ...), sử dụng rect yêu cầu bốn tọa độ Top, Right, Bottom, Left (TRBL). Bản chất croocked của tài sản này phản ánh khi bạn xem xét kỹ hơn ở đoạn tính toán khu vực cắt, bằng cách sử dụng các tọa độ (gửi não vào một quăng trong một thời gian). Bây giờ để gây nhầm lẫn bạn phía dưới bắt đầu từ phía trên, và phải bắt đầu từ bên trái. . Bạn thấy những gì tôi nói? .... Do đó này bài ...

Sự nhầm lẫn chút này có thể dễ dàng biến mất, với điều này giải thích hình ảnh của tài sản Clip / rect CSS như dưới đây!!!

CSS Clip Yêu cầu

Nhiệm vụ chúng tôi đã bắt đầu là clip hình ảnh Hình thu nhỏ sau đây thành một hình ảnh squarer tìm kiếm (và cũng là một hình ảnh góc rộng)

Thumbnal / Hình ảnh ban đầu	Clip Yêu cầu đối với sqaure Thumbmail

CSS Clip Kết quả

Demo | Tải về sourcefiles

Câu hỏi này vượt qua tâm trí của tôi một vài lần trước, khi tôi đang làm việc trên các trang web trước đó quá, sử dụng WordPress để hiển thị các blog hoặc các loại nội dung mới trong một số phần của trang web / portal.Being một người mới trong PHP và xung quanh WordPress, tôi giữ procastinating nó, suy nghĩ "đây không phải là mảnh bánh". Cuối cùng! yêu cầu này đến tối đa mũi của tôi, khi bắt đầu diggin xung quanh một chút cho giải pháp.
Tôi ngạc nhiên khi thấy rằng nó thực sự là dễ dàng hơn tôi thực sự nghĩ rằng nó là hiển thị một danh sách các tiêu đề hoặc bài viết mới nhất trên bất kỳ trang nào khác bên ngoài của bộ phận sử dụng WordPress, chỉ cần sử dụng một chút của PHP và các API WordPress .

Dưới đây là những việc cần làm:
Vì lý do giải thích, giả sử rằng trang web của bạn là http://www.inchembur.com/ và bạn có phần tin tức cho trang web này trên http://news.inchembur.com/ (được chạy WordPress). Bây giờ yêu cầu là để hiển thị các bài viết mới nhất từ http://news.inchembur.com/ trên trang chủ của trang web chính, tức là http://www.inchembur.com/index.php

Bước 1: Trong index.php của bạn thêm các mảnh mã sau đây, Bao gồm các file WordPress API. Bạn có thể thêm này để phía trên cùng của trang web mà bạn muốn bài viết của bạn xuất hiện trên.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); / / Disbable sử dụng WordPress Theme
yêu cầu ('/ var / news.inchembur.com / wp-blog-header.php "); / / Bao gồm WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Lấy bài viết sau cùng
>

Trong mảnh trên bao gồm, chúng tôi đang nhận được bài viết gần đây nhất. nếu bạn muốn thử các biến thể nhiều hơn nữa cảm thấy miễn phí để khai thác vào, tài liệu hướng dẫn query_posts () .

Bước 2: Bây giờ, một phần của trang Index / Trang chủ mà bạn muốn hiển thị bài viết mới nhất của WordPress từ http://news.inchembur.com , sử dụng các mã sau đây. Không cần phải nói, cảm thấy miễn phí để quảng cáo bộ phận tạo kiểu tóc, kéo dài và các lớp học theo nhu cầu thiết kế của bạn.

Bước 3: Không có Bước 3 ... Thats nó ... bạn đã làm xong!

Làm thế nào hiển thị một trang viết / cụ thể như trái ngược với bài viết mới nhất:
Điều này có thể dễ dàng achived bằng cách thay đổi các đối số query_posts() để bao gồm các ID trang hoặc trang slug

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = về');

Bạn có thể kiểm soát số lượng bài viết:
) ; query_posts (showposts = 3);

Đôi khi để giữ pageweight xuống ... chúng tôi đã chia kịch bản của chúng tôi vào các mảnh vỡ ... Những mảnh javascript có thể được tải và khi có yêu cầu (trên một sự kiện hoặc bấm vào một liên kết hoặc nút ...).

Các Javascripts tải động là đơn giản và khá thẳng về phía trước như sau ...

= “text/javascript” > <Script type = "text / javascript">
chức năng loadNewScript (source) {
var s = document.createElement ('kịch bản');
s.setAttribute ('loại', 'text / javascript');
s.setAttribute ('src', source);
document.body.appendChild (s);
}
</ Script>

và bạn có thể có cuộc gọi sau đây bất cứ nơi nào trong cơ thể, hoặc bạn có thể có kịch bản này "onload" của các tài liệu riêng của mình ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js);"> Script tải năng động </ a>

hoặc

<body onload="loadNewScript('myDynamicScript.js');">

Nếu bạn là người css, bạn sẽ biết nỗi đau trong việc bố trí của bạn làm việc qua trình duyệt. IE8 là một cờ lê trong các công trình cho các nhà phát triển chúng tôi. Anywaz! nếu bạn nhấn khi vấn đề này, giống như tôi đã làm ngày hôm qua, hoàn toàn làm việc của bạn CSS trong IE7 (và trước đó) và Firefox đã đột nhiên bắt đầu ném cơn giận dữ trong IE8, TRY này ... Nó độc đáo dường như để sửa chữa vấn đề của tôi cho thời điểm này ....

Sử dụng kê khai Meta, chúng ta có thể chỉ định các công cụ vẽ, chúng tôi muốn IE8 để sử dụng. Vì vậy, để buộc IE8 để render như IE7 ... Chèn Tag Meta sau đây vào đầu tài liệu của bạn:

<meta http-equiv="X-UA-Compatible" content="IE=7"

Theo mặc định IE Meta sẽ là: -

<meta http-equiv="X-UA-Compatible" content="IE=8"
mà sẽ làm cho IE8 làm cho trang bằng cách sử dụng chế độ tiêu chuẩn mới.

Nếu cần thiết, cú pháp này có thể được sử dụng để chứa các trình duyệt khác như dưới đây:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4"

Giới DOCTYPES:

NẾU bạn không quen thuộc với các loại động vật được gọi là "DOCTYPE" ... đây là một số nhanh chóng đọc
DOCTYPES là gì? Quirks BROWSER chế độ nghiêm ngặt là gì?
Thiết lập các DOCTYPE trong XSL

Đối với một hiểu biết sâu sắc về DOCTYPES, hãy thử truy cập vào những liên kết này ...
Một Danh sách Ngoài: Sửa chữa trang web của bạn với DOCTYPE Right!
Danh sách Ngoài: Ngoài DOCTYPE: Tiêu chuẩn Web, tương thích Chuyển tiếp, và IE8

Lưu ý: Mặc dù nhiều người trong chúng ta HTML / CSS người đã bỏ qua tầm quan trọng của decleration DOCTYPE trong các tài liệu của chúng tôi, Thiết lập các DOCTYPE phải, thường là câu trả lời cho các vấn đề trình duyệt qua.

Với một loạt các Carousels ra khỏi đó, nhiều người cho Mootools là tốt, tôi vẫn quyết định viết Lớp Carousel của riêng tôi, đối với một số lý do tốt
1. Muốn một tính năng phân trang (có thể nhảy một slide đặc biệt / bước trong carousel).
2. Wanted tự do với vị trí của các nút LEFT, RIGHT / liên kết, nơi đã bao giờ tôi vui lòng.
3. Kiểm soát các bước trượt.

Tôi đã quản lý để tạo ra một Carousel mới, với các tính năng trên ... như dưới đây ... Hãy đề nghị bất kỳ sửa đổi bạn sẽ yêu cầu!!!

Ví dụ của tôi trông như thế này ... [ Xem Demo ]

Xem Demo | Tải về Mootools Carousel Với 1,0 Phiên bản Paging (tải về 1.988 lần)

1. Carousel Paging

Bạn có thể dễ dàng thêm các phân trang carousel của bạn, chỉ đơn giản bằng cách thiết lập lá cờ phân trang, mà là mới parater trôi qua trong khi tạo thể hiện của các MooCarousel đúng sự thật (muốn phân trang) hoặc sai (donot muốn phân trang).

carousel1 var = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true); / / ns = số ảnh, sss = trượt kích thước bước

Và ofcourse bạn có thể thay đổi giao diện-n-cảm nhận của những achors phân trang như bạn vui lòng bằng cách thay đổi CSS của họ.

Carousel_paging {text-align: right; margin: 5px 10px 0 0;}.
Carousel_paging hiện tại, trang carousel_paging {outline: none; chiều rộng:.. 15px; chiều cao: 15px; line-height: 15px; text-align: center; màn hình hiển thị: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

Carousel_paging 1: hover, carousel_paging hiện tại {background: # 4D4D9B; color: # ffffff;}.

Vâng! có một vấn đề nhỏ, mặc dù neo phân trang nếu đặt, sau đó nó sẽ được tạo ra luôn luôn sau khi các thành phần Carousel. Tôi muốn làm cho nó năng động, nhưng sau đó chỉ để giữ cho các Script thổi ra tỷ lệ, tôi quyết định bỏ qua nó.
Nhưng bạn biết Javascript, bạn có thể dễ dàng thay đổi mã thế hệ phân trang trong lớp MooCarousel để làm hài lòng nhu cầu của bạn.

2. Customising các biểu tượng phải & trái

Bạn có thể thay đổi ĐẶT, HÌNH ẢNH hoặc bất kỳ tài sản displat của các nút trái và bên phải chỉ đơn giản bằng cách chơi xung quanh với CSS. để có thể thay đổi vị trí của các buttoms trái và bên phải là lý do thực sự cho tôi để phải Lớp Carousel của chúng tôi.
Kể từ khi lớp MooCarousel này, chấp nhận id của các nút này, bạn thực sự có thể đặt các nút này bất cứ nơi nào trên trang web, nếu bạn xin vui lòng ... nó không phải là trong hệ thống phân cấp yếu tố, như trong ví dụ của tôi.

var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true);

CSS
Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; vị trí: tương đối; width: 23px; chiều cao: 20px; float: left; con trỏ: con trỏ;}

Carousel_container_r {background-position: 0-38px;}.

Carousel_container_l {vị trí: 0-58px;}.

3. Customising bước trượt

TÔI CÓ NGHĨA LÀ BƯỚC SLIDE CUSTOMISING CỦA TÔI?
Hầu hết Carousels trượt đầy đủ với các cửa sổ có thể nhìn thấy. Vì vậy, nói rằng bạn đã có bốn mục (như trong mẫu của tôi ở trên), nó sẽ trượt tất cả bốn mục. Với phần Carousel, vượt qua số lượng các slide và kích thước các bước của sự lựa chọn của bạn.

var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true);
c_ns = số của slide, c_sss = trượt kích thước bước

Ngoài ra, trong example1 của tôi, tôi đã calcuted kích thước bước trượt, dựa trên luận lý mà, tôi biết số hạng mục, chiều rộng trên mỗi mục và biên độ đã được đưa ra sau khi mỗi mục trong CSS của tôi.

/ * Đối với tiệc tùng 1 * /

var c1_w = 92; / / tiệc tùng khoản Rộng

var c1_n = 10; / / Tổng số khoản uống rượu say So sánh

var c1_pp = 4 / / Số perpage So sánh mục uống rượu say

var c1_marginFactor = 51;

var c1_sss = c1_w c1_pp; / / sss = slide kích thước bước

Các var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = số slide

c1_sss + = c1_marginFactor; / / sss = trượt bước kích thước, 51 cho lợi nhuận

Yêu cầu: Mootools 1,2

Xem Demo | Tải về Mootools Carousel Với 1,0 Phiên bản Paging (tải về 1.988 lần)

Các Mootools MooRating là một (qua trình duyệt, tất nhiên là nó sử dụng sức mạnh của thư viện MooTools) đơn giản, nhẹ và xuất sắc dựa trên giải pháp đánh giá. Nó không được gọi là "Đánh giá Star", đơn giản chỉ vì, hình ảnh đánh giá có thể được như bạn chọn (tôi đã cung cấp Stars, Bars và Hearts tải về, nhưng bạn có thể tạo ra nhiều của riêng bạn và chỉ cần thả nó trong).

Làm thế nào để nó trông giống như:

	Mootools Rating với hình ảnh khác nhau Xem Demo
	Rating Mootools với các giá trị Tỷ lệ phần trăm Xem Demo
	Rating Mootools với các giá trị Fractional Xem Demo

Tải về Mootols Star Rating Script (tải về 718 lần)

Đánh giá dữ liệu: Toàn bộ số thập phân hoặc Tỷ lệ phần trăm
Hiện tại, kịch bản được thiết kế để hiển thị các dữ liệu đánh giá như giá trị toàn bộ (1,2,3,4,5), trong số thập phân (1,24, 3,45 vv) hoặc tỷ lệ phần trăm (12%, 55% ...). Sự lựa chọn để hiển thị dữ liệu trong bất kỳ các định dạng được đề cập có thể được thiết lập chỉ đơn giản bằng cách thay đổi một số giá trị cờ trong javascript (moorating.js)
Về cơ bản có 2 e hai lá cờ để chơi với, để hiển thị các giá trị trong các định dạng của sự lựa chọn của bạn ...

var inpercent = false; / / Thiết lập lá cờ này cho đúng sự thật, nếu bạn yêu cầu tỷ lệ phần trăm giá trị được hiển thị
var isFractional = false / / Thiết lập này cho đúng, nếu bạn muốn giá trị phân đoạn như 1,24, 1,25, 4,56 chứ không phải là 1,2 ... 5

Và tôi không nghĩ rằng có bất kỳ lời giải thích cần thiết cho việc này. Hơn nữa. Kịch bản là rất đơn giản. Nếu bạn biết một javascripting, bạn có thể thay đổi kịch bản để có được bất kỳ loại giá trị hiển thị. Đối với ví dụ nếu bạn muốn ba chữ số thập phân sẽ được hiển thị ... chỉ cần tinh chỉnh các kịch bản như dưới đây ...

nếu (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);} / / 2 được thay đổi đến 3
moostartval [i] innerHTML = Math.round (x).

Cập nhật giá Rating:
Tôi havent phiền bằng văn bản bất kỳ kịch bản AJAX để cập nhật các giá trị Ratings, bởi vì tôi biết từ kinh nghiệm của tôi mà không luôn luôn làm điều đó có ý định cập nhật ĐÁNH GIÁ như ngay sau khi một cái gì đó tỷ lệ người sử dụng. Bạn được tự do để làm bất cứ điều gì bạn muốn với giá trị đánh giá, cập nhật nó bằng cách sử dụng AJAX hoặc Gửi hoặc Thiết lập một giá trị hình thức lĩnh vực tiềm ẩn, được gửi cùng với toàn bộ hình thức.

updateRating chức năng (id, rating) {
/ / Alert (id + "," + Đánh giá);
/ / DO WHATEVER VỚI CÁC ĐÁNH GIÁ
}

Có chức năng trong javascript được gọi là "updateRating". Chức năng này đã được thông qua ID của Div Bình, để xác định để xếp hạng (nếu có là một xếp hạng trên trang web) đã được cập nhật và giá trị của các đánh giá [updateRating (id, rating). Bạn có thể chọn bất cứ điều gì bạn muốn với các giá trị này, như tôi đã đề cập trước đó.

Đánh giá hình ảnh: Sao, Hearts, quán rượu, hoặc bất cứ điều gì bạn vui lòng
Thay đổi sự đánh giá của các loại trên (ngôi sao, trái tim ...) là rất đơn giản. Chỉ cần tạo ra một hình ảnh tương tự như một trong những được cung cấp và thả nó. Ghi, nếu bạn thay đổi tên của hình ảnh, không làm thay đổi cần thiết trong file CSS, xem dưới đây.

Moostar {margin: 0px; padding: 0px; overflow: hidden; width: 84px; chiều cao: 20px; float: left; background: url ('stars.gif') repeat-x;}.
Moostar khoảng {float: left; margin: 0px; padding: 0px; màn hình hiển thị: block; width: 84px; chiều cao: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}.
.. Moostar curr {background: url ('stars.gif') để lại 25px;}

Xếp hạng hầu hết các vật dụng sử dụng hình ảnh ngôi sao và một nửa sao với con chuột qua các sự kiện trên mỗi ngôi sao. Moo Ratings sử dụng một hình ảnh đơn giản ma như là một hình nền để đạt được các hiệu ứng hình ảnh theo yêu cầu với một chi phí rất thấp.

Yêu cầu: Mootools 1,2
Tải về Mootols Star Rating Script (tải về 718 lần)

Trong Firefox ... đôi khi bạn có thể đã nhận thấy rằng con trỏ bắt đầu nhấp nháy trên màn hình. Nó có thể xảy ra khi bạn nhấp chuột vào bất kỳ yếu tố trên trang web, một bộ phận hoặc một hình ảnh Cursor Blinking trong cửa sổ trình duyệt này thực sự là một tính năng KHẢ NĂNG TIẾP CẬN của FireFox được gọi là 'dấu nháy duyệt. Tính năng này cho phép / cho phép người sử dụng để chọn văn bản trên trang web với bàn phím (chúng ta thường có xu hướng để làm với việc sử dụng con chuột của chúng tôi).

Vâng! nếu bạn donot muốn tính năng này ... đơn giản báo chí "F7" để chuyển đổi nó để sai và ngược lại (nếu bạn muốn nó ON). Bạn cũng có thể gõ "about: config" vào thanh địa chỉ (loại trong "dấu nháy" trong hộp lọc) và chỉ đơn giản là nhấn đúp chuột để thay đổi các tùy chọn "accessibility.browsewithcaret" từ "true" (chuyển dấu nháy duyệt) để "false "(chuyển dấu nháy duyệt OFF)

Tôi đã được tìm kiếm một thanh trượt gắn đôi nắp trượt với hai nút bấm, tối thiểu và tối đa bằng cách sử dụng mootools. Mặc dù, tôi đã tìm thấy một thanh trượt thực hiện vài đôi pin trong diễn đàn mootools, vấn đề duy nhất là tất cả những dint thanh trượt có các điểm đánh dấu phạm vi lựa chọn. Cuối cùng! Tôi quyết định để tạo của riêng tôi. Vâng! Tôi đã sử dụng mã ban đầu và sửa đổi nó để có một nền tảng trượt mà chỉ ra phạm vi lựa chọn trực quan, như trong ví dụ của tôi dưới đây. Các khu vực Blue cho biết phạm vi giá trị lựa chọn.

Phiên bản 2.2 Demo | các Mootools Tải về đôi Pinned trượt Phiên bản 2.2 (tải về 11635 lần)

Bạn có thể dễ dàng thay đổi giao diện và cảm nhận của chỉ số phạm vi (màu xanh trong ví dụ trên), núm thanh trượt, thanh trượt theo dõi bằng cách sửa đổi các slider.css theo yêu cầu.

Đừng thả một bình luận nếu bạn tìm thấy nó hữu ích.

Trước khi chúng tôi đã phải đối phó với CSS để tạo ra bố cục trang của chúng tôi, việc sắp xếp một số nội dung bên trong một ô trong bảng dường như chỉ trẻ em chơi. Đơn giản chỉ cần thiết lập "align" tài sản "valign" của bảng để có sự liên kết của sự lựa chọn của bạn, mảnh bánh!
Với bố trí CSS, mặc dù chúng tôi có "theo chiều dọc-align" tài sản cho các yếu tố, nó không có vẻ như đơn giản như "sắp xếp" hoặc tài sản "valign". Để được specifiic nhiều hơn "theo chiều dọc-align" không bao giờ có vẻ như để giải quyết bất kỳ vấn đề của bạn, đặc biệt là nếu được viết một phần của qua trình duyệt CSS.

Nếu không có việc sử dụng các bảng HTML, VẤN ĐỀ trung vào đối tượng, là một hình ảnh hoặc một số văn bản trong một bộ phận chứa, có thể được tất cả các UI / CSS phát triển cơn ác mộng tại một số điểm. Vấn đề này tiếp tục ngoại suy lo lắng của bạn sắp xếp, nếu các đối tượng được làm trung tâm năng động trong tự nhiên, tức là khi chiều cao của nó là biến (không rõ chiều cao).

Mặc dù có là không có giải pháp được gọi thẳng về phía trước sẽ làm việc trên phạm vi của các trình duyệt chúng ta phải đối phó với các giải pháp mà tôi đã cố gắng để đi đến không có vẻ làm việc trong các trình duyệt mà tôi đã thử nó trong (IE6, IE 7 , FF).

GIẢI PHÁP:
Trong các trình duyệt như Mozilla, Opera và Safari, lạ hành xử "theo chiều dọc-align" tài sản có thể được đưa đến giác quan của nó, chỉ đơn giản bằng cách thiết lập "hiển thị" tài sản của các bộ phận có chứa tế bào bảng "(display: table-cell) .

Vấn đề vẫn còn với gia đình của các trình duyệt IE, người, nhưng dường như không hiểu những gì với tài sản "bàn di động" và không biết gì như họ, họ chỉ cần bỏ qua nó. Các giải pháp đưa ra dưới đây, mặc dù đơn giản, quảng cáo một DOM vài yếu tố HTML của bạn để làm cho mọi việc xảy ra.

CSS và HTML trông như thế này
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> views: 3456 </ div>
</ Div>
</ Div>

Kết quả trông như thế này:

xem demo ở đây | Tải tập tin Source (tải về 451 lần)

TOP Align CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> views: 1234 </ div>
</ Div>
</ Div>

Kết quả trông như thế này:

BOTTOM Align CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> views: 1234 </ div>
</ Div>
</ Div>

Kết quả trông như thế này:

xem demo ở đây | Tải về tại đây

Có vẻ như lứa tuổi, kể từ khi tôi đã cố gắng tìm một giải pháp hợp lý cho vấn đề này liên kết. Nhưng bây giờ với giải pháp này, tôi cảm thấy hòa bình ít.

Với hy vọng rằng một ngày nào đó

• tài sản liên kết dọc trong CSS sẽ làm việc như nó bên trong một ô trong bảng, KHÔNG phải đánh bại nhiều quanh co
• Ít nhất, thiết lập margin-top: tự động và lề dưới: tự động, sẽ cho kết quả tương tự như với margin-left và thiết lập lề bên phải để tự động
• Cuộc chiến trình duyệt sẽ có một ngày nào đó.
• Có chỉ ONE trình duyệt cho tất cả.

Tải về CSS và HTML của giải pháp trên đây (tải về 451 lần) ... cho dễ hiểu, CSS chưa được tối ưu hóa

PS: Và bằng cách này, đó là hình thu nhỏ của một số hình ảnh tôi đã nhấp vào ...