محبوبترینها
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
خرید بیمه، استعلام و مقایسه انواع بیمه درمان ✅?
پروازهای مشهد به دبی چه زمانی ارزان می‌شوند؟
تجربه غذاهای فرانسوی در قلب پاریس بهترین رستوران‌ها و کافه‌ها
دلایل زنگ زدن فلزات و روش های جلوگیری از آن
خرید بلیط چارتر هواپیمایی ماهان _ ماهان گشت
سیگنال در ترید چیست؟ بررسی انواع سیگنال در ترید
بهترین هدیه تولد برای متولدین زمستان: هدیه‌های کاربردی برای روزهای سرد
در خرید پارچه برزنتی به چه نکاتی باید توجه کنیم؟
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1828744212
Center کردن عناصر یک صفحه به طور اصولی ! -
واضح آرشیو وب فارسی:سایت ریسک: Center کردن عناصر یک صفحه به طور اصولی ! Ali_ix 03 شهريور 1385, 14:43درباۀ center قرار دادن وب سایت ام! البته باید بپذیرم که خیلی کم دربارۀ css میدونم! به هر حال من تو css اونو center قرار دادم ولی مثه اینکه تو مرورگرهای مختلف درست نمایش داده نمیشه. اگه کسی میتونه کمکم کنه به من خیلی لطف کرده! حالا که بحث کمی منحرف شده ... برای وسط چین شدن محتویات کافیه عبارت زیر رو در کلاس HomaTable قرار بدید: margin: 0 auto; موفق باشید echessdesign 03 شهريور 1385, 21:55قرار دادن ”طرح“ در وسط مرورگر : centering a Design روش auto margin بعنوان مثال می خواهیم یک عنصر (تگ) div را که در برگیرنده ( warpper ) کل اجزا صفحه است در وسط پنجره مرورگر قرار دهیم. ... <body> <div id="wrapper"> </div> </body> ... برای نیل به هدف کافیست مقدار عرض wrapper را براساس px تعریف کرده و margin افقی آنرا به auto ست می کنیم : #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 قرار دهیم : body { text-align: center; } #wrapper { width: 720px; margin: 0 auto; text-align: left; } نکته قابل توجه در کد CSS فوق ست کردن text-align عنصر wrapper به left است. توسط این عمل نوشته های صفحه به حالت نرمال یعنی چپ چین باز می گردد. بدیهیست در قالبهای فارسی و در کل زبانهایی که از راست به چپ نوشته می شوند خاصیت فوق در عنصر wrapper باید به right ست شود. بطور کلی استفاده از چنین روشهایی - در اینجا بکار بردن text-align - بعنوان تکنیکهای Hack صفحات وب بشمار می رود که هدف از آن یکسان سازی چیدمان و نمایش صفحات HTML در اکثر مرورگرهاست. اکنون عنصر wrapper در IE و همچنین دیگر مرورگر ها منطبق بر استانداردهای وب در وسط صفحه قرار می گیرد. نکته آخری وجود دارد برای آنکه روش فوق در کل مرورگرها بصورت یکسان نتیجه دهد. در Netscape Navigator 6 هنگامیکه عرض پنجره مرورگر از اندازه عنصر دربرگیرنده - در اینجا wrapper - کمتر می شود سمت چپ wrapper به پایین آن انداخته می شود و قابل دسترسی نخواهد بود!. برای پرهیز از وقوع چنین حالتی بایستی به خاصیت عرض body صفحه HTML مقداری برابر یا کمی بیشتر از اندازه عرض wrapper نسبت داد : body { text-align: center; min-width: 760px; } #wrapper { width: 720px; margin: 0 auto; text-align: left; } این مطلب رو در ادامه توضیح علی آقا گفتم، Alejalal.com جان اگر مشکل دیگه ای داری بفرمایید. منبع: shahotoofani.net echessdesign 08 شهريور 1385, 07:38روش موقعیت سنجی و حاشیه های منفی روش auto margin برای قراردادن محتویات و چیدمان در وسط صفحه (پنجره مرورگر) متداولترین متد بشمار می رود ولی همانطور که توضیح داده شد برای فائق آمدن بر مشکلات نمایش آن در IE نیاز به یک روش Hack و همچنین استفاده از CSS برای استیل دهی دو عنصر ( تگ body و عنصر wrapper ) در صفحه خواهد بود. به همین علت عده ای استفاده از روش موقعیت سنجی ( Positioning ) و استفاده از حاشیه های منفی ( Negative Margin ) را ترجیح می دهند. همانند روش قبل ابتدا مقدار عرض wrapper را مشخص کرده سپس مقدار خاصیت position را به relative و اندازه خاصیت left آنرا به 50% ست می کنیم. بدین ترتیب لبه طرف چپ wrapper در وسط صفحه قرار می گیرد: #wrapper { width: 720px; position: relative; left: 50%; } با این وجود ما نمی خواهیم لبه سمت چپ wrapper در وسط پنجره مرورگر قرار گیرد بعبارتی هدف قرار دادن عنصر wrapper در وسط است. بهمین دلیل می توانیم مقداری منفی را برای حاشیه سمت چپ wrapper تعیین کنیم و آن برابر است با نصف عرض ( width ) عنصر wrapper که باعث می شود wrapper به اندازه نصف عرض خود به سمت چپ حرکت کرده و در کل wrapper در وسط صفحه قرار گیرد: #wrapper { width: 720px; position: relative; left: 50%; margin-left: -360px; } مشاهده می شود که با تعریف مقدار منفی یعنی 360- پیکسل wrapper در وسط قرار می گیرد. انتخاب از میان روشهای فوق به سلیقه طراح بستگی دارد. با این وجود همیشه آگاهی از چندین روش برای حل یک مساله سودمند است. منبع: shahotoofani.net موفق باشید.
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 642]
-
گوناگون
پربازدیدترینها