طریقه اضافه کردن یک div با پهنای کل صفحه نمایشگر

دایو یا div یکی از تقسیمات وب پیج است و سرنام division است. از این عنصر یا تگ برای تقسیم بندی صفحه وب استفاده می شود. اگر می خواهید یک تصویر یا میله یا هر ناحیه مداومی را ایجاد کنید که کل عرض صفحه نمایش را بپوشاند، می توانید در طی چند مرحله این کار را انجام دهید. یک موضع یا ناحیه که کل عرض صفحه نمایش را می پوشاند معمولا برای اسلاید شو، منو یا بنر و آگاهی استفاده می شود. در این مقاله طریقه ساخت یک div تمام عرض در بالای صفحه وب آموزش داده می شود.

ایجاد یک div تمام عرض در وبسایت جوملا

برای انجام اینکار به ویرایش فایل css، فایل index.php و احتمالا فایل templateDetails.xml در فلدر ریشه قالب پروتواستار جوملا (protostar template) نیاز دارید. در این مقاله به طور مفصل و گام به گام طریقه ایجاد یک عنصر <div> تمام عرض برای این هدف شرح داده می شود.

برای انجام اینکار به ویرایش فایل css، فایل index.php و احتمالا فایل templateDetails.xml در فلدر ریشه قالب پروتواستار جوملا (protostar template) نیاز دارید. در این مقاله به طور مفصل و گام به گام طریقه ایجاد یک عنصر <div> تمام عرض برای این هدف شرح داده می شود.

این <div> در خارج از محدوده ای که ستون های محتوا و ستون کناری قرار دارند، ایجاد می شود. می توانید به این <div> پوزیشن های جدیدی اضافه کنید یا عناصر موجود را به این <div> منتقل کنید تا مثلا منو، لوگو، آگهی ها، اسلاید شو و هر عنصر دیگری را نمایش دهد.

گام 1: ایجاد <div> در خارج از محدوده کلاس <div class="container">

فایل index.php را که در دایرکتوری ریشه قالب پروتو استار (templates -> protostar) واقع شده است را با یک ویرایشگر متن باز کنید. قبل از اینکار از فایل index.php یک نسخه بک آپ تهیه کرده و با نام متفاوتی ذخیره کنید.

حال در فایل index.php اورجینال قالب یک قطعه <div></div> در زیر تگ <div class="body"> و بالای تگ <div class="container"> ایجاد کنید.

<div class="body">
    <div id="top-bar">
        <div id="top-bar-contents"><p>This is the stuff I want to say in the top bar</p></div>
    </div>
<div class="container">
...

فایل index.php را ذخیره کرده و به محل خود در ساختار دایرکتوری قالب جوملا برگردانید. همچنین می توانید فایل ها را مستقیما در مدیر قالب (Template Manager) جوملا ویرایش کنید و نیازی به دانلود و آپلود نداشته باشید.

گام 2: سبک بندی ناحیه جدید ایجاد شده

فایل استیل شیت سفارشی (custom.css) خود را باز کرده و استیل مورد نیاز این ناحیه را اضافه کنید. اگر هنوز فایل استیل شیت سفارشی خود را ایجاد نکرده اید، یا طریقه ایجاد آن را بخوبی نمی شناسید، مقاله طریقه اضافه کردن استیل شیت سفارشی به قالب پروتواستار جوملا می تواند کمک کننده باشد.

#top-bar {
    width: 100%;
    height: 50px;
    background: #999999;
}

حالا می بینید که یک نوار کامل ایجاد شده و در کل عرض صفحه نمایش کشیده شده است. اگر ناحیه ایجاد شده به طور کامل به دو حاشیه چپ و راست صفحه نمایش نمی رسد، بخاطر این است که در تگ <body> مقداری فضا (padding) اعمال شده است. برای از بین بردن این فاصله خالی بین ناحیه ایجاد شده و دو طرف صفحه نمایش، در استیل شیت سفارشی خود padding بدنه سایت را رونویسی کنید. چیزی شبیه به قطعه زیر:

body.site {
    padding: 0px;
}

اضافه کردن پوزیشن دلخواه به <div> تمام عرض صفحه

اگر می خواهید محتوایی به این میله ایجاد شده اضافه کنید و ماژول هایی مثل منو، آگهی و لینک های دیگر به آن تخصیص دهید، بایستی پوزیشن دلخواهی در داخل top-bar پروتواستار ایجاد کنید. بایستی یک پوزیشن دلخواه در جوملا ایجاد کنید به طوری که بتوانید ماژول ها را به این پوزیشن تخصیص دهید. برای اینکار بایستی چند گام زیر را انجام دهید.

گام 3: ایجاد پوزیشن دلخواه در قالب پروتواستار جوملا

فایل templateDetails.xml را از دایرکتوری تمپلیت جوملا با یک ویرایشگر متن باز کنید. یک نسخه پشتیبان تهیه کنید. در بخش تگ های <position> ... </position> یک خط جدید ایجاد کرده و قطعه کد زیر را کپی کنید:

<positions>
    <position>top-bar-content</position>
    ...

فایل را ذخیره کنید و در محل خود بارگذاری کنید.

جایی برای این پوزیشن جدید در فایل index.php ایجاد کنید. برای اینکار فایل index.php را در یک ویرایشگر متن باز کرده و قطعه کد زیر را در بین قطعه <div id="top-bar"></div> قرار دهید:

<div id="top-bar">
    <div id="top-bar-content">
        <jdoc:include type="modules" name="top-bar-content" style="xhtml" />
    </div>
</div>

فایل را ذخیره کرده و به جای خود در دایرکتوری تمپلیت جوملا برگردانید.

حال در ادمین جوملا و در بخش مدیریت ماژول ها می توانید ماژول دلخواه خود را به این پوزیشن جدید تخصیص دهید.

می توانید محتوای پوزیشن جدید را استیل بندی کرده تا در مرکز ناحیه <div> والد خود ظاهر شود:

#top-bar-content {
    width: 960px;
    margin: 0 auto;
}