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

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

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

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

قابل اجراست .

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

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

خوب ! فایل 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 رو هم میدم که دارم روش کار میکنم ! (دیتالایف انجین نسخه فروشگاهی نه ماژول فروشگاه)

موفق باشید.

نظرات کاربران

اشکان در 28 مهر 1387 - 01:12 گفته:

عضو سایتنظرات: 182

سلام دیجی تک ممنون از اینکه این کارو کردی راستش من این موضوع رو توی فروم شروع کردم و حتی راز کار رو کشف کردم

اما خوب چون وارد نبودم هر کار کردم نتونستم دقیق روی قالب پیاده کنم

این آموزش رو بکار می گیرم این شاالله که جواب می ده
راستش من .middle رو روش کار نکرده بودم

مطمئن باش همه دعات می کنن

ولی می خواستم بپرسم فقط باید کدهای div توی shortstory به این شکل باشه یا جور دیگه هم می تونه باشه مثلا از تیبل استفاده بشه

--------------------

شرکت پیشتازان فن آوری طوطیا
واقع در یزد

1.5

aftab design در 28 مهر 1387 - 08:45 گفته:

عضو سایتنظرات: 10

ممنون

paolo22 در 28 مهر 1387 - 12:09 گفته:

عضو سایتنظرات: 1

سلام عزیز ممنون از این آموزشت.
ولی راستش رو بخوای من زیاد حرفه ای نیستم و می خوام یه ذره کاملتر توضیح بدی.

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

یعنی چی واقیعت زیاد سر در نیاوردم. بیشتر توضیح بدی ممنون می شم.
بازم تشکر

محمد یکتا در 28 مهر 1387 - 12:35 گفته:

مدیر کلنظرات: 358

paolo22,
یعنی شما یه فایل جدید به نام stype.css با نوت پد بساز.
بعد توی قالبت کد زیر رو بزار:

اون بالا باید آدرس stype.css رو وارد کنین.

دیتالایف انجین فارسی، پایدار تا ابد...

اشکان در 28 مهر 1387 - 13:58 گفته:

سلام راستش من کد های زیر رو توی Css قرار نمی دادم و تا حدودی کارم انجام می شد
می خوام بدونم این دو تا کلاس برای چی هست و توی کدوم کد استفاده می شه چون توی شرت استوری نیست

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

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

در ضمن شما می تونید این css هارو توی خود استایل هم به کار ببرید که نیاز به کد گزاشتن توی قالب نباشه

پیام سپرده در 28 مهر 1387 - 14:14 گفته:

مدیر سایتنظرات: 249

سلام دوست قدیمی .خوبی .موفق باشی آموزش جالب و زیبایی بود منتظر هستیم.آقا این رفیقه ما هستا عزیتش نکنید با نظراتتون موفق باشی wink

Datalife engine DLS

digitak در 28 مهر 1387 - 16:05 گفته:

عضو سایتنظرات: 58

ashkan.2tia,
کلاس middle مشخص کننده کل کار هست ! توضیح هم یه کم دادم ولی ازش رد شدم !
کامل ترش می شه اینطوری :

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

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

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

aftab

اشکان در 28 مهر 1387 - 17:55 گفته:

digitak,
ممنون از توضیحت خوب من الان این کلاس middle رو لازمه توی فالب بزارم یا فقط توی css کفایت میکنه اگه آره حدودا کجای قالب

--------------------
شرکت پیشتازان فن آوری طوطیا
واقع در یزد
1.5

ooops در 28 مهر 1387 - 19:36 گفته:

عضو سایتنظرات: 11

واقغا قابل ستایش
ممنون و تشکر
منم طراحی زیاد کردم مثلا www.arzancloob.com البته هیچ ربطی به دیتالایف انجین نداره
قالب های هم مثل www.salamdanesh.com طراحی کردم ( البته ویرایش کامل یکی از قالبهای شماست )
فکر کنم بتونم به دیتالایف انجینی ها خدمت کنم ؟؟؟
یعنی مدیر شوم

digitak در 28 مهر 1387 - 22:37 گفته:

ashkan.2tia,
اونو باید تو main.tpl به صورت زیر تعریف کنی :

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

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

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

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

digitak در 01 آبان 1387 - 14:11 گفته:

mortezaa,
ممنون

rezaapachi در 11 آبان 1387 - 16:53 گفته:

عضو سایتنظرات: 18

ممنونم خیلی بدردم خورد ...

JohnSmith در 19 آبان 1387 - 23:33 گفته:

ای کاش مثل همه ماژول های دیگر دیتالایف انجین ، این ماژول هم یک راهنمای کامل داشت.

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

JohnSmith در 20 آبان 1387 - 21:50 گفته:

آقا لطف کنید و مرحله به مرحله مثل بقیه آموزش ها ، این مطلب کاربردی را بگذارید.

ممنون

haray در 24 آبان 1387 - 21:38 گفته:

عضو سایتنظرات: 79

عالیه.لازم میشه.

magicp30 در 28 آبان 1387 - 21:15 گفته:

عضو سایتنظرات: 75

خوب بود

ali در 25 اسفند 1387 - 03:44 گفته:

میهمان

دمت گرم
موفق باشی

bia2buy در 06 فروردین 1388 - 14:50 گفته:

عضو سایتنظرات: 3

سلام بچه ها من میخوام یه سایتی مثل http://far30mobile.com این درست کنم هاست هم دارم نیاز به کمک دارم اگر ممکنه یکی من رو راهنمایی کنه میخوام هم قسمت دانلود داشته باشه هم فروشگاه.

msmed در 09 شهریور 1388 - 22:53 گفته:

عضو سایتنظرات: 35

مطلب جالبی بود ولی جسارتا آموزشتون خیلی مبهم بود.
خودتون گفتید نصف منهای دو.
انصافا کدوم یک از اعدادی که تو css گذاشتید نصف منهای دو اون یکیه ؟؟؟

milad22 در 16 آبان 1388 - 01:10 گفته:

عضو سایتنظرات: 26

سلام جالب بود .. ولی هنوز امتحانش نکردم .. بازم ممنونم از شما

mobi3nter در 06 اسفند 1388 - 23:46 گفته:

عضو سایتنظرات: 54

اگر یک راهنما درست و حسابی داشت عالی می شد .

سامان کریم در 29 اردیبهشت 1389 - 03:31 گفته:

مدیر بازنشستهنظرات: 88

چند سوال بی پاسخ
1_ فایل css باید کدام بخش قالب باشه‌ منظور پوشه‌ بود
2_ یه فایل خارجی CSS بسازید و اونو به یه فایل HTML متصل کنید ؟ کد اتصال باید کجا قرار داده‌ بشه‌ ؟
3_ بحث بدین مهمی چرا اموزشش خوب نیست یا منظور رساندن خبر DATALIFE ESHOP بود ؟

--------------------
من نمی دانم هر سال کە میگذرد یک سال بزرگتر می شوم یا یک سال از عمرم کم میشود
0