مشکل سایت در تغییر اندازه

[Mohsen.]

سلام دوستان
من هر وقت طراحی انجام میدم یک مشکلی دارم. اونم این که وقتی کاربر اندازه مرورگرو کوچیک یا بزرگ میکنه کل طراحی بهم میریزه. مثلا ضمیمه رو نگاه کنید.

[Saber Mogaddas]

سلام
یکی از مشکلات اصلی شما استفاده از تگ body به عنوان wraper کل محتوای سایت هست..استفاده از margin-left - right برای وسط چین کردن صفحه کار اشتباهی هست برای اینکه این مشکلات رو در اول کار ریشه کن و حل کنید :
1- ابتدا تمامی محتوای سایت رو که در داخل تگ body هست در داخل یه دیو کلی قرار بدید و استایل دیو کلی رو به وسیله دستور css زیر در وسط صفحه قرار بدید.البته یک عرض ثابت هم به این دیو باید داده شه که اندازه استاندارد برای اینکه در تمامی صفحات نمایش درست نمایش داده شه 970 تا 1007 پیکسل هست.

margin:0 auto;
width:1000px;


2- قالبی که شما روش کار می کنید از استانداردهای html5 تبعیت می کنه که پیشنهاد می کنم ابتدا به تگ دیو مسلط شوید و بعد با تگ های html5 مثل header,nav .. کار کنید.
1-2 - تگ های دیو رو طبقه بندی کنید برای مثال یک دیو در بر گیرند header سایت باشه یک دیو در بر گیرنده منو سایت و یک دیو در بر گیرنده محتوای اصلی و یک دیو برای footer سایت البته این یک مثال هست منظور اینه که هر قسمت شامل یک دیو wraper باشه و بعد با تنظیم عرض و ارتفاع و دستور float جایگذاری میشه داخل wraper اصلی سایت
3- در ابتدای پروژه از یک css reset در فایل css استفاده کنید تا مقدارهای پیشفرضی که بعضی از تگ ها به خود میگیرند رو صفر کنید مثل css reset زیر :

* {
margin: 0;
padding: 0;
}

4- منو یی طراحی شده در این قالب از تکنولوژی mootools استفاده شده که این منو رو می تونید توسط css نیز طراحی و پیاده سازی کنید برای مسلط بودن به روش ساخت منو ابتدا سعی کنید منو هاتون رو با css طراحی کنید..برای طراحی منو با css از این تاپیک (http://barnamenevis.org/showthread.php?170061-%D8%B3%D8%A7%D8%AE%D8%AA-%D9%85%D9%86%D9%88-%D9%87%D8%A7%DB%8C-drop-down-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-CSS&p=764704&viewfull=1#post764704)استفاده کنید .
موفق باشید.

[Mohsen.]

از راهنماییهاتون ممنون. من تازه شروع کردم. این راهنمایی ها برام خیلی ارزشمندند.

[sahel65]

آقا صابر طبق من هم با این گفته شما موافقم؛

یکی از مشکلات اصلی شما استفاده از تگ body به عنوان wraper کل محتوای سایت هست
و اکثرا هم همین کار رو می کنن؛
میشه تو چند خط دلایل این کار رو بگید؟
اینجور در واقع از یک نوع از هم گسیختگی جلوگیری میشه؟

[Saber Mogaddas]

سلام


و اکثرا هم همین کار رو می کنن؛
میشه تو چند خط دلایل این کار رو بگید؟
اینجور در واقع از یک نوع از هم گسیختگی جلوگیری میشه؟

دستبدی بندی تگ ها توسط دیو باعث خواهد شد که ما هم کنترل بیشتری روی تگ ها داشته و صفحه ما آرایش پیدا کنه برای مثال ما تو قسمت header سایت دو نوشته برای عنوان و دو عکس در کنار آنها نیاز داریم آیا کنترل این نوشته ها و عکس ها داخل یک دیو wraper که به اندازه تعیین شده برای header هست راحتر و قابل کنترل تر خواهد بود یا در داخل یک دیو و یا body که کل صفحه ما رو گرفته ؟ در واقع ما با این کار چهارچوب قالب خودمون رو مشخص می کنیم تا در آینده اگر احتیاج به تغییرات داشتیم بدونیم که کدام قسمت باید تغییر کنه و از مشکلاتی مثل بهم ریختن صفحه در مرورگر ها و نمایشگر های مختلف جلوگیری می کنیم.البته دیو های تو در تو در xhtml رایج هست با اومدن html5 استفاده از دیو ها به صورت بهینه کاهش یافته و برای header تگی بنام <header> هست برای منو <nav> و یا<aside> برای مشخص کردن نوار های کناری و ... که تو قسمت مقالات کاربردی در قسمت اعلانات این نوع مقالات هست که می تونید از اون بهرمند شوید ..
موفق باشید

[cyrusthegreat]

البته ذکر دوتا نکته ضروری هست.

اول اینکه فعلا استفاده از تگ های HTML5 اصلا لزومی نداره. چون هنوز خود HTML5 منتشر نشده و در حال آماده سازی هست و سال 2015 رو برای انتشار کاملش مشخص کردن.

دومین نکته هم این هست که بهتره سایتتون رو به سه بخش اصللی بالا، وسط و پایین تقسیم کنید (در بیشتر سایت ها) و بعد برای کنترل بیشتر هر بخش رو اینگونه مشخص کنید (بطور مثال برای هدر):


<div id="header-wrapper">
<div id="header">
<div class....
</div>
</div>


دوتا نکته ای که وجود داره، یکی دادن id هست که برای کد نویسی به زبان JS بسیار کمک کننده هست، دومین هم این هست که ما از wrapper فقط برای جایگیری استفاده می کنیم. استایل و رنگبندی باید به والد header-wrapper داده بشه. اینجوری کد شما بسیار خوانا خواهد شد.

بهتره برای خودتون یک نظام قانونمند توی طراحی مشخص کنید. از اسم کلاس ها و ای دی ها بگیرید تا حتی استفاده از روش های خاص برای رسیدن به هدف. اینگونه در آینده برای ویرایش و به روز کردن قالب به مشکل بر نمی خورید.