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

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

به تصویر زیر نگاه کنید:

در عکس نارنجی رنگی که در تصویر بالا وجود دارد شما میتوانید توضیحی نیز پیرامون تصویر خود بنویسید
که به آن 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 ایجاد شده ، میتوان استفاده نمود