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

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

پشتیبان رسمی سیستم مدیریت محتوا

چگونه دو پست کنار

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

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

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

موفق باشید.

نظرات کاربران
اشکان در 28 مهر 1387 - 01:12 گفته:
عضو سایتنظرات: 182

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

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

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

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


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

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

aftab design در 28 مهر 1387 - 08:45 گفته:
عضو سایتنظرات: 10

ممنون

paolo22 در 28 مهر 1387 - 12:09 گفته:
عضو سایتنظرات: 1

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

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


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

محمدرضا یکتامرام در 28 مهر 1387 - 12:35 گفته:
مدیر کلنظرات: 356

paolo22,
یعنی شما یه فایل جدید به نام stype.css با نوت پد بساز.
بعد توی قالبت کد زیر رو بزار:
<link href="stype.css" rel="stylesheet" type="text/css" />


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

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

اشکان در 28 مهر 1387 - 13:58 گفته:
عضو سایتنظرات: 182

سلام راستش من کد های زیر رو توی 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 گفته:
مدیر سایتنظرات: 248

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

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

digitak در 28 مهر 1387 - 16:05 گفته:
عضو سایتنظرات: 58

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

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

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

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


aftab

اشکان در 28 مهر 1387 - 17:55 گفته:
عضو سایتنظرات: 182

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

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

ooops در 28 مهر 1387 - 19:36 گفته:
عضو سایتنظرات: 11

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

digitak در 28 مهر 1387 - 22:37 گفته:
عضو سایتنظرات: 58

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

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

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

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

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

digitak در 01 آبان 1387 - 14:11 گفته:
عضو سایتنظرات: 58

mortezaa,
ممنون

rezaapachi در 11 آبان 1387 - 16:53 گفته:
عضو سایتنظرات: 18

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

JohnSmith در 19 آبان 1387 - 23:33 گفته:
عضو سایتنظرات: 11

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

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

JohnSmith در 20 آبان 1387 - 21:50 گفته:
عضو سایتنظرات: 11

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

ممنون

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 بود ؟

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

maya در 14 خرداد 1390 - 19:33 گفته:
عضو سایتنظرات: 32

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

kohan در 17 فروردین 1396 - 18:52 گفته:
عضو سایتنظرات: 4

در نسخه 11.2 هم میشه این کار رو انجام داد اگه نه در نسخه جدید چگونه این کار رو انجام دهیم

ارسال نظر
نام:*
ایمیل:*
متن نظر:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
کد را وارد کنید: *
عکس خوانده نمی‌شود؟ کلیک کنید!