آموزش طراحی قالب (فصل پنجم – جلسه چهارم) : تکمیل استایل دهی قالب

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۰۲ مرداد ۱۳۹۲

در جلسه قبلی از کدهای css قالب ، تا قسمت منو پیش رفتیم، در این جلسه قسمت محتوا را استایل دهی خواهیم کرد.

ابتدا فایل style را در ویرایشگر کد باز کنید.

از قسمت container شروع می‌کنیم که باید رنگ آن را سفید (پس زمینه content و sidebars) قرار دهیم و مقداری محتوای آن را از حاشیه فاصله دهیم :

#container {
background: #fff;
padding: 10px;
}

و حال با استفاده float مکان sidebarها و content را تعیین می‌کنیم. به کدهای زیر دقت کنید :

#right-sidebar {
float: right;
}

#content {
float: right;
}

#left-sidebar {
float: left;
}

اما با اضافه کردن این کدها طبعاً تغیری نخواهید دید ، دلیل آن این است که هنوز عرض هر قسمت را تعیین نکرده ایم برای همین هنوز به شکل زیر هم قرار دارند پس کد فوق را به شکل زیر توسعه می‌دهیم :

#right-sidebar {
float: right;
width: 230px;
}
#content {
float: right;
width: 520px;
}
#left-sidebar {
float: left;
width: 230px
}

اما اگر فایل را ذخیره و نتیجه را در مرورگر ببنید انگار مشکلی پیش آمده است!!

container به اندازه ی محتوایش کشیده نشده است و فوتر نیز تغییر مکان داده و به کنار پست آمده است. اگر به یاد داشته باشید این اشکال به خاطر استفاده از خاصیت float است پس فایل index.html را در ویرایشگر کد باز کنید و خط زیر را بعد کدهای left-sidebar قرار دهید :  (خط سوم کد اضافه شده است)

</div>
<!-- End Left Sidebar -->
<br style="clear: both" />
</div>
<!-- End Container -->

حال که مشکل نیز رفع شد به content مقداری margin می‌دهیم تا از right-sidebar فاصله بگیرد :

#content {
float: right;
width: 520px;
margin-right: 12px;
}

پس از این کار به استایل دهی بلوک‌ها و پست خواهیم پرداخت، ابتدا زمینه بلوک‌ها و پست‌ها را با کد زیر ایجاد می‌کنیم :

#right-sidebar .block ,
#left-sidebar .block ,
#content .post {
background: #f9f9f9;
padding: 10px;
margin-bottom: 10px;
border-radius: 3px;
border: 1px solid #a7a7a7;
border-bottom-width: 4px;
}

و سپس استایل دهی عناوین بلوک‌ها :

#right-sidebar .block .block-title ,
#left-sidebar .block .block-title {
text-align: center;
color: #235678;
text-shadow: 0 0 1px rgba(35,70,120,.70);
padding-bottom: 15px;
margin-bottom: 20px;
background: url(../images/block-title.png) center bottom no-repeat;
}

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

#right-sidebar .block .block-content ul li ,
#left-sidebar  .block .block-content ul li {
border-bottom: 1px solid #ddd;
padding: 7px;
color: #000;
}

#right-sidebar .block .block-content ul li a ,
#left-sidebar  .block .block-content ul li a { color: #000;}

#right-sidebar .block .block-content ul li:hover ,
#left-sidebar  .block .block-content ul li:hover {background: #dddeee;}

اگر فایل رو ذخیره کرده باشید و نتیجه رو توی مرورگر دیده باشید فقط استایل تصاویر تبلیغات مانده است. پس با کد زیر آن‌ها را نیز استایل دهی می‌کنیم :

#left-sidebar  .block .block-content a img {
margin-right: 15px;
border-radius: 4px;
border-bottom: 4px solid #a7a7a7;
}

#left-sidebar  .block .block-content a img:hover {border-bottom-color:#234567;}

حال که استایل دهی sidebarها تمام شد، نوبت به قسمت مطالب می‌رسد، ابتدا فاصله محتوای پست را با کد زیر از بین می‌بریم :

#content .post {padding: 0;}

 سپس استایل عنوان مطلب رو می‌نویسیم : (مقداری متفاوت‌تر از psd)

#content .post .post-title  {
color: #444;
background: #eee;
padding: 7px 20px 7px 0;
border-bottom: 1px solid #a7a7a7;
margin-bottom: 10px;
text-shadow: 1px 1px 1px #aaa;
border-radius: 3px 3px 0 0;
}

#content .post .post-title:hover {color: #234678;}

و حال استایل تصویر بند انگشتی و خلاصه متن. اما ابتدا چونکه میخواییم اون هارو با استفاده از float کنار هم قرار بدیم، پس بهتره که اول این دو رو در داخل یک div قرار دهیم پس کد‌های html قسمت مطلب (class=”post”) رو به شکل زیر ویرایش می‌کنیم :

(خط‌های 3 و 8 اضافه شده)

<div class="post">
<a href="#"><h4>عنوان مطلب</h4></a>
<div class="thumb-text">
<img class="post-thumb" src="images/thumb.png" width="150" height="150" alt="تصویر بند انگشتی" title="تصویر بند انگشتی"/>
<div class="post-content">
<p>متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن  مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد...</p>
</div>
</div>
<a class="read-more" href="#">ادامه مطلب</a>

حال استایل این قسمت‌ها :

#content .post .post-thumb {
margin: 0 10px;
float: right;
}
#content .post .post-content {
float: left;
width: 330px;
margin: 0 0 15px 15px;
}

#content .post .post-content p {
text-align: justify;
line-height: 20px;
font-family: tahoma;
font-size: 13px;
}

سپس برای از بین بردن خاصیت float بر سایر قسمت‌ها کد clear رو به فایل html، قبل از کد ادامه مطلب اضافه می‌کنیم. (خط شماره 8 اضافه شده)

<a href="#"><h4>عنوان مطلب</h4></a>
<div class="thumb-text">
<img class="post-thumb" src="images/thumb.png" width="150" height="150" alt="تصویر بند انگشتی" title="تصویر بند انگشتی"/>
<div class="post-content">
<p>متن مطلب در اینجا قرار می‌گیر ، متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن  مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد ، متن مطلب در اینجا قرار می‌گیرد...</p>
</div>
</div>
<br style="clear: both;" />
<a class="read-more" href="#">ادامه مطلب</a>

حال استایل دکمه ادامه مطلب را می‌نویسیم :

#content .post .read-more {
background: #fff;
position: relative;
right: 410px;
padding: 0 15px;
border: 1px solid #a7a7a7;
border-bottom-width: 4px;
border-radius: 3px;
font-size: 18px;
color: #777;
}

#content .post .read-more:hover {
color: #234678;
border-color: #234678;
}

و در آخر استایل اطلاعات پست را می‌نویسیم :

#content .post .post-meta {
background: #d2d2d2;
border-top: 1px solid #a7a7a7;
margin-top: 15px;
padding: 10px;
padding-top: 7px;
}

#content .post .post-meta * {display: inline;}

#content .post .post-meta .author,
#content .post .post-meta .date {margin-left: 50px;}

#content .post .post-meta div span ,
#content .post .post-meta div a {
color: #255497;
font: 14px tahoma;
}

#content .post .post-meta img {
position: relative;
top: 3px;
margin-right: 3px;
}

پس از نوشتن این کدها، فقط قسمت فوتر سایت باقی می‌ماند :

#footer {
background: #366995;
padding: 10px;
}
#footer .copyright {
color: #fff;
text-align: center;
font-size: 24px;
}

اگر فایل را ذخیره کنید و نتیجه را در مرورگر ببنید، همه قسمت‌ها استایل دهی شده و قالبمان آماده شده است

در جلسه بعدی که بعضی اصلاحات را انجام خواهیم داد و باگ‌های قالب را خواهیم گرفت.

اگر مشکلی طی آموزش براتون پیش اومده در قسمت نظرات مطرح کنید

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

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

laya25

سلام من تو این جلسه هم به مشکل استفاده از float بر خوردم تو جلسه قبل تگ a رو نبسته بودم ولی الان همه تگهارو نگا کردم مشکلی نبود نمیدونم چرا بعد استفاده از float و clear کد درست عمل نمیکنه لطف میکنید بگین مشکلم کجاست
ممنون
http://upir.ir/1393.2/ghaleb_6c132.zip

سجاد دریس

سلام.
آیدی left sidebar و right sidebar رو تصحیح کنید
خط های 63 و 131
بین right و sidebar و همینطور بین left و sidebar فاصله نذارید بلکه – قرار بدین.

سید مجتبی علمدار

سلام.خسته نباشید.
تشکر بابت اموزش خوبتون.
یه سوال داشتم خدمتتون؟
من کدها را از اول با شما همراهی کردم و نوشتم ولی left-sidebar من درست در جای خودش قرار نگرفته؟
می خواست ببینم ایراد کار کجاست؟؟
فایل css و اچ تی ام ال:
http://uplod.ir/62u20gfx22v2/style.css.htm
http://uplod.ir/3ak6zht4n99g/index.html.htm
ممنون از اموزش خوبتون.

سجاد دریس

سلام.
یه اشتباه کوچیک تو خط 50 فایل html دارین.
این فایل اصلاح شده رو دانلود کنید

hamed_z2001

سجاد جون بیا دادا اینم کد کاملم:
http://gigpars.com/upload/ex3l_theme.rar

سجاد دریس

سلام.
این فایل رو جایگزین کن.

http://up.persianscript.ir/uploads/935a-Style.rar
hamed_z2001

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

سجاد دریس

توی خصوصیت background مقدار center bottom رو و ننوشته بودی تا که background در پایین نوشته قرار بگیره

hamed_z2001

سلام من به چندتا مشکل برخوردم که لطف میکنی اگه جوابمو بدی!!
1- وقتی عکس مربوط به خط همراه با فلش زیر عنوان بلوکهای چپ و راست رو میذارم(به عنوان بک گراند،طبق آموزش) خط روی عنوان قرار میگیره ….اینم عکسش:
http://upload7.ir/imgs/2014-01/89138169478827360480.jpg

2-وقتی صفحه رو تو مرورگر ریسایز میکنم قالب بهم میریزه چیکارش کنم؟؟
اینم عکسش:
http://upload7.ir/imgs/2014-01/53908820532258069867.jpg

3-تو css چی جوری میشه اینجوری منو درست کرد؟؟با شیب؟؟
عکس:
http://upload7.ir/imgs/2014-01/04379592814705961214.jpg
مرسی دوست خوبم.ببخش که یکم سوالام زیاد شد 😀

سجاد دریس

سلام.
1. دقیقا کد رو درست نوشتین؟ انگار از padding-bottom استفاده نکردین.
2. همچین مشکلی وجود نداره، شما قالب رو تا آخر طراحی کنید حتما این مشکل حل میشه چون هنوز قالبتون ناقصه این مشکل رو دارید.
3. با استفاده از خاصیت transform skew میشه ایجادش کرد. ولی برای اینکه پیچیده نشه میتونید تصویر رو برش بزنید و به عنوان بکگراند منو ازش استفاده کنید
برا آشنایی با خاصیت transform
این آموزش رو مطالعه کنید.

hamed_z2001

ممنون سجاد جان
1- آره.کدا رو دقیق از رو آموزشت زدم.padding bottom هم وقتی تعریف میکنم فقط لینکهایی که زیر عنوان نوشته شده رو پایین میبره.مطمئنی که اون خط باید به عنوان بکگراند استفاده بشه؟؟نباید به شیوه دیگه ای واردش کرد؟؟
2-مشکلش حل شد.دستت درد نکنه.عرض wrapper رو تعریف نکرده بودم برا همین کل صفحه رو در نظر میگرفت و با ریسایز بهم میریخت
3-منظورت از استفاده از skew اینه که هر طرف منو 2تا box بذارم و یکیشو بچرخونم؟؟

سجاد دریس

1.عجیبه. کدت رو بفرست ببنیم!
3. آره

مهدی

سلام خسته نباشید
خیلی ممنون بابت آموزش تون میخواستم بدونم که این قالب رو که طراحی کردید کجا ها به درد میخوره منظورم اینکه آیا میشه تو جوملا یا وردپرس inport کرد یا باید یک مدیریت محتوای خاصی باشه ؟
الان این قالب رو چه طوری نو اینترنت به کار بیاندازیم؟
با تشکر

لقمان آوند

سلام
این قالب یک قالب استاتیک هست .
برای استفاده در سیستم های مدیریت محتوای خاص باید کدهای اون cms ها رو درون این قالب بزارید و اون رو باهاشون سازگار کنید .
در واقع پایه ای برای قالب های cms های مختلف میتونه باشه !

مهدی

خیلی ببخشید ولی چه طوری میتونم کد های cms هارو توش بزارم ؟
در ضمن کدها چیست و از کجا پیدا کنم ؟
با تشکر

لقمان آوند

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

امیر

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

hasan_elc

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

سجاد دریس

سلام.
چنین مشکلی در قالب وجود نداره، دوباره کدهایی که نوشتین رو با کدهایی که قرار دادم مقایسه کنید.

hasan_elc

فوتر من مانند شما نیست

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.