دیتالایف انجین فارسی

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

تاریخ انتشار: 27 مهر 1387
ارسال کننده: digitak
آموزش برای سطح متوسط !

سلام !
اول از همه خودمو معرفی کنم ! من طراح سایت 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 نفر (27 کاربر و 0 میهمان) از این مطلب تشکر کرده اند.
    تشکر
    عضو سایت
    28 مهر 1387 - 01:12
    سلام دیجی تک ممنون از اینکه این کارو کردی راستش من این موضوع رو توی فروم شروع کردم و حتی راز کار رو کشف کردم

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

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

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


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

    --------------------
    عضو سایت
    28 مهر 1387 - 08:45
    ممنون
    عضو سایت
    28 مهر 1387 - 12:09
    سلام عزیز ممنون از این آموزشت.
    ولی راستش رو بخوای من زیاد حرفه ای نیستم و می خوام یه ذره کاملتر توضیح بدی.

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


    یعنی چی واقیعت زیاد سر در نیاوردم. بیشتر توضیح بدی ممنون می شم.
    بازم تشکر
    مدیر کل
    28 مهر 1387 - 12:35
    paolo22,
    یعنی شما یه فایل جدید به نام stype.css با نوت پد بساز.
    بعد توی قالبت کد زیر رو بزار:
    <link href="stype.css" rel="stylesheet" type="text/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
    سلام دوست قدیمی .خوبی .موفق باشی آموزش جالب و زیبایی بود منتظر هستیم.آقا این رفیقه ما هستا عزیتش نکنید با نظراتتون موفق باشی wink flower

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

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

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

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


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

    --------------------
    عضو سایت
    28 مهر 1387 - 19:36
    واقغا قابل ستایش
    ممنون و تشکر
    منم طراحی زیاد کردم مثلا www.arzancloob.com البته هیچ ربطی به دیتالایف انجین نداره
    قالب های هم مثل www.salamdanesh.com طراحی کردم ( البته ویرایش کامل یکی از قالبهای شماست )
    فکر کنم بتونم به دیتالایف انجینی ها خدمت کنم ؟؟؟ feel
    یعنی مدیر شوم wink
    عضو سایت
    28 مهر 1387 - 22:37
    ashkan.2tia,
    اونو باید تو main.tpl به صورت زیر تعریف کنی :

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

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

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

    شما می تونی با آموزش گرافیک و طراحی های گرافیکی کمک کنی :d
    عضو سایت
    01 آبان 1387 - 14:11
    mortezaa,
    ممنون
    عضو سایت
    11 آبان 1387 - 16:53
    ممنونم خیلی بدردم خورد ... verylol
    عضو سایت
    19 آبان 1387 - 23:33
    ای کاش مثل همه ماژول های دیگر دیتالایف انجین ، این ماژول هم یک راهنمای کامل داشت.

    متشکر می شوم که با نگارش جند خط راهنما برای افراد تازه کار ، این مطلب خود را کاراتر کنید.
    عضو سایت
    20 آبان 1387 - 21:50
    آقا لطف کنید و مرحله به مرحله مثل بقیه آموزش ها ، این مطلب کاربردی را بگذارید.

    ممنون
    عضو سایت
    24 آبان 1387 - 21:38
    عالیه.لازم میشه.
    عضو سایت
    28 آبان 1387 - 21:15
    خوب بود
    میهمان
    25 اسفند 1387 - 03:44
    دمت گرم
    موفق باشی
    عضو سایت
    06 فروردین 1388 - 14:50
    سلام بچه ها من میخوام یه سایتی مثل http://far30mobile.com این درست کنم هاست هم دارم نیاز به کمک دارم اگر ممکنه یکی من رو راهنمایی کنه میخوام هم قسمت دانلود داشته باشه هم فروشگاه.
    عضو سایت
    09 شهریور 1388 - 22:53
    مطلب جالبی بود ولی جسارتا آموزشتون خیلی مبهم بود.
    خودتون گفتید نصف منهای دو.
    انصافا کدوم یک از اعدادی که تو css گذاشتید نصف منهای دو اون یکیه ؟؟؟
    عضو سایت
    16 آبان 1388 - 01:10
    سلام جالب بود .. ولی هنوز امتحانش نکردم .. بازم ممنونم از شما
    عضو سایت
    06 اسفند 1388 - 23:46
    اگر یک راهنما درست و حسابی داشت عالی می شد .
    مدیر سایت
    29 اردیبهشت 1389 - 03:31
    چند سوال بی پاسخ
    1_ فایل css باید کدام بخش قالب باشه‌ منظور پوشه‌ بود
    2_ یه فایل خارجی CSS بسازید و اونو به یه فایل HTML متصل کنید ؟ کد اتصال باید کجا قرار داده‌ بشه‌ ؟
    3_ بحث بدین مهمی چرا اموزشش خوب نیست یا منظور رساندن خبر DATALIFE ESHOP بود ؟

    --------------------
    عضو سایت
    14 خرداد 1390 - 19:33
    این هم مثل اکثر پست های این سایت ناقصه:
    خواهشا هر کی میخواد پست بزاره کامل و بدون نقص بزاره - آزمون و خطا کار نکنه
    جهت ارسال نظر، فرم زیر را تکمیل نمائید:
    نام:*
    ایمیل:*
    متن نظر:

     
    پررنگکج خط دارخط دار در وسط|سمت چپوسط سمت راست|قرار دادن شکلکانتخاب رنگ|پنهان کردن متنقراردادن نقل قولتبدیل نوشته ها به زبان روسیقراردادن Spoiler
    کد امنیتی: *