شما که هدفت استفاده از سی اس اس بود چرا اینو اینجوری کردی
در ضمن border="0" هم ایراد داره نباید ازش استفاده بشه
کد:
<li class="box_header">
<div class="box_header_text">
درباره من</div>
</li>
اینجا دوتا ایراد داره
اولیش اینه که خصوصیات li& div رو با هم ادغام نکردی و یه div اضافی نوشتی
دومیش اینه که از li استفاده کردی. شما میتونی به جای استفاده از ul & li از h1& p استفاده کنی
همونطور که قبلا گفتم خصوصیاتشون رو با هم ادغام نکردی و div اضافی نوشتی
کد:
<li class="box_footer"> </li>
این اضافیه
شما می تونی خصوصیاتی که به این دادی رو بین المان های دیگه پخش کنی
شما تو کدهاتون خیلی المان اضافی تعریف کردی
میشه خلاصه تر نوشت مثلا به جای این کد
کد:
<div class="post_title_right">
<a title="لینک به این مطلب" href="post-10.html"></a></div>
<div class="post_title">
<div class="post_title_subject">
<a href="post-10.html">استخراج کارنامه های کنکور سراسری
و آزاد به صورت پیشرفته</a></div>
<div class="post_title_date">
پنجشنبه 15 شهریور 1386 - 10:30:31 قبل از ظهر </div>
</div>
یه چیزی اضافه کنم
وقتی تعداد المان ها در مرورگر بالا میره مرورگر ها برای نشون دادن اونها فضای بیشتری از حافظه ی رم رو اشغال میکنند به خاطر همین هرچی از المان کمتری استفاده بشه بهتره
همچنین در نمایش اونها و چیدن المان ها به مشکل بر می خورند.
راستش نميخوام از کار خودم دفاعي بکنم چون اکثر مواردي که اشاره کرديد کاملاً صحيحه و کم و بيش دوستان هم بهش اشاره کردند و ميپذيرم.
اما اين قضيه المان خالي منو ياد يه موضوعي انداخت که شايد جنبه آموزشي هم داشته باشه.
در اينجا در پاسخ به سوال "يکي از مفيدترين تکنيک‌هاي CSS که اغلب از آن استفاده مي‌کني؟" تعدادي از طراحان ادعا کردند از "قرارداد عکس توسط CSS" بيشتر خوششون مياد.
به عنوان مثل براي لوگوي بالاي سايت، اين کد رو ترجيح دادند:
HTML:
XHTML:
<h1 id="logo">Company Name</h1>
CSS:
h1 {
height:100px /* height of logo */
width:100px /* width of logo */
background:url(logo.gif) no-repeat;
text-indent:-9000px;
}
اين روش مزيت هاي زيادي مثل معرفي بهتر به موتورهاي جستجو، نمايش بهتر در موبايلهاو... اگر هم بخوايم لوگو رو عوض کنيم، عوض کردن اسم فايل در css خيلي آسون تر از html ه و چيزاي ديگه که بهتره اصل مقاله رو بخونيد.
اون المان خالي هم که من استفاده کردم حاوي يه عکسه، که ترجيح دادم بجاي تگ img از div استفاده کنم، چون سايتم رو بر اساس امکان تغيير قالب نوشته بودم و به اين ترتيب عوض کردن عکسها در css خيلي آسون تر بود. البته يه جاهايي هم از دستم در رفته..... که خب ! اينم بگم فکر ميکنم موقعي که اين سايت رو درست کردم ايم مقاله رو نخوندم بودم... بيشتر از اينکه به فکر توجيح کارم باشم به فکر صحبت در مورد تکنيکي بودم که عرض شد.
شما جاهايي که نبايد از ul & li استفاده کني ، کردي حالا اينجا که بايد استفاده مي کردي ، نکردي
موافقم! اشتباه کردم. راستش من موقعي که اين سايت رو درست کردم بيشتر هدفم valid بودن کدها بود و راه رسيدن به اين هدف خيلي برام مهم نبود، به همين خاطر گاهي با تگ هاي اضافي سعي ميکردم به هدفم برسم. که البته فکر نميکنم خيلي اشتباه باشه و البته صحيح هم نيست.
<li class="box_footer"> </li>
اين اضافيه
شما مي توني خصوصياتي که به اين دادي رو بين المان هاي ديگه پخش کني
با اين مورد خيلي موافق نيستم.
مخصوصاً در مورد جداولي که با li تشکيل ميشن و بالا و پايين اونها از عکسهاي متفاوت استفاده شده، هميشه تنها راهي که به ذهنم ميرسيد اين بود که اولين و آخرين li رو خاص کنيم و عکس مورد نظر رو به اونها نسبت بديم. بعدها يه سايت ديگه هم ديدم از اين روش استفاده کرده ، شما اگر پيشنهاد بهتري داري، بسيار استقبال ميکنم.
شما تو کدهاتون خيلي المان اضافي تعريف کردي
ميشه خلاصه تر نوشت
قبلاً دوستان هم اشاره کرده بودند و قبول دارم. به قول يکي از دوستان حجم کدها رو ميشه به يک سوم کاهش داد ! ولي باوربفرمائيد يه جاهايي به بن بست ميرسيدم و با يک تگ اضافي مشکل حل ميشد! بزاريد پاي حساب بي سوادي ;-)
با ساير موارد اگر باقي مونده باشه ! موافقم و از شما بينهايت متشکرم که وقت صرف کرديد و سايت بنده رو قابل دونستيد و آناليز کرديد.
انشااله در طراحي مجدد همه ايرادات رو بتونم رفع کنم.
باتشکر
نبي
نقل قول:چرا المان خالي ميزاري؟ براي گذاشتن عکس براي هدر راه هاي مختلفي هست که نياز به المان خالي نباشه
اين جوري بي خود حجم صفحت بالا ميره
راستش نميخوام از کار خودم دفاعي بکنم چون اکثر مواردي که اشاره کرديد کاملاً صحيحه و کم و بيش دوستان هم بهش اشاره کردند و ميپذيرم.
اما اين قضيه المان خالي منو ياد يه موضوعي انداخت که شايد جنبه آموزشي هم داشته باشه.
در اينجا در پاسخ به سوال "يکي از مفيدترين تکنيک‌هاي CSS که اغلب از آن استفاده مي‌کني؟" تعدادي از طراحان ادعا کردند از "قرارداد عکس توسط CSS" بيشتر خوششون مياد.
دقیقا منم منظورم همین بود
منظورم این نبود که چرا به جای استفاده از img از div استفاده کردی
منظورم این بود که شما می تونی این کاری که با یه المان خالی انجام دادی رو به یه المان پر انجام بدی(همون خلاصه نویسی)
<li class="box_footer"> </li>
اين اضافيه
شما مي توني خصوصياتي که به اين دادي رو بين المان هاي ديگه پخش کني
با اين مورد خيلي موافق نيستم.
مخصوصاً در مورد جداولي که با li تشکيل ميشن و بالا و پايين اونها از عکسهاي متفاوت استفاده شده، هميشه تنها راهي که به ذهنم ميرسيد اين بود که اولين و آخرين li رو خاص کنيم و عکس مورد نظر رو به اونها نسبت بديم. بعدها يه سايت ديگه هم ديدم از اين روش استفاده کرده ، شما اگر پيشنهاد بهتري داري، بسيار استقبال ميکنم.
شما می تونی به جای عکسی که در li اول میزاری یه padding-top به اندازه ی ارتفاع عکس به ul بدی و عکست رو به عنوان بکگروند ul بزاری
به جای li پایینی هم، اخرین li رو یه padding-bottom بدی پوزیشن بکگروند رو صفر و صد درصد بزاری
منظورمو گرفتی یا یه نمونه کد بزارم
هست.
هم اکنون به تمامی وب سایت هایی که با CSS طراحی کردم نگاه می کنم، درست است که Valid هست، اما از نحوه به کاربردن المان ها و عناصر صفحه خندم می گیره، فقط از ترفند هایی که زدم لذت می برم.
هرچه زمان بیشتری می گزره و نمونه کارهای بیشتری رو می بینم، با گسترده بودن تکنیک های CSS و ترفند های آشنایی بیشتری پیدا می کنم.
باور بفرمایید طراحی وب سایت بر پایه CSS در بین طراحان ایرانی نوپاست و تنها کمک به همدیگه می تونه باعث پیشرفت باشه.
درسته که نمونه پروژه های ارسالی برای مسابقه Valid بودند ، اما به نظر من 70% استفاده از المان های صفحه توسط طراحان، کاملا اشتباه بود. که من به این نوع طراحی می گم مریض. فقط کافیه سورس یک وب سایتی هم چون Nero.com رو مشاهده کنید.
من خودم هر چی یاد گرفتم از تفسیر کد های اون بود. واقعا آدم لذت می بره.
نبی هم پیشرفت کاملا زیادی داشته، همون طور که از مشاهده کد های پروژه مرتضی که از المان های پیش فرض به درستی استفاده کرده.
اینکه طراحی با گزاشتن زمان، خطاهای طراح دیگه ای رو عنوان می کنه، بسیار عالیست، اما بهتر از آن زمانی است که طراح بتواند با استفاده از این تجربیات، پروژه های بعدی کاملی رو ارایه دهد.
پاینده باشید.
شما می تونی به جای عکسی که در li اول میزاری یه padding-top به اندازه ی ارتفاع عکس به ul بدی و عکست رو به عنوان بکگروند ul بزاری
به جای li پایینی هم، اخرین li رو یه padding-bottom بدی پوزیشن بکگروند رو صفر و صد درصد بزاری
منظورمو گرفتی یا یه نمونه کد بزارم
ارادتمند مرتضی جان.
اتفاقا من از اطلاعات با ارزش شما نهایت استفاده رو می کنم، اجازه بفرمایید جایزه رو به 100 مگ هاست تغییر بدم. با این توجه که در صفحات portfolio همانند یک تازه کار ، یک block Lever رو چندین بار در صفحه تکرار کردم :دی هرچند که جای این صحبت در این تایپیک نیست، پیش تر از نبی جان عذر خواهی می کنم.
پاینده باشید.
سلام ،
عذر میخوام که دیر پاسخ میدم راستش این تاپیک از دستم در رفته بود .
بابت حل مسئله تشکر میکنم. در این مورد کاملاً حق با شماست. اما اگر نخواییم از تگ a کمک بگیریم اونوقت چی؟ یعنی آیتم ها لینک نباشند.
البته در صورتی هم که آیتم ها بصورت لینک باشند و مجبور باشیم برای هر یک، زمینه ای علاوه بر زمینه اصلی در نظر بگیریم اونوقت چی؟!
شاید بهتر بود مسئله رو طور دیگری مطرح میکردم.
در مورد هر یک از دو سوال بالا فایلی درست کردم که اگر اینبار هم برای هر کدوم راه حلی ارائه بدید اون وقته که دیگه روی من کم میشه !!!
(به شرط تغییر نکردن تصاویر)
تشکر
نبی
هم یه همچین تاپیکی داشت
)
