استیل دهی تگ hr بصورت Cross Browser

معمولا بکار بردن تگ hr در طراحی صفحات وب دردسرهای مختص به خود را داراست از جمله مهمترین آنها نشان دادن شکل و شمایل آن بصورت یکسان است در انواع مرورگرهای وب (Cross Browser) با اِعمال انواع و اقسام عمگرها CSS.

روش زیر یکی از راه های سریع و ساده ایست که می توان برای استیل دهی به یک تگ hr بکار برد. ابتدا تگ hr را در داخل یک تگ div نوشته و یک کلاس مثلا بنام hrDiv به آن نسبت دهید:


<div class=”hrDiv”>
	<hr />
</div>

سپس در CSS کلاس hrDiv خاصیت clear آن را به both ست کنید. این نکته بخاصر آن است که اطمینان حاصل کنیم که div به هیچ عنصر دیگری در طرفین چپ و راست اجازه شناور شدن (float) نمی دهد.

سپس از یک تصویر یک پیکسلی (یک نقطه) بعنوان زمینه برای اِعمال افکت یک خط ممتد در راستای افق برای div استفاده کرده و برای پنهان کردن hr خصوصیت display آن را به hidden ست می کنیم. توجه داشته باشید که با وجود پنهان کردن تگ hr هنوز آن تگ در کد html پابرجاست.


.hrDiv
{
    clear:both;
    height: 1px;
    background: url(images/dot.gif) top left repeat-x;
    margin: 1em 0;
    width:100%;
}
.hrDiv hr
{
    display: none;
}			

نظر (3)

وضعیتتان را مشخص کنید!

برای اطلاع از تیمهای شرکت کننده در یورو 2008 به سایت یوفا بروید.

کتاب رایگان فتوشاپ

The Photoshop Anthology: 101 Web Design Tips, Tricks and Techniques سایت Sitepoint نسخه ی PDF کتاب
The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques را به مدت 30 روز بصورت رایگان در دسترس قرار داده است.

می توانید از اینجا دانلود کنید.

راهنمای مصور نصب PHP تحت ویندوز

گام یک برای دانلود آخرین پکیج PHP به آدرس زیر بروید.

http://www.php.net/downloads.php

در بخش باینری های ویندوز نسخه Zip را انتخاب کنید.(توجه داشته باشید که نسخه Installer را اشتباهی دانلود نکنید!)

ادامه ...

نظر (4)