قراردادن تصویر با توضیحات مربوط به آن در هر پست

مجموعه مقالات و مطالب مرتبط با بلاگر و وبلاگ نویسی و دنیای فناوری اطلاعات

دیدن مطالب وبلاگ

۱۳۸۶/۱۱/۲۹

قراردادن تصویر با توضیحات مربوط به آن در هر پست


آیا میخواهید در هر پست خود تصاویری همراه با افکت و توضیح مربوط به آن داشته باشید؟

به تصویر زیر نگاه کنید:
This file has been created and published by FireShot
در عکس نارنجی رنگی که در تصویر بالا وجود دارد شما میتوانید توضیحی نیز پیرامون تصویر خود بنویسید
که به آن Caption گویند.

1. برای این کار ابتدا کدهای CSS زیر را به قالب خود اضافه کنید:

.floatright

{

float: right;

width: 103px;

margin: 0 0 10px 10px;

background-color: #fff;

padding: 10px;

border-top: 1px solid #999;

border-right: 2px solid #555;

border-bottom: 2px solid #555;

border-left: 1px solid #999;

}

div.floatright img

{

border-top: 2px solid #555;

border-right: 1px solid #999;

border-bottom: 1px solid #999;


border-left: 2px solid #555;

}

p { margin-top: 0; }

2. همچنین نوع کدهای استفاده شما در قسمت Edit Html داشبورد شما باید بصورت زیر باشد:


<div class="floatright">

<img src="images/image.gif" alt="" width="100" height="100"><br>

توضییح درباره تصویر را در اینجا بنویسید

</div>

<p>

متن مورد نظر خود را در این مکان بنویسید

</p>


نکته : به عبارت floatright در قسمت Class توجه کنید . این عبارت رابطه ،بین کد CSS را با کدهای تصویر برقرار میکند
نکته: اگر بخواهید تصویر در سمت چپ قرار گیرد: این تنظیم را انجام دهید : Float : Left

نکته : این ترفند برای تصاویر در اندازه 100*100 است
نکته : از این ترفند در هرنوع قالب وهر نوع سیستمی که برپایه زبان CSS ایجاد شده ، میتوان استفاده نمود

0 نظر:

لینکهای دوستان