IACbook

درود بازم قصد دارم مطلبی بسیار مناسب را در مورد کدنویسی سی اس اس بنویسم که امیدوارم بدرد دوستان بخوره شاید قالبی طراحی کنیم و برای مدتی که سایتمان را در سیستم خودمون می بینیم خیالمون راحته که همه چیز تنظیمه و هیچ مشکلی وجود نداره! اما وقتی میریم از کامپیوتر دیگه ای سایتمون رو باز می کنیم میبینیم که اصلا" سایتتون کلی مشکل داشته که خودتون تابحال ندیده بودید! مقداری از مشکلات مربوطه به نوع مرورگرها هستند که فرض می کنیم روی همه مرورگرها هم تست کرده باشید و مشکلی نداشته باشه! اما بهتون قول میدم بازم احتمال داره سایتتون مشکلاتی جدی داشته باشه! دلیل: اگر شما سایتتون رو در مانیتوری که دارای رزولوشن 1024×768 باشه ببینید و بسازید و بعدا" برید توی مانیتورهای wide ( که جدیدا" دارن خیلی زیاد میشن! ) نگاه کنید ممکنه ببینید که سایتتون رفته یه گوشه صفحه!!!!!!!!! دلیلش اینه که شما در هنگام کد نویسی سی اس اس در مارجین ها و مواردی از واحد مناسب استفاده نکرده اید! واحدهایی مثل px , em در خیلی از موارد از قبیل استفاده در مارجین حاشیه ها اصلا" واحدهای خوبی نیستند! شما برای margin در حاشیه ها بهتره از % استفاده کنید. یعنی به اندازه درصدی از صفحه (حالا صفحه میخواد هر چی باشه!) مارجین بدید و سایت رو در وسط صفحه تنظیم کنید! به همین راحتی ......... Margin-left: 370px; باید بصورت زیر باشه: Margin-left: 30%; به تصاویر زیر توجه نمایید: توجه داشته باشید که برای وسط آوردن از روش ذکر شده در بالا استفاده نمی شود و این فقط مثالی برای درک مفهوم واحد درصد بود. همچنین واحدی مثل em برای فونت بیشتر بکار میره. موفق باشید

درود قبل از این مقاله ای را ارائه دادیم برای حل مشکل بهم ریختن قالب ها در مرورگرهای مختلف. در اینجا نیز روش reset مرورگرها را ارئه میدم که امیدوارم بدردتون بخوره ببینید هر مرورگری یک سری استایل های درونی داره که از اونا استفاده می کنه. مثلا مرورگر IE، ممکنه تگ P رو با مارجین 4 پیکسل نشون بده اما مرورگر Opera همین تگ رو با مارجین 5 پیکسل نمایش بده! بنابر این همین اختلافات باعث میشن که قالب طراحی شده شما در مرورگرهای مختلف متفاوت نمایش داده شود. شما می توانید مرورگرها را با چندین خط دستور ریست کنید!!! دستورات ریست ، مرورگرها را وادار می کند که با تگ های مختلف رفتاری مشابه را از خودشون نشان دهند و مقادیر یکسانی رو اجرا کنند! شاید بگید چطوری! یکمی صبر کنید الان میگم .... برای استفاده از این دستورات دو راه پیش رو دارید. یکی اینکه خودتون اگر با سی اس اس آشنایی خوبی دارید میتونید یک سری دستور ریست برای خودتون بنویسید و اگر هم آشنایی زیادی ندارید یا حوصله ساختن چنین دستوری را ندارید بهتره که از دستورات ریست تولید شده توسط برنامه نویسان حرفه ای استفاده کنید. من دستورات ریست اریک مایر رو که خیلیا قبولش دارند در اینجا براتون قرار میدم: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ ins {text-decoration: none;} del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse; border-spacing: 0;} برای استفاده از دستورات ریست 3 راه وجود داره: 1- قراردادن اینا در ابتدای فایل سی اس اس قالب 2- ایجاد فایلی بنام reset.css 3- استفاده اینترنال بصورت قراردادن در بین تگ های head قالب حتما" قبل از شروع به نوشتن css قالب خود این دستورات را در به صفحه خود اضافه نمایید. زیرا در صورتیکه بعد از نوشتن و یا در هنگام نوشتن css این دستورات را اضافه نمایید باعث میشه که چیدمان صفحه شما بهم بریزه. یعنی اول اینا رو ابتدا قرار بدید و پس از مشاهده وضعیت قالب را ششروع به تنظیم نمایید... این دستورات به تمامی متدها و تگ ها و المنت های موجود در صفحه، مقدار 0 و یا none می دهند و همین امر موجب میشود که مرورگر به ناچار، استایل های پیش فرض خود را مطابق با دستورات Reset کند و وقتی تمامی مرورگرها با این دستورات مواجه میشن، تمامی استایل های پیش فرض خود را ریست میکنند و نسبت به نمایش محتوای صفحه، رفتاری مشابه از خود نشان میدهند! بعنوان مثال: ol, ul { list-style: none; } این دستور باعث میشه تمامی استایل هایی که به تگ های ol و ul نسبت داده میشن برابر با مقدار none بشن و دیگه ناسازگای هایی که ممکنه به وجود بیاد، برطرف میشن… خصوصا اگر صفحه فارسی هست، حتما باید از این دستور استفاده بشه. موفق باشید

درود برای جلوگیری از حجیم شدن دستورات سی اس اس می توانیم از خلاصه نوسی استفاده کنیم. بصورت یک مثال موضوع را پیگیری می کنیم: دستورات سی اس اس زیر را در نظر بگیرید: body { background-color: #ccc; background-image: url(/images/bg.jpg); background-position: right; background-attachment: fixed; background-repeat: no-repeat; } حال خلاصه نویسی می کنیم: body { background: #ccc url(/images/bg.jpg) right fixed no-repeat; } با این روش می توانیم تمام خصوصیات را همزمان اعمال نماییم و انجام این کار می تواند باعث کوتاه شدن فایل سی اس اس شما شود. موفق باشید

درود ( ارائه چند نکته با جازه دوست خوبم امیر رضا تهرانی عزیز ) یکی از مشکلاتی که همیشه طراحان سایت با آن مواجه هستند مشکل طرح های ایجاد شده با مرورگر IE می باشد. راههای زیادی برای حل این مشکل وجود دارد که چند مورد را به اختصار در اینجا بیان می کنم و دوستان نیز اگر نظر و یا تکنیکی دارند ممنون میشم در اینجا ارائه بدهند. روش های حل مشکل طراحی قالب ها با اینترنت اکسپلورر را به اصطلاح ه-ک کردن مرورگر IE می گویند. حتما" کسانی که طراحی قالب انجام میدهند میدونن که margin و padding در مرورگر اینترنت اکسپلورر و سایر مرورگرها به نحو دیگری عمل می کند که این باعث بهم ریختن قالب هایی می شود که بر اساس مرورگر فایرفاکس تنظیم شده اند... منظور از ه-ک کردن مرورگر اینست که در سی اس اس قالب خود دستورات را به نحوی بکار ببریم که بتوانیم در مرورگر اینترنت اکسپلورر نیز همان نتیجه را بگیریم. مشکل اینجاست وقتی که از دستورات margin و padding در سی اس اس قالب خود استفاده می کنیم این مقادیر بکار رفته در مرورگر IE تقریبا" به اندازه نصف و یا کمتر عمل می کنند! بنابراین یک سی اس اس قائدتا" نمی تواند همزمان با هر دو مرورگر همخوانی داشته باشد! در نتیجه استفاده از تکنیک های زیر رایج است: یکبار قالب را برای فایرفاکس طراحی می کنیم و اکنون برای اینکه قالب طراحی شده با مرورگر IE مشکلی نداشته باشد در همان سی اس اس می توانیم مقادیر padding , margin را برای اینترنت اکسپلورر هم قرار دهیم به نحوی که فایرفاکس نتواند این مقادیر را ببیند اما IE ببیند. برای این کار بعنوان مثال دستورات زیر بکار می روند : مثال : padding-left:15px padding-left:30px* بکار بردن علائمی مانند " * " و " # " باعث می شود تا این مقادیر را ie ببیند اما فایرفاکس نبیند. اما روش بالا ممکنه مشکل رو در IE6 حل کنه ، اما در IE7 ممکن است دستور ارائه شده باعث خراب شدن قالب شما شود! بنابراین اگر با چنین مشکلی مواجه شدید بهتر است از دستور important استفاده کنید. این دستور به مرورگر ما ارجحیت می دهد و این تگ را مرورگرهای جدید بخوبی میشناسند و مرورگرهای قدیمی آنرا نمی بینند! بنابراین دستوری را که می خواهیم ie6 ببیند را بصورت معمولی و دستوری را که می خواهیم ie7 یا فایرفاکس ببیند همراه با important می نویسیم. این کار را شاید در سی اس اس های قالب های شرکت های بزرگ دیده باشید و دلیلش اینه... مثال : padding-left:20px padding-left:10px !important اما گاهی وقت ها مشکلات ما با این تگ ها حل نمی شوند و لازم است راه حل دیگری را بکار برد. بنابراین توصیه می شود از سی اس اس جداگانه استفاده شود و درابتدای قالب خود دستوری شرطی را بنویسید تا اگر کاربر با مرورگر ie سایت شما را باز کرد سی اس اس مخصوص ie سایت نمایش داده شود و در غیر اینصورت سی اس اس مربوط به فایرفاکس اجرا شود ... مثال : ”> همچنین می توانید موارد مشترک را در یک سی اس اس و موارد غیر مشترک را در سی اس اس های جداگانه بکار ببرید ....... دوستان اگر راهکارهای دیگری برای این مورد دارند در این تاپیک ارائه دهند. ( مخصوصا" استاد گرامی و دوست خوبم امیررضا تهرانی عزیز ) (اگر تاپیک رو در جای درستی نزدم انتقال بدید - می بخشید . )

درود امیرجان می بخشید بخاطر گرفتاریهایی که داشتم تا الان نشد این تاپیک رو ببینم ، وگرنه خیلی زودتر از این باید پاسخ می دادم ... در مورد انجمن وارز همانطوری که دوست خوبم آقای تهرانی فرمودند بزودی شاهد راه اندازی قدرتمندترین سایت وارز جوملا در ایران خواهیم بود که امیدوارم این سایت مثل سایت های وارزی که قبلا" راه افتاده بودند پایانی نداشته باشد . ازآنجایی که خودم هم عاشق جوملا هستم و بیش از یکسالی هست که دارم با جوملا بطور رسمی و با نام یک شرکت طراحی سایت می کنم ، واقعا" خوشحالم که بالاخره شرایط فراهم شد تا بتوانیم مجددا" در کنار هم شاهد راه اندازی بزرگترین سایت وارز جوملا در ایران باشیم ، اما اینبار قدرتمندتر از قبل و بدون پایان! قبل از این نیز با آقای قلیزاده تماس های زیادی داشتم تا انجمن تی سی جوملا رو پشتیبانی کنیم ، اما گویا بدلیل مشکلاتشان کلا" وقت حضور در اینترنت را ندارند ، اما امیدوارم با گذر از مشکلات ، ایشان نیز بزودی به ما بپیوندند. در مورد راه اندازی سایت نیز علاوه بر اسپانسری سایت ، تا جاییکه ممکن باشد از نظر ارائه مطالب ، فایل ها و کمک به حل مشکلات دوستان و غیره زیر سایه آقای تهرانی در خدمتتان خواهم بود. در مورد مشکلاتی که ممکن است برای سایت به دلیل وارز بودن آن و سایر موارد پیش بیاد هم تمام تلاش خود را می کنیم تا سایت همواره پابرجا باقی بماند و قول این را به همه میدم که در کوتاهترین زمان ممکن شاهد قدرتمندترین سایت جوملا در ایران خواهید بود ... موفق باشید کام دین میرزایی