ایران سرور

چگونه دو پست کنار هم داشته باشیم ؟

آموزش برای سطح متوسط !

سلام !
اول از همه خودمو معرفی کنم ! من طراح سایت http://shop.digitak.ir هستم !
خیلی از دیتا کارها ازم می پرسن چطوری 2 تا پست رو کنار هم جا می دی !
منم تصمیم گرفتم این روش نسبتا حرفه ای رو آموزش بدم !

این کار خیلی سادست . فقط یه مقدار دانش CSS و HTML می خواد . ما در این روش از ساختار Table-Less (ساختار بدون جدول) استفاده کردیم . به طور کلی بگم : این کار فقط و فقط با استفاده از CSS و دستورات
قابل اجراست .

خوب بریم رو آموزش ! :

اول از همه شما یه فایل خارجی CSS بسازید و اونو به یه فایل HTML متصل کنید . به این صورت :

<link href="stype.css" rel="stylesheet" type="text/css" />


خوب ! فایل CSS رو باز کنید و دستورات زیر رو توش کپی کنید :

.middle {
    width:750px;
    text-align:justify;
    border:1px solid #333333;
    background-color:#FFFFFF
}

.post {
    width:180px;
    height:300px;
    float:right;
    margin-bottom:40px;
    margin-left:20px;
    margin-right:30px;
}

.post-top {
    background-image:url(http://shop.digitak.ir/templates/digishop/images/tit.gif);
    height:19px;
    width:207px;
    padding-top:4px;
    padding-right:3px;
    background-repeat:repeat-x;
    
}

.post-down {
    border:2px solid #4398EF;
    border-top:0px;    
    padding:10px;
    width:186px;
    height:275px;
}


.poste {
    width:460px;
    height:auto;
    float:right;
    margin-bottom:40px;
    margin-left:20px;
    margin-right:20px;
}


خوب حالا بگم هر کدوم مال کجاست !
بلاک middle مربوط به کل کار شماست . یعنی برای نمایش مطالب ضروری است .
بلاک post : با این بلاک مشخص می کنید که می خواید از مطالب استفاده کنید . یعنی مطالب شما با width 180 و height 300 و چسبیده به راست باشد .
بلاک post-top و post-down هم به TITLE و قسمت متن پست مربوط میشه

خوب ! حالا بریم رو فایل HTML و اصل کار !

محتویات فایل shortstory.tpl هم باید کد های زیر باشه :

<div class="post">
<div class="post-top">[full-link]{title}[/full-link]</div>
<div class="post-down">

{short-story}

</div>
</div>


خوب ! حالا راز کار در چیه ؟ اگه گفتی lol
راز کار در این هست که شما وقتی برای یه بلاک widthی مشخص می کنی که نصف منهای 2 از بلاک بزرگتر باشه دو تا بلاک کنار هم قرار می گیره ! حالا اگه این فرمول رو به یک سوم منهای سه تقسیم کنی میشه 3 تا پست کنار هم !


خبر ساخت DATALIFE ESHOP رو هم میدم که دارم روش کار میکنم ! (دیتالایف نسخه فروشگاهی نه ماژول فروشگاه)

موفق باشید.


تاریخ انتشار: 27 مهر 1387
ارسال کننده: digitak
برچسب ها: کار, بلاک, خوب, فقط, فایل, استفاده, روش, آموزش, پست, کنار, حالا, ساختار, خیلی, بگم, بریم, دستورات, همه, اول
imans، midoodj و rezaapachi و 24 نفر دیگر تشکر کرده‌‌اند.

payam.sepordeh گفته:

28/07/1387 - 14:14
سلام دوست قدیمی .خوبی .موفق باشی آموزش جالب و زیبایی بود منتظر هستیم.آقا این رفیقه ما هستا عزیتش نکنید با نظراتتون موفق باشی wink flower

__________________
کتابچه آموزش کامل قالبسازی دیتالایف انجین ( قالبسازی دیتالایف انجین در 1 ساعت) - تا چند روز آینده
payam.sepordeh
مدیر بازنشسته

digitak گفته:

28/07/1387 - 16:05
ashkan.2tia,
کلاس middle مشخص کننده کل کار هست ! توضیح هم یه کم دادم ولی ازش رد شدم !
کامل ترش می شه اینطوری :

شما وقتی می خوای مثلا 50 خط رو یه بهش استایل center بدی چکار می کنی ؟ مگه از کد زیر استفاده نمی کنی :

<center>
50 خط کد
</center>

خوب ! کلاس middle هم دقیقا همین کار رو انجام میده ! کل کار رو تحت پوشش قرار میده !


aftab
digitak
عضو سایت

ashkan.2tia گفته:

28/07/1387 - 17:55
digitak,
ممنون از توضیحت خوب من الان این کلاس middle رو لازمه توی فالب بزارم یا فقط توی css کفایت میکنه اگه آره حدودا کجای قالب

__________________
شرکت پیشتازان فن آوری طوطیا
واقع در یزد
ashkan.2tia
عضو سایت

ooops گفته:

28/07/1387 - 19:36
واقغا قابل ستایش
ممنون و تشکر
منم طراحی زیاد کردم مثلا www.arzancloob.com البته هیچ ربطی به دیتالایف انجین نداره
قالب های هم مثل www.salamdanesh.com طراحی کردم ( البته ویرایش کامل یکی از قالبهای شماست )
فکر کنم بتونم به دیتالایف انجینی ها خدمت کنم ؟؟؟ feel
یعنی مدیر شوم wink
ooops
عضو سایت

digitak گفته:

28/07/1387 - 22:37
ashkan.2tia,
اونو باید تو main.tpl به صورت زیر تعریف کنی :

<div class=middle>
{info}
{contect}
</div>

بعد اون کدهایی که من تو پست دادم رو بریزی تو short !

ooops,
شما اولین کسی هستی که داری شخصا اعتراف می کنی ! بقیه 200 - 300 نفر دیگه که کش رفتا ما موچشونو گرفتیم ! hahahoho

شما می تونی با آموزش گرافیک و طراحی های گرافیکی کمک کنی :d
digitak
عضو سایت

digitak گفته:

1/08/1387 - 14:11
mortezaa,
ممنون
digitak
عضو سایت

rezaapachi گفته:

11/08/1387 - 16:53
ممنونم خیلی بدردم خورد ... verylol
rezaapachi
عضو سایت

JohnSmith گفته:

19/08/1387 - 23:33
ای کاش مثل همه ماژول های دیگر دیتالایف انجین ، این ماژول هم یک راهنمای کامل داشت.

متشکر می شوم که با نگارش جند خط راهنما برای افراد تازه کار ، این مطلب خود را کاراتر کنید.
JohnSmith
عضو سایت

JohnSmith گفته:

20/08/1387 - 21:50
آقا لطف کنید و مرحله به مرحله مثل بقیه آموزش ها ، این مطلب کاربردی را بگذارید.

ممنون
JohnSmith
عضو سایت

haray گفته:

24/08/1387 - 21:38
عالیه.لازم میشه.
haray
عضو سایت

magicp30 گفته:

28/08/1387 - 21:15
خوب بود
magicp30
عضو سایت

ali گفته:

25/12/1387 - 03:44
دمت گرم
موفق باشی
ali
میهمان

bia2buy گفته:

6/01/1388 - 14:50
سلام بچه ها من میخوام یه سایتی مثل http://far30mobile.com این درست کنم هاست هم دارم نیاز به کمک دارم اگر ممکنه یکی من رو راهنمایی کنه میخوام هم قسمت دانلود داشته باشه هم فروشگاه.
bia2buy
عضو سایت

msmed گفته:

9/06/1388 - 22:53
مطلب جالبی بود ولی جسارتا آموزشتون خیلی مبهم بود.
خودتون گفتید نصف منهای دو.
انصافا کدوم یک از اعدادی که تو css گذاشتید نصف منهای دو اون یکیه ؟؟؟
msmed
عضو سایت

milad22 گفته:

16/08/1388 - 01:10
سلام جالب بود .. ولی هنوز امتحانش نکردم .. بازم ممنونم از شما
milad22
عضو سایت

mobi3nter گفته:

6/12/1388 - 23:46
اگر یک راهنما درست و حسابی داشت عالی می شد .
mobi3nter
عضو سایت

redo گفته:

29/02/1389 - 03:31
چند سوال بی پاسخ
1_ فایل css باید کدام بخش قالب باشه‌ منظور پوشه‌ بود
2_ یه فایل خارجی CSS بسازید و اونو به یه فایل HTML متصل کنید ؟ کد اتصال باید کجا قرار داده‌ بشه‌ ؟
3_ بحث بدین مهمی چرا اموزشش خوب نیست یا منظور رساندن خبر DATALIFE ESHOP بود ؟
redo
عضو سایت

maya گفته:

14/03/1390 - 19:33
این هم مثل اکثر پست های این سایت ناقصه:
خواهشا هر کی میخواد پست بزاره کامل و بدون نقص بزاره - آزمون و خطا کار نکنه

__________________
اولین نیازمندی های ویدیویی آنلاین
سی باکس
------
بعد این همه مدت کسی به محبوبیت ما در این سایت رای نداد!
نظر شما در این مورد چیه ؟
:(
maya
عضو سایت

اطلاعات

برای ارسال نظر، باید در سایت عضو شوید.