محبوبترینها
با چاپ روی وسایل یک کسب و کار پرسود بسازید
قیمت دیگ بخار و تولیدکننده اصلی دیگ بخار
معروف‌ترین هدیه و سوغاتی یزد مشخص شد!
آشنایی با انواع دوربین مداربسته ضد آب
پرداخت اینترنتی قبوض ساختمان (پرداخت قبض گاز، برق و آب)
بهترین دوره آموزش سئو محتوا در سال 1403 با نام طوفان ۱۴۰۳ در فروردین ماه شروع می شود
یک صرافی ارز دیجیتال چه امکاناتی باید داشته باشد؟
تعمیرگاه مجاز تعمیر ماشین لباسشویی در شرق تهران
تعمیرگاه مجاز تعمیر ماشین لباسشویی در شرق تهران
جراحی و درمان ریشه دندان عفونی با خانم دکتر صفوراامامی
چه مواردی بر قیمت کابین دوش حمام تاثیر دارند؟
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1798382960
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]
[تعداد بازديد از اين مطلب: 637]
-
گوناگون
پربازدیدترینها