آموزش و رفع اشکال CSS [آرشيو]

View Full Version : آموزش و رفع اشکال CSS

d@nial

12 May 2006, 02:01 AM

با سلام
در این تاپیک به معرفی، معرفی منابع ، رفع اشکال، آموزش و ... در مورد CSS می پردازیم

d@nial

12 May 2006, 02:31 AM

براي تغيير رنگ اسکرول بار کدهاي زير را بين <head></head> قرار دهيد: <style type="text/css">

</style>
شما ميتوانيد با تغيير دادند رنگهاي سکرول بار رو به طرح دلخواه خود بسازيد.
http://tools.bolghan.com/scrollbar-colours.gif

منبع: http://tools.bolghan.com/archives/000127.html

d@nial

12 May 2006, 02:33 AM

کار کردن با زمينه و رنگها
خواص رنگها:
رنگها را مي توان به چند حالت در استايلها تعريف کرد. براي مثال:

body { color: teal }
body { color: #008080 }
body { color: rgb(0, 128, 128) }
body { color: rgb(0%, 50%, 50%) }

همانطوري که در بالا مشاهده کرديد به چهار روش مي توانيد رنگها را تعريف کنيد. در روش اول شما مي توانيد اسم رنگهايي که توسط HTML پشتيباني ميشوند را بنويسيد. در روش دوم رنگها را به صورت اعداد هگزا استفاده شده اند و در دو روش بعد که مقادير سه رنگ قرمز، سبز و آبي را به صورت ارقام و درصد استفاده شده اند.

کنترل کردن تصاوير در زمينه:
براي نمايش عکس در زمينه و يا جاهاي بخصوص مي توانيد از فرمول زير استفاده کنيد:

background-image: url(IMAGE)

در اينجا IMAGE آدرس عکس ميباشد براي مثال:

B { background-image: url(d:\tem\images\bold_bg.gif) }

در مثال بالا شما زماني که تگ BOLD به کار برديد عکس زمينه براي آن تگ bold_bg.gif خواهد بود.
تکرار عکس در صفحه:

background-repeat: repeat_value

در اينجا مقدار repeat_value مي توان گزينه هاي از قبيل repeat, repeat-x, repeat-y, no-repeat باشند. مثال:

body {
background-image: url(d:\tem\images\eagles.jpg);
background-image: repeat }

body {
background-image: url(d:\tem\images\eagles.jpg);
background-image: repeat-x }

body {
background-image: url(d:\tem\images\eagles.jpg);
background-image: repeat-y }

body {
background-image: url(d:\tem\images\eagles.jpg);
background-image: no-repeat }

در مثالهاي بالا به ترتيب به صورتهاي مختلف نمايش داده ميشوند.: ۱. تکرار عکس در تمامي صفحه، ۲. تکرار عکس در جهت محور xها (افقي)، ۳. تکرار عکس در جهت محور yها (عمودي)، و ۴. بدون تکرار ميباشد. که به صورت شکل زير ميباشند.

http://bolghan.com/tools/Articles/css/image/bg_css.jpg

موقيعت عکس در زمينه:
در مبحث قبلي شما مي توانستيد عکس را به چهار صورت نمايش دهيد حال اگر بخواهيد موقيعت عکس را در صفحه نمايش دهيد مي توان از فرمول زير استفاده کنيد:

background-position: horizontal_value vertical_value

به جاي horizontal_value, vertical_value مي توان از عدد، درصد، و يا اسم جهتهاي top, center, bottom, right, left استفاده کرد. براي مثال:

http://bolghan.com/tools/Articles/css/image/bg_postion_css.jpg

شناور شدن متن بروي عکس:
براي اينکار مي توانيد از فرمول زير استفاده کنيد:

background-attachment: attach

به جاي کلمه attach مي توان از scroll و يا fixed استفاده کرد. در حالت اول که به صورت پيش فرض ميباشد و در حالت دون متن بروي تصوير شناور ميباشد.
فرمول کلي براي زمينه (background) به صورت زير ميباشد:

background: background-color background-image background-repeat
background-attachment background-postion

براي مثال:

body { background: balck url(d:\tem\images\eagles.jpg) no-repeat fixed center center }

در مثال بالا رنگ زمينه سياه، و عکس eagles.jpg در وسط صفحه قرار خواهد گرفت که بدون تکرار ميباشد و متن بروي اين عکس شناور خواهد بود.

* منظور از شناور بودن متن بروي عکس اين ميباشد که عکس ثابت و متن بروي آن حرکت مي کند اما در حالت پيش فرض عکس به اندازه ارتفاع متن تکرار ميشود.

منبع: http://tools.bolghan.com/archives/000181.html

d@nial

12 May 2006, 12:59 PM

یکی از افکتهای معمول در طراحی وب ایجاد دکمه ها و کلیدهایی است که در حالتهای مختلف تغییر میکنند.
به عنوان مثال در زمان قرار گرقتن ماوس بر روی آنها (Hover) ، کلیک ماوس و حالت فعال بودن لینک تغییر شکل یا تغییر رنگ میدهند. به این کلیدها اصطلاحا Rollover گفته میشود.
روشهای زیاد و متفاوتی برای ایجاد چنین اثر و افکتی وجود دارد ، مانند استفاده از فلش ، استفاده از جاوا و … و استفاده از CSS !
در این مقاله به شما نحوه ساخت یک Rollover ساده با CSS را آموزش میدهیم. در اینجا ما فرض میکنیم که میخواهیم یک منوی افقی برای سایت خود بسازیم .
ابتدا باید به فکر گرافیک و شکل ظاهری و طرز ایجاد عکسها باشیم. شکل ظاهری کلید به شما و طرح سایر بخشهای سایت بستگی دارد در این مورد فقط توصیه میکنم که کار گرافیکی خود را با زیرکی و ظرافت نامحسوسی در قالب کادرهای یک قد مستطیلی جای دهید و با یک منحنی 5 پیکسلی که از کادر بیرون زده کار خود را سخت و پیچیده نکنید http://weblog.corelist.net/wp-images/smilies/icon_wink.gif
برای افکت قرار گرفتن ماوس ، کلیک و حالت فعال بودن لینک معمولا از تغییر رنگ و حداکثر از تغییر حالت متن از معمولی به درشت استفاده میشود و در این مورد هم بستگی به سلیقه شما دارد.
طرح گرافیکی مورد نظر من به این صورت است :
http://weblog.corelist.net/files/css-rollover/f_1.jpg
یک نوار 30 پیکسلی ساده با دو خط 2 پیکسلی در بالا و پایین و یک طیف زمینه کم رنگ خاکستری. تغییرات برای حالتهای مختلف در رنگ نوشته ها و نوار 2 پیکسلی پایینی اعمال میشود و در نهایت برای حالت معمولی ، Hover یا قرار گرفتن ماوس و حالت Active یا لینک فعال این شکلها را داریم.
مهمترین نکته این بخش نحوه خروجی گرفتن و ایجاد فایل تصویری برای استفاده در وب است. شاید ساده ترین راه ایجاد یک تصویر از هر یک از حالتهای کلید باشد که در این صورت بری هر کلید سه تصویر داریم که این تعدد تصاویر مشکلاتی چون حجم بیشتر و تاخیر در بارگذاری کامل صفحه ایجاد میکنند و نیز مدیریت و نگه داری طرح وقت گیر میشود و مهمترین اشکال و یکی از نکته های اصلی این آموزش تاخیر در بارگذاری عکسها در حالتهایHover و Active است به این معنی که در حالت عادی اگر عکسها به صورت جداگانه قرار گرفته باشد تنها در صورت وقوع رویداد (Event) خاص Hover یا Active این عکسها بارگذاری میشوند که از زیبایی و یکپارچگی طراحی میکاهد.
راه حل و به نوعی بهترین راه چیست ؟!
بهترین راه استفاده از یک فایل برای هر سه حالت است . بله ! با این کار از تعداد تصاویر کاسته شده و تمام حالات به طور همزمان و یکجا بارگذاری میشوند. اما چطور ؟! http://weblog.corelist.net/files/css-rollover/f_2.jpg
بهترین راه قرار دادن و سه حالت معمولی ، Hover و Active به طور ستونی است به شکلی که حالت اصلی در پایین ، حالت Hover در وسط و حالت Active در بالا قرار گیرد. به این شکل :
حال ما به ازای هر کلید یک تصویر داریم که ارتفاعی سه برابر ارتفاع نوار یا منوی ما دارد.
اکنون به سراغ کدنویسی و بخش اصلی کار میرویم.
قبل از توضیح به شما پیشنهاد میکنم مجموعه آموزشهای MaxDesign در مورد لیستها (http://css.maxdesign.com.au/listutorial) را مطالعه کنید.
برای ایجاد یک منوی افقی از یک لیست نامرتب (UnorderedList) استفاده میکنیم و مطلقا درون صفحه از عکس (تگ img) استفاده نمیکنیم !
ابتدا کدهای صفحه را مینویسیم :

<ul id="nav">
<li><a href="/home">خانه</a></li>
<li><a href="/hosting/">میزبانی وب</a></li>
<li><a href="/support/">پشتیبانی</a></li>
<li><a href="/web-develop/">توسعه وب</a></li>
<li><a href="/web-design/">طراحی وب</a></li>
<li><a href="/about-us/">درباره ما</a></li>
</ul> در ادامه به سراغ شیوه نامه میرویم و به این لیست نامرتبمان شکل میدهیم.
اول باید لیست عمودی خود را به صورت افقی نمایش دهیم پس یکراست به سراغ تگ UL رفته و آنرا با نام topmenu هدف قرار میدهیم. کمی ریزه کاری به خرج میدهیم، مکان و موقعیت لیست نامرتب خود را مشخص میکنیم و سپس یک پس زمینه به آن اختصاص میدهیم. این پس زمینه میله ای به اندازه یک پیکسل و به ارتفاع منوی ما (در اینجا 30 پیکسل) میباشد که به طور افقی در طول لیست تکرار میشود.
توصیه میکنم با تنظیم padding بر روی صفر مقادیر Margin راست و چپ روی auto منوی خود را در وسط بخش مورد نظر قرار دهید و همچنین کنترل li ها را به خود آنها واگذار کنیم !
برای نمایش افقی کافیست مقدار display را برای liها روی inline قرار دهیم. که در نهایت کدهای اولیه به این شکل خواهد بود :

ul#topmenu {
height: 30px;
margin: 0 auto;
padding: 0; list-style-type: none;
text-align: center;
background-image: url(images/tp_bg.gif);
background-repeat: repeat-x;
background-position: center;
}
ul#topmenu li {
margin: 0;
padding: 0;
display: inline;
} و حالا نوبت به بخشهای اصلی یعنی لینکها میرسد. برای اینکه لینکها تمامی سطح مورد نظر ما یعنی سطح کلید را پوشش دهد باید به یک عنصر بلوکی یا Block Level تبدیل شود. که در اینجا دقیقا بر عکس li باید مقدار display روی block قرار داده شود. همانطوریکه میدانید عناصر بلوکی در حالت عادی در زیر هم قرار میگرند. در نتیجه برای اینکه لینکها در کنار هم و به صورت افقی قرار بگیرند از خاصیت float استفاده میکنیم و مقدار float را برای لینک روی right قرار میدهیم.
حالا ما یک لیست افقی برای کنترل بهینه عناصر و یکسری لینک بلوکی در کنار هم داریم که میتوانیم به این لینکها مقادیر عرض و ارتفاع نسبت دهیم.
نکته باقیمانده متنی است که به عنوان لینک در صفحه قرار دارد که در حالت عادی این متن روی عکس با رنگ پس زمینه عنصر لینک قرار میگیرد. برای اینکه از شر این حروف و کلمات هم خلاص شویم با یک ترفند آنها را به بیرون صفحه میفرستیم و از دید بینندگان مخفی میکنیم ! (با استفاده از text-indent)
در واقع این کار یک حرکت حرفه ای برای افزایش دسترس پذیری (Accessibility) و بهینه سازی برای موتورهای جستجو (SEO) نیز میباشد و همچنین گامی موثر برای پشتیبانی از مرورگرهای قدیمی. چرا که اگر به هر علتی مانند قدیمی بودن مرورگر ، عدم پشتیبانی از CSS یا … فایل CSS اجرا نشود این متنها به درستی و در جای خود نمایش داده میشوند و همچنین در مورد Spiderها ی موتورهای جستجو که فقط با متن و ساختار پایه ای صفحات سر و کار دارند و همچنین برای دستگاههای Screen Reader که افراد نابینا استفاده میکنند موثر است. ( یک تیر و چند نشان ! )
مورد آخر برای لینک تعیین موقعیت عکس پس زمینه با ویژگی background-position است که در حالت معمولی باید در جای اصلی خود یعنی به فاصله 0 پیکسل از پایین لینک باشد و همواره تصویر در وسط کادر لینک قرار گیرد ، هر چند که ما ابعاد لینک را دقیقا به اندازه تصویر انتخاب میکنیم.
حال ما کدی شبیه به این برای لینکها داریم :

ul#nav li a {
display:block;
text-indent:-9000px;
text-decoration:none;
background-position: center 0px;
height: 30px;
float: right;
} اکنون باید به فکر حالتهای دیگر یعنی Hover و Active باشیم. برای حالتهای Hover و Active تنها کافیست محل قرار گیری عکس پس زمینه خود را به اندازه لازم (در اینجا هر با 30 پیکسل) به پایین حرکت دهیم. پس داریم :

ul#nav li a:hover {
text-decoration:none;
background-position: center -30px;
}
ul#nav li a:active {
text-decoration:none;
background-position: center -60px;
} حال باید به هر لینک عکس پس زمینه مربوطه را اختصاص دهیم. برای اینکار به li مربوط به هر لینک نام لینک را به عنوان ID اختصاص میدهیم :

<ul id="nav">
<li id="home"><a href="/home">خانه</a></li>
<li id="host"><a href="/hosting/">میزبانی وب</a></li>
<li id="supp"><a href="/support/">پشتیبانی</a></li>
<li id="webdev"><a href="/web-develop/">توسعه وب</a></li>
<li id="webdes"><a href="/web-design/">طراحی وب</a></li>
<li id="about"><a href="/about-us/">درباره ما</a></li>
</ul> و در CSS به این شکل از این IDها استفاده میکنیم و عکس پس زمینه را برای هر لینک مشخص میکنیم و همچنین عرض تصویر پس زمینه هر لینک را به عنوان خاصیت width مشخص میکنیم :

ul#nav li#home a {
background-image: url(images/home.gif);
width: 52px;
}
ul#nav li#host a {
background-image: url(images/host.gif);
width: 98px;
}
ul#nav li#supp a {
background-image: url(images/supp.gif);
width: 83px;
}
ul#nav li#webdev a {
background-image: url(images/webdev.gif);
width: 92px;
}
ul#nav li#webdes a {
background-image: url(images/webdes.gif);
width: 90px;
}
ul#nav li#about a {
background-image: url(images/about.gif);
width: 76px;
} الان ما یک منوی افقی با افکت Rollover با حداقل کدنویسی و حجم و حداکثر بازده و سازگاری داریم !
نکته اول : از آنجاییکه حالت active عموما در مرورگرهای مختلف حالتی ناپایدار و سطحی است توصیه میکنم این حالت را با استفاده از یک برنامه سمت سرور (Server Side) کنترل کنید و مثلا با استفاده از یک ساختار شرطی در برنامه مدیریت محتوای خود به لینک فعال خود کلاس active را نسبت دهید . به این شکل :

...
<li id="home" class="active"><a href="/home">خانه</a></li>
...
و برای CSS داریم :

ul#nav li.active a {
text-decoration: none;
background-position: center -60px;
}نکته دوم : شاید مایل باشید حالت بازدید شده یا Visited را نیز کنترل کرده و شکل دهید که با توجه به توضیحات بالا کار سختی نیست ! اما برای منوهای شبیه آنچه ساختیم توصیه نمیشود.
و اما نکته آخر اینکه این حالت تقریبا سخت ترین و پیچیده ترین حالت ایجاد چنین افکتی بود. اگر قادر به اجرای این حالت هستید قطعا ایجاد منوهای عمودی و ساده تر برای شما مثل آب خوردن است !
یک نمونه منوی افقی را میتوانید در این آدرس مشاهده کنید : DigitalDreamers.Biz (http://digitaldreamers.biz/)

منبع: http://weblog.corelist.net

d@nial

12 May 2006, 01:01 PM

CSS جايگزيني براي نمايش مبتني بر HTML پيشنهاد مي كند و اكنون به وسيله ي انجمن طراحي وب پذيرفته شده است . سازگاري css نيازمند برخي تغييرات از سوي توليد كنندگان وب است . css بسيار حساس به نحو دستوري است ، و اشتباهات كوچك مي توند باعث شكست كامل يك قانون css شود . بنابراين ، طراحان بايد از مشخصات آن آگاه باشند .
متاسفانه ، حتي اگر از قوانين پيروي كنيد ، خطاهاي آشكاري در پياده سازي مرورگرهاي پيشرفته وجود دارد . چيزهاي زيادي وجود دارد كه بايد درباره ي CSS بدانيد ، و امكانات جديد هر لحظه اضافه مي شود . CSS1 تعيين اولين شيوه نامه ، بيش از 50 خاصيت را تعريف مي كند ، و CSS2 بيش از 50 خاصيت ديگر را . CSS2 تسهيلات تغيير مكان كه CSS-P ناميده مي شود را به وجود آورده است . نگارش جديد كه CSS3 نام دارد قصد دارد امكانات ارائه بيشتري را به وجود آورد ، و با فناوري هاي ديگر ، نطير اسكريپت و گرافيك هاي برداري ، بيشتر يكپارچه شود .
مهم است به خاطر داشته باشيد كه HTML اساس و پايه ي يك صفحه وب است . CSS در واقع ، به طور مستقيم به استفاده صحيح از عناصر HTML يا XHTML استناد مي كند . ولي ، اگر به كد ناهنجاري محدود شده باشند لزوما به طور قابل پيش بيني اي كار نمي كنند .
هر چند واضح است كه مي خواهيم به برچسب هاي منطقي معني بدهيم ، ولي مواظب باشيد كه اين به شما مجوز نمي دهد از CSS به جاي كد HTML استفاده كنيد . قوانيني كه ارائه محدود برخي برچسب ها را تغيير مي دهند نبايد به كار روند . براي مثال در اينجا باعث مي شويم كه برچسب هاي <b> به طور غير معمولي عمل كنند و تمام اشكال تزئيني پيوندها را حذف نمايند : b {font-style:italic; font-weight:normal;}
a {text-decoration:none; color: black; }

( اگر به دليل خاصي اين قوانين را بازنويسي كرده ايد ، حتما بايد آن ها را توضيح گذاري كنيد ) به خاطر مشكل معناي پيش فرض در HTML ، شايد برچسب هاي <div> و <span> فوق العاده مفيد باشند . هم چنين برچسب <div> يك برچسب بلوكي است كه هيچ نمايش پيش فرضي ندارد ، بنابراين در حالت دهي به بخش هاي بزرگ يك سند مفيد است . براي مثال :
<div style="background: lightblue; font-weight: bold; color: black;">
<p>This Paragraph is highlighted inblue.</p>
</div>

به طور مشابه برچسپ <span> هيچ معني يا نمايش از پيش تعريف شده ايي ندارد ، ولي وقتي يك برچسب هيچ كاراكتر بازگشت به ابتداي خط ( carriage return ) را نداشته باشد ، هنگام الصاق اطلاعات سبك به چند كلمه يا حرف ، مفيد به نظر مي آيد ، مانند مثال زير :
<p>Calling out<spanstyle="background-color:#99CC00; font-weight:bold; color:#000000"></span>isn't hard withSPAN</p>

روش هاي متفاوتي براي اضافه كردن CSS به سند HTML وجود دارد ، و همه آن ها داري مزايا و معايبي است كه قبل از اينكه روشي در نظر گرفته شود بايد به دقت سبك و سنگين شود . ابتدا مي توانيد در بخش سر صفحه ي يك سند HTML با مشخص ساختن رابطه پيوندي به يك شيوه نامه ي خارجي ، به آن متصل شويد . براي مثال :
<link rel="stylesheet" href="styles/global.css" media="screen" />

روش دوم براي اضافه كردن CSS ، نهفته كردن آن است . وقتي يك شيوه نامه نهفته مي شود ، قوانين شيوه نامه را به طور مستقيم درون سند HTML بنويسيد . شيوه نامه ي گسترده شدن درون سند ( document-wide style ) يك راه بسيار ساده براي شروع استفاده از CSS است . يك برچسب <style> درون سر صفحه ي سند HTML قرار دهيد . به دليل اينكه چند شكل از شيوه نامه ها ممكن است اضافه شود ( فراتر از شكل استاندارد CSS ) بايد هنوز هم صفت type را اضافه كنيد تا نشان دهيد كه كدام شكل از شيوه نامه را به كار مي بريد ، البته صرفنظر از پشتيباني پيش فرض مرورگر از فناوري هاي شيوه نامه ها . به مثال هاي زير توجه كنيد :
شيوه نامه گسترده درون برجسب استايل

<style type="text/css">
body {background-color:#666666; font-size:9px; }
h1 {color:#990000;}
</style>

شيوه نامه پيوندي درون برجسب استايل

<style type="text/css">
@import url( wp-layout.css );
</style>

يك نگراني در مورد شيوه نامه ها ي گنجانده شده اين است كه همه ي مرورگرها اطلاعات شيوه نامه را به درستي درك نمي كنند . براي اجتناب از مشكلات ، اطلاعات شيوه نامه ها را با استفاده از روش توضيح گذاري HTML ، تبديل به توضيحات كنيد . به طوري كه اين توضيحات روي صفحه نمايش نشان داده نمي شوند يا توسط مرورگرهاي قديمي تر ، به طور نادرستي تفسير نمي گردند . ( نمي دانم نويسنده اين مطلب را براي چه عصري از مرورگرها نوشته ! اما احتياط شرط عقل است ! مهم تر از اون اين يك استاندارد است ! پس طراحان موظف به انجام آن هستند )
CSS گسترده شده درون سند در مقايسه با CSS پيوندشده داراي معايب قابل ملاحظه اي است زيرا بايد در هر صفحه كه استقاده مي شود يك نسخه از آن كپي شود . اين كار باعث سخت تر شدن اين گونه سايت ها مي شود و از حافظه نهائي محلي مرورگر نيز به شكل بهينه استفاده نمي شود .
آخرين روش به كار بردن CSS اعمال آن درون مولفه هاي ويژه با استفاده از صفت رايج style است . نيازي نيست كه اين گونه اطلاعات مربوط به شيوه نامه ها از مرورگرهايي كه نسبت به شيوه نامه ها اطلاعي ندارند مخفي شود ، زيرا مرورگرها صفاتي كه نمي فهمند را در نظر نمي گيرند . به مثال زير توجه كنيد :
<p style="color:#3366FF; font-size:12px;">This isred blue text!</p>

ولي بسياري از مزاياي اصلي استفاده از CSS به اين روش به دست نمي آيد . زيرا CSS خيلي به برچسب وابسته هستند . در واقع ، همه توافق دارند كه اين شيوه خيلي بهتر از به كاربردن برچسب هاي جديد جهت تشريح ظاهر صفحه نمي باشد . ولي برخي از طراحان از CSS به اين روش استفاده مي كنند تا از كد HTML قديمي به CSS پلي بزنند .

منبع: http://www.computer.mihanblog.com/?More=14

d@nial

13 May 2006, 01:50 AM

ساخت یه منو واسه قالب سایت یا وبلاگتون

به مثال زیر دقت کنید :

http://behrouz.bushehr.ws/images/menu.jpg

1- برای ساختن یه همچین منویی شما باید ابتدا کد های زیر رو توی قالب استایل شیت وبلاگ یا سایتتون قرار بدید و یا اینکه در قالب اصلی ما بین بذارید :

Code:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu3 {
width: 200px;
border: 1px solid #ccc;
margin: 10px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(images/menu3.gif);
padding: 8px 0 0 30px;
}
#menu3 li a:hover, #menu3 li a:active {
color: #283A50;
background: url(images/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}

2- برای اینکه منو در سایت یا وبلاگ شما نشون داده بشه باید کدهای اچ تی ام ال زیر رو در ساید بارهای چپ یا راست و یا کلا هرجای قالب وبلاگ که خواستید قرار بدید :

Code:
<div id="menu3">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a></li>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="#6" title="Download">Download Menu</a></li>
</ul>
</div>

توضیحات اضافه :

1- چنانچه قصد دارید نوع و اندازه و شکل متون روی منو ها رو تغییر بدید باید در کد زیر از مجموعه کدهای بالا تغییرات خودتون رو اعمال کنید :

Code:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

2- چنانچه قصد دارید تغییراتی در اندازه طول و یا خطوط دور منو ( Border ) و یا محل قرار گرفتن کل محل انجام بدید باید تغییرات رو در کد زیر اعمال کنید :

Code:

#menu3 {
width: 200px;
border: 1px solid #ccc;
margin: 10px;
}

3- اگر می خواین اندازه عرض و نوع حالت متنها رو در حالت عادی تغییر بدید باید در کد زیر تغییرات رو اعمال کنید :

Code:
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

4- اگر قصد تغییراتی در رنگ نوشته های منو و نوع چینش منو و فاصله هر خانه ی منو از هم ، در حالت عادی رو داشتید باید روی کد زیر تغییرات رو اعمال کنید ( در ضمن آدرس تصویر رو هم در این کد وارد می کنید ):

Code:
#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(images/menu3.gif);
padding: 8px 0 0 30px;
}

5- اگر قصد همه تغییرات بالا در حالت فعال منو ( حالتی که ماوس روی منو ها باشه ) رو داشته باشید باید روی کد زیر کار کنید :

Code:
#menu3 li a:hover, #menu3 li a:active {
color: #283A50;
background: url(images/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}

6- در نهایت اگه قصد دارید تعداد خانه های منو رو کم یا زیاد کنید باید به ترتیب با حذف یا اضافه کردن کد زیر به دومین کد بالا ( کد اچ تی ام ال ) این کار رو انجام بدین :

Code:

<li><a href="#1" title="Home">Home</a></li>

و در نهایت می تونید از این تصویر یا به سلیقه خودتون از هر تصویر دیگه ای ( باید برای دو حالت عادی و فعال طراحی کنید و اونا رو به یک تصویر واحد تبدیل کنید ) استفاده کنید :

http://behrouz.bushehr.ws/images/menu3.gif

البته اینم بگم که واسه طراحی منوهایی مشابهه این می شه از راههای دیگه هم عمل کرد منتها مزیتی که این آموزش داره اینه که شما فقط از یه تصویر در این روش استفاده می کنید که طبیعتا ، هم باعث سریعتر لود شدن کل قالب و هم اینکه وقتی شما ماوس رو روی منو می برید دیگه لازم نیست تصویر بعدی لود بشه و با همین تصویر کار ما را می افته.
منبع: http://behrouz.bushehr.ws/?id=-684941607

d@nial

13 May 2006, 01:52 AM

فیلتر Drop Shadow يا سايه انداختن زير يه عکس يکی از پرکاربردترین فيلترهايی هست که معمولا هر طراحی از اون در کارهاش استفاده می‌کنه. خیلی از برنامه‌های گرافیکی مثل Photoshop این فیلتر رو در خودشون دارن و اعمالش هم بسیار ساده‌ست.
(Layer > Layer Style > Blending Options > Drop Shadow)
http://welbog.mohsentaleb.com/images/20october2004_1.png
http://welbog.mohsentaleb.com/images/20october2004_1.gif
تا اینجای مطلب چیز جديدی نبود! کاری که ما می‌خوايم انجام بديم پياده‌سازی اين فيلتر برای عکسهامون در صفحات وب هست طوری که قرار نباشه برای تک تک عکسها این فیلتر رو مثلا در همون Photoshop اعمال کنیم و تصویر آماده شده رو در صفحه قرار بدیم!
برای اين کار بازهم دست به دامن CSS ميشيم! http://forum.************.com/images/smilies2/smilingsmiley.gif
یه کلاس به اسم img-shadow با مشخصاتی که الان میگم تعریف می‌کنیم و تگ <img>مون رو بین <div> نسبت داده شده به این کلاسمون قرار می‌دیم. به این صورت:
Code:
<div class="img-shadow">
<img src="baby.gif" />
</div>

برای درک اينکه اين کلاس دقیقا چه مشخصاتی داره تکنيک شکل گرفتن اون رو توضيح می‌دم:
http://welbog.mohsentaleb.com/images/20october2004_3.jpg
در مرحله اول ما به یه عکس سايه خورده‌ی ساده نیاز داریم که می‌تونیم به راحتی توی Photoshop با انتخاب کردن یک ناحیه روی یک تصویر سفید و اعمال کردن فیلتر Drop Shadow اون رو بسازیم و با نام shadow.gif (http://welbog.mohsentaleb.com/images/shadow.gif) ذخيره‌ش کنيم.
نکته‌ی مهمی که اینجا بايد بهش توجه کرد اينه که اين تصوير ما به اندازه‌ی کافی بزرگ انتخاب شده باشه که برای بزرگترین عکس صفحه هم بتونه به عنوان Background ست بشه. (سایزی که ما به عنوان حد بالا انتخاب می‌کنیم 800x800 هست چون معمولا عکسهای استفاده شده در صفحه‌ی ما بزرگتر از این سایز نیستن)
برای عکسهایی با سایزهای کوچکتر مشکلی نداريم چون همونطور که می‌دونيد در CSS عکسی که به عنوان Background برای یک Element انتخاب ميشه به اندازه همون Element تغيير اندازه پيدا می‌کنه.
http://welbog.mohsentaleb.com/images/20october2004_4.jpg
در مرحله‌ی دوم تصوير سايه رو به عنوان background عکسمون قرار می‌ديم.
Code:
background: url(images/shadow.gif) no-repeat bottom right;

شاید بگین چرا ديده نميشه پس الان؟! خب چون دقيقا پشت عکس قرار می‌گيره دیگه!
http://welbog.mohsentaleb.com/images/20october2004_5.jpg
اشکال مرحله‌ی قبل رو با جابجا کردن عکس به سمت بالا و چپ برطرف می‌کنيم. اين کار رو با تنظيم کردن Margin به اندازه‌ی ناحيه سايه خورده انجام می‌ديم. چون عرض سايه‌ی ما 6px هست پس تنظيمات Margin به اين صورت در مياد:
Code:
margin: -6px 6px 6px -6px;

http://welbog.mohsentaleb.com/images/20october2004_6.jpg
در مرحله‌ی آخر به کلاسمون يه Float هم اضافه می‌کنيم. دليلش هم اينه که اگه Float نباشه و سايز عکس هم مشخص نشده باشه اون Background در طور سطری که عکس قرار داره کشیده ميشه. (امتحانش کنيد)
Code:
float:left;

نتيجه‌ی کار رو روی یه رنگ زمينه‌ی سفيد در عکس مرحله‌ی آخر می‌تونيد ببينيد. طبيعيه که اگه رنگ زمينه صفحه‌ی شما چيزی غير از سفيد باشه در مرحله‌ی اول و در ساختن عکس سايه خورده‌ی ساده بايد بهش دقت کنيد و رنگ زمينه‌تون رو اونجا درست اعمال کنید.
کد نهایی رو می‌تونید در پائین ببینید. برای جذاب تر شدن عکس، علاوه بر سايه، يک حاشيه ۱ پيکسلی خاکستری هم به دور عکس اضافه کرديم.
Code:
.img-shadow {
float:left;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 5px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

منبع: ALA: CSS Drop Shadows (http://www.alistapart.com/articles/cssdropshadows/)

http://welbog.mohsentaleb.com/index.php?p=198

axel

20 October 2006, 11:42 PM

براي تغيير دادن كرسر تايپ كنيد:
cursor
:
سپس تايپ كنيد
pointer ايكون به شكل دست
default به شكل پيكان
crosshair به شكل يك صليب
move به شكل دو پيكان متقاطع
wait به شكل ساعت شني
help به شكل يك پيكان همراه با يك علامت سوال
text به شكل I
auto ايكون توسط برنامه مرورگر تعيين مي شود