تور لحظه آخری
امروز : پنجشنبه ، 15 آذر 1403    احادیث و روایات:  امام صادق (ع):به راستى حكمتى كه در قلب منافق جا مى‏گيرد، در سينه‏اش بى‏قرارى مى‏كند تا از آن بي...
سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون شرکت ها

تبلیغات

تبلیغات متنی

صرافی ارکی چنج

صرافی rkchange

سایبان ماشین

دزدگیر منزل

اجاره سند در شیراز

قیمت فنس

armanekasbokar

armanetejarat

صندوق تضمین

Future Innovate Tech

پی جو مشاغل برتر شیراز

آراد برندینگ

خرید یخچال خارجی

موسسه خیریه

واردات از چین

حمية السكري النوع الثاني

ناب مووی

دانلود فیلم

بانک کتاب

دریافت دیه موتورسیکلت از بیمه

طراحی سایت تهران سایت

irspeedy

درج اگهی ویژه

تعمیرات مک بوک

دانلود فیلم هندی

قیمت فرش

درب فریم لس

زانوبند زاپیامکس

روغن بهران بردبار ۳۲۰

قیمت سرور اچ پی

خرید بلیط هواپیما

بلیط اتوبوس پایانه

تعمیرات پکیج کرج

لیست قیمت گوشی شیائومی

خرید فالوور

پوستر آنلاین

بهترین وکیل کرج

بهترین وکیل تهران

خرید اکانت تریدینگ ویو

خرید از چین

خرید از چین

تجهیزات کافی شاپ

ساختمان پزشکان

دوربین سیمکارتی چرخشی

همکاری آی نو و گزینه دو

کاشت ابرو طبیعی و‌ سریع

الک آزمایشگاهی

الک آزمایشگاهی

خرید سرور مجازی

قیمت بالابر هیدرولیکی

قیمت بالابر هیدرولیکی

قیمت بالابر هیدرولیکی

لوله و اتصالات آذین

قرص گلوریا

نمایندگی دوو در کرج

خرید نهال سیب

وکیل ایرانی در استانبول

وکیل ایرانی در استانبول

وکیل ایرانی در استانبول

رفع تاری و تشخیص پلاک

پرگابالین

دوره آموزش باریستا

مهاجرت به آلمان

بهترین قالیشویی تهران

بورس کارتریج پرینتر در تهران

تشریفات روناک

نوار اخطار زرد رنگ

ثبت شرکت فوری

تابلو برق

خودارزیابی چیست

 






آمار وبسایت

 تعداد کل بازدیدها : 1838165389




هواشناسی

نرخ طلا سکه و  ارز

قیمت خودرو

فال حافظ

تعبیر خواب

فال انبیاء

متن قرآن



اضافه به علاقمنديها ارسال اين مطلب به دوستان آرشيو تمام مطالب
archive  refresh

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]
[تعداد بازديد از اين مطلب: 645]

bt

اضافه شدن مطلب/حذف مطلب







-


گوناگون

پربازدیدترینها
طراحی وب>


صفحه اول | تمام مطالب | RSS | ارتباط با ما
1390© تمامی حقوق این سایت متعلق به سایت واضح می باشد.
این سایت در ستاد ساماندهی وزارت فرهنگ و ارشاد اسلامی ثبت شده است و پیرو قوانین جمهوری اسلامی ایران می باشد. لطفا در صورت برخورد با مطالب و صفحات خلاف قوانین در سایت آن را به ما اطلاع دهید
پایگاه خبری واضح کاری از شرکت طراحی سایت اینتن