درباۀ center قرار دادن وب سایت ام! البته باید بپذیرم که خیلی کم دربارۀ css میدونم! به هر حال من تو css اونو center قرار دادم ولی مثه اینکه تو مرورگرهای مختلف درست نمایش داده نمیشه. اگه کسی میتونه کمکم کنه به من خیلی لطف کرده!
قرار دادن ”طرح“ در وسط مرورگر : centering a Design
روش auto margin
بعنوان مثال می خواهیم یک عنصر (تگ) div را که در برگیرنده ( warpper ) کل اجزا صفحه است در وسط پنجره مرورگر قرار دهیم.
HTML:
...
<body>
<div id="wrapper">
</div>
</body>
...
برای نیل به هدف کافیست مقدار عرض wrapper را براساس px تعریف کرده و margin افقی آنرا به auto ست می کنیم :
HTML:
#wrapper {
width: 720px;
margin: 0 auto;
}
در این مثال wrapper بصورت fix با اندازه 720 پیکسل در وسط صفحه قرار می کیرد و نکته قابل ذکر این است حتی اگر کاربر از resolution با دقت 800 * 600 هم استفاده کند محتویات wrapper در پنجره مرورگر fit می شود. با این تفاسیر حتی می توان مقدار عرض wrapper را براساس درصدی از body و یا نسبت به اندازه (سایز) متن پیش فرض صفحه با استفاده از واحد em نیز تعریف کرد.
روش فوق در اکثر مرورگرهای مدرن بدرستی کار می کند. با این وجود مشکل در IE 5.x و IE 6.0 پیش می آید. برای حل این مشکل می توان از خصوصیت text-align در عنصر body صفحه استفاده کرد. خوشبختانه IE تعبیری اشتباه از text-align: center دارد!!. و بجای آنکه آنرا فقط به متون اعمال نماید همه عناصر صفحه را وسط چین می کند.
برای اینکار کافیست در CSS منتسب به صفحه text-align قسمت body را برابر center قرار دهیم :
نکته قابل توجه در کد CSS فوق ست کردن text-align عنصر wrapper به left است. توسط این عمل نوشته های صفحه به حالت نرمال یعنی چپ چین باز می گردد. بدیهیست در قالبهای فارسی و در کل زبانهایی که از راست به چپ نوشته می شوند خاصیت فوق در عنصر wrapper باید به right ست شود.
بطور کلی استفاده از چنین روشهایی - در اینجا بکار بردن text-align - بعنوان تکنیکهای Hack صفحات وب بشمار می رود که هدف از آن یکسان سازی چیدمان و نمایش صفحات HTML در اکثر مرورگرهاست. اکنون عنصر wrapper در IE و همچنین دیگر مرورگر ها منطبق بر استانداردهای وب در وسط صفحه قرار می گیرد.
نکته آخری وجود دارد برای آنکه روش فوق در کل مرورگرها بصورت یکسان نتیجه دهد. در Netscape Navigator 6 هنگامیکه عرض پنجره مرورگر از اندازه عنصر دربرگیرنده - در اینجا wrapper - کمتر می شود سمت چپ wrapper به پایین آن انداخته می شود و قابل دسترسی نخواهد بود!. برای پرهیز از وقوع چنین حالتی بایستی به خاصیت عرض body صفحه HTML مقداری برابر یا کمی بیشتر از اندازه عرض wrapper نسبت داد :
روش موقعیت سنجی و حاشیه های منفی
روش auto margin برای قراردادن محتویات و چیدمان در وسط صفحه (پنجره مرورگر) متداولترین متد بشمار می رود ولی همانطور که توضیح داده شد برای فائق آمدن بر مشکلات نمایش آن در IE نیاز به یک روش Hack و همچنین استفاده از CSS برای استیل دهی دو عنصر ( تگ body و عنصر wrapper ) در صفحه خواهد بود. به همین علت عده ای استفاده از روش موقعیت سنجی ( Positioning ) و استفاده از حاشیه های منفی ( Negative Margin ) را ترجیح می دهند.
همانند روش قبل ابتدا مقدار عرض wrapper را مشخص کرده سپس مقدار خاصیت position را به relative و اندازه خاصیت left آنرا به 50% ست می کنیم. بدین ترتیب لبه طرف چپ wrapper در وسط صفحه قرار می گیرد:
با این وجود ما نمی خواهیم لبه سمت چپ wrapper در وسط پنجره مرورگر قرار گیرد بعبارتی هدف قرار دادن عنصر wrapper در وسط است. بهمین دلیل می توانیم مقداری منفی را برای حاشیه سمت چپ wrapper تعیین کنیم و آن برابر است با نصف عرض ( width ) عنصر wrapper که باعث می شود wrapper به اندازه نصف عرض خود به سمت چپ حرکت کرده و در کل wrapper در وسط صفحه قرار گیرد:
مشاهده می شود که با تعریف مقدار منفی یعنی 360- پیکسل wrapper در وسط قرار می گیرد.
انتخاب از میان روشهای فوق به سلیقه طراح بستگی دارد. با این وجود همیشه آگاهی از چندین روش برای حل یک مساله سودمند است.
منبع: shahotoofani.net
موفق باشید.
