کار با پهنا (Width) و Float
مدتی هست که کار با استایل یا css را شروع کرده ایم. در این درس کار با آن را ادامه خواهیم داد.
در این درس می خواهیم، نحوه ی تنظیم کردن پهنا را برای هر div یا همان باکس مخفی توضیح دهیم و اینکه چگونه آنها را مرتب کنیم. همچنین شما را از ایرادات هنگام ساخت پوسته، آگاه خواهیم کرد.
برای خواندن کامل متن به ادامه مطلب مراجعه کنید…
قبل از شروع رسمی درس اعمال زیر را انجام دهید:
Xampp Control و فولدر پوستها، مرورگر فایرفاکس، فایل index.php و فایل Style.css را باز کنید.
• مرحله ی اول:
اولین چیزی که بایستی انجام دهید، این است که پهنای اصلی پوسته تان را مشخص کنید. ما در این آموزش می خواهیم که از پهنای ۷۵۰ پیکسل برای پوسته مان استفاده کنیم. این را نیز به خاطر داشته باشید که هر ۱۰۰ پیکسلی یک اینج است. یکی از دلایلی که ما از پهنای ۹۰۰ پیکسل استفاده نمی کنیم این است که در صورت استفاده از اندازه ی ۹۰۰ پیکسل، بیننده هایی که دارای رزولوشن ۸۰۰ در ۶۰۰ هستند، هنگام تماشای سایت شما حدود ۱۰۰ پیسکل را به طور مستقیم نمی توانند مشاهده کنند.
◊ حال چگونه پهنای کلی پوسته را به ۷۵۰ پیکسل محدود کنیم؟
برای اینکار باید یه باکس مخفی ایجاد کنیم که تمامی اجزای صفحه، مانند header, container, sidebar و footer را درون خود قرار دهد. خوب پس برای اینکار مراحل زیر را انجام دهید:
– کد <div id=”wrapper”> را بعد از <body> در فایل index.php وارد کنید.
– همچنین کد </div> را قبل از </body> در فایل index.php اضافه کنید.
حتماً متوجه شدید که ما یک باکس مخفی ایجاد کردیم که تمامی اجزا را درون خودش جا داده است.
حال کدهای زیر را در فایل Style.css برای استایل دهی تایپ کنید:
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
در css، بویژه در style.css از علامت # برای آدرس دهی به یک div که با مشخصه ی id نام دهی شده است، استفاده می کنیم. خوب شاید این سوال برایتان پیش بیابید که چگونه به div های دارای مشخصه ی class آدرس بدهیم. جواب این است که اگر شما عبارتی مانند کد <div class=”wrapper”> داشته باشد باید از .wrapper (نقطه wrapper) بجای #wrapper (مربع wrapper) استفاده کنید. ممکن است که متوجه نشده باشید، اصلاً نگران نباشید در ادامه هنگامی که چند مثال را مشاهده کردید، کاملاً موضوع را درک خواهید کرد.
تغیرات داده شده در هر دو فایل را save کرده و مرورگرتان را refresh کنید تا تغییرات را مشاهده کنید.
◊ توضیحات بیشتر:
» margin: 0 auto 0 auto; – معنی این کد این است که به ترتیب، صفر پیکسل حاشیه از بالا ، فاصله ی خودکار از راست، صفر پیکسل حاشیه از پایین و حاشیه ی خودکار از چپ بوجود آید.
» width: 750px; – کاملاً واضح هست و نیازی به توضیح نیست.
» text-align: left; – این خط، تراز نوشته های داخل باکس مخفی را تعیین می کند و نوشته ها را به سمت چپ متمایل می نماید. می توانید بجای کد body{ text-align: left;} از کد text-align: center; استفاده کنید تا فرق این دو را متوجه شوید.
• مرحله ی دوم:
باکس Header را به سمت چپ float و به آن پهنای ۷۵۰ پیکسل دهید.
مانند زیر:
#header{
float: left;
width: 750px;
}
• مرحله ی سوم:
به باکس Container به سمت چپ float و پهنای ۵۰۰ پیکسل دهید.
#container{
float: left;
width: 500px;
}
• مرحله ی چهارم:
باکس Sidebar را به سمت چپ float و پهنای ۲۴۰ پیکسل و رنگ خاکستری دهید. (حدود ۱۰ پیکس بی استفاده می ماند، در ادامه دلیل اینکار را توضیح خواهیم داد.)
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}
توجه: ما در اینجا از علامت # برای آدرسی دهی به باکس مخفی ای که اسمش sidebar است، استفاده نکرده ایم. در حالی که از یک نقطه کمک گرفته ایم. دلیلش این است که در باکس مخفی نام sidebar را با مشخصه ی class تعریف کرده ایم نه id. همچنین بیاد بیاورید که #ffffff رنگ سفید است و رنگ background: #eeeeee یک رنگ خیلی خاکستری روشن می باشد. در اینجا ما تنها برای اینکه بین sidebar و container تفاوت ایجاد کنیم، به پس زمینه ی سایدبار رنگ خاکستری روشن داده ایم، چون قرار است در ادامه ۱۰ پیسکل باقی مانده را بعنوان فاصله ی بین این دو باکس استفاده کنید.
• مرحله پنجم:
برای باکس مخفی footer مشخصه های زیر را بدهید:
#footer{
clear: both;
float: left;
width: 750px;
}
◊ چه تفاوتی بین Header و Footer در استایل نویسی وجود دارد؟
جواب: تنها تفاوت داشتن عبارت clear: both; برای سلکتور footer{} می باشد. کد مورد بحث برای این اضافه می شود تا مطمئن شویم که فوتر قالب به هیچ جزء دیگری از قالب اضافه نمی شود. برای مثلا فوتر به باکس container و یا sidebar نمی چسبد.
تغیرات را ثبت کرده و مرورگرتان را refersh کنید.
• مرحله ی ششم:
حال در این مرحله ۱۰ پیکسل باقی مانده را به سایدبار بعنوان فاصله یا حاشیه نامرئی اضافه می کنیم. برای اینکار از کد margin کمک می گیریم. حالا کد استایل سایدبار ما شبیه زیر است:
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}
فایل را save کنید و مرورگر را refresh نمایید تا ۱۰ پیکسل اضافه شده به چپ سایدبار را مشاهده خواهید کرد.
» margin: 0 0 0 10px; – معنی آنها به ترتیب یعنی صفر از بالا، صفر از راست، صفر از پایین، ۱۰ پیکسل از چپ. همچنین وقتی که اندازه ی مورد نظر ما صفر باشد لازم نیست که عبارت px را جلوی آن بنویسیم.
• مرحله ی هفتم (مرحله ی اضافی):
در این مرحله می خواهیم که بجای ۱۰ پیسکل فاصله ای که به بخش چپ سایدبار داده ایم، ۲۰پیکسل فاصله قرار دهیم. با انجام اینکار خواهید دید که لایه های شما خواهد شکست و فشار آورده شده به سایدبار باعث می شود که باکس سایدبار در زیر باکس container قرار گیرد. دلیلش این است که ۲۰ پیکسل حاشیه باعث می شود که جمع پهنای Container و Sidebar جمعاً ۷۶۰ پیکسل شود در صورتی که ما باکس wrapper تنها ۷۵۰ پیکسل پهنا داده ایم . البته ممکن است این خطا در فایرفاکس نشان داده نشود و تنها در اینترنت اکسپلورر اینگونه نشان داده شود، چون باگ های فایرفاکس بسیار کمتر از اینترنت اکسپلورر هستند. در هر حال توجه کنید که حتماً اندازه هایی که به اجزای صفحه می دهید متناسب با سایر اجزا باشد.
برای برطرف کردن این باگ، عبارت display: inline; را به سلکتور sidebar اضافه کنید. حال کد ما به این صورت خواهد بود:
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}
درس امروز به پایان رسید.
و فایلهای نهایی index و style را می توانید دانلود کنید.
امیدوارم که از این درس هم لذت برده باشید، به زودی این دوره ی آموزش نیز به پایان خواهد رسید…
لذت بردم. با این که کمی css می‌دانم، فهمیدم که css چیزهای زیادی برای آموختن دارد.
راستی هنوز چیزی در مورد گنجاندن برگه‌ها در قالب نگفته اید.
مجتی جان، این مبحث رو می گذارم برای بعد از این سری آموزشی
چون در حالت عادی میشه که از طریق سایدبار اینکارو انجام داد
حاجی جان اینجوری پیش بریم که قسمت آخر این اموزشها قسمت نوه و نتیجه هامون میشه.
کی قراره این سری آموزشهای طراحی قالب تموم بشه؟
:)))))))
نه علی جان، غصه نخور به زودی به اتمام میرسه
سلام
دستتون واقعا درد نکنه
منه از مطالب مفیدتون بسیار لذت میبرم
امیدوارم همیشه پاینده و پیروز باشید
[…] چگونه برای وردپرس پوسته بسازیم؟(بخش ۱۶) […]
سلام.من یه قالب ساختم.تا حدودی خوب پیشرفتم ولی فوتر رو پایین سایدبار میاره.ساید بار ها رو هم پایین پست های نشون میده.یکی هم قبلش ساختم اون دیگه ساید بار ها رو یه کمی روی پست ها و کنار سایدبار دیگه میزاره.
من دوباره تلاش میکنم تا موفق بشم.اگه ۱۰۰۰ بار هم که شده دو باره شروع میکنم.لینک دانلود قالبی که ساختم و به هم ریخته:
****
کجاشو بهم ریختم؟
من قسمت display: inline; را متوجه نشدم. اگر ۲۰ پیکسل بگذاریم هم در فایرفاکس و هم در اکسپلولر به پایین می افتد و با display: inline; مشکل حل نمی شود.
مسئله همینه مهمترین ویژگی در مورد کار با سی اس اس اینه که شما باید اینقدر باهاش ور بری تا به اونچه که می خوای برسی.
در مورد مشکلتون هم حتماً یه بخشی هست که سایزش بیشتر از حد مجازه و شما احتمالاً از وجودش هنوز باخبر نیستید
بین کد سایدبار و فوتر عبارت زیر را قرار دهید