یک طراح وب » استایل http://aliha.ir آدم ها را نمی توان فقط به یک یا چند موضوع ِ خاص، محدود ساخت. آدمی که این پشت نشسته است، از هر موضوعی می نویسد! Sat, 10 Jul 2010 13:06:19 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 یک آموزش کوتاه و مهم در سی اس اس – important! چیست؟ http://aliha.ir/2009/04/10/what-is-important-in-css/ http://aliha.ir/2009/04/10/what-is-important-in-css/#comments Fri, 10 Apr 2009 07:56:43 +0000 علیها http://aliha.ir/?p=1049 باید در بعضی استایل ها و پرونده های سی اس اس دیده باشید که در آخر بعضی دستورات از عبارت important! استفاده می کنند. مثلا:

float: right !important;

زمانی از این عبارت استفاده می کنیم که قرار است به یک عنصر در صفحه، بیش از یک دستور بدهیم. یعنی چی؟ فرض کنید ما می خواهیم یک پوسته ای را فارسی کنیم و استایل آن را راست به چپ کنیم. روش معمول هم برای این کار این است که یک استایل جدا برای آن تهیه کنیم و فقط دستورات ِ قسمت های لازم به فارسی شدن را در آن بنویسیم. در این صورت ما برای بعضی عناصر، دو دستور متفاوت داریم. به همین خاطر برای اینکه مرورگر بفهمد الویت با کدام دستور است، در آخر دستور موردنظر یک important! می گذاریم.

برای درک این قضیه، به این مثال توجه کنید:
فرض کنید ما یک تگ p داریم که دایرکشن اش چپ به راست است:

P {
direction: ltr;
}

حالا در استایلی جدا می خواهیم آن را راست به چپ کنیم:

P {
direction: rtl;
}

حالا ما برای این تگ p دو مقدار lrt و rtl داریم. مرورگر گیج می شود که :) مقدار موردنظر ما همان rtl است پس در آخر آن، یک important! می گذاریم تا مرورگر بی چون و چرا بلافاصله rtl را روی تگ p اجرا کند:

P {
direction: rtl !important;
}

همین دیگر :)

]]> http://aliha.ir/2009/04/10/what-is-important-in-css/feed/ 25 استایل فارسی جدید برای فرندفید و چگونگی استفاده از آن http://aliha.ir/2009/02/14/new-persian-style-for-friendfeed-and-how-to-use-that/ http://aliha.ir/2009/02/14/new-persian-style-for-friendfeed-and-how-to-use-that/#comments Sat, 14 Feb 2009 09:18:01 +0000 علیها http://aliha.ir/?p=898 فرندفید یک مکان اشتراکگذاری ِ انواع اطلاعات است که به کاربر این امکان را می دهد که هر گونه اطلاعات، اعم از ویدئو، موزیک، تصویر و… را به اشتراک بگذارد. این عمل می تواند مستقیما در خود فرندفید و یا از طریق خروجی سایت های دیگر انجام گیرد.
علاوه بر این، در فرندفید حلقه های دوستی متعددی به چشم می خورد که نشان می دهد این سرویس حقیقتا توانسته است واژه ی “فرند” را معنا دهد.
اما از مزایای فرندفید که بگذریم تنها با یک مورد برخورد می کنیم که باعث می شود آن لذت واقعی را از فرندفید و فضای جذاب آن نبریم. و آن محیط ناسازگار با متن های فارسی است. به این صورت که ترتیب چیدمان عناصر صفحه همگی چپ به راست و متناسب با انگلیسی زبان هاست.

راه حل؟
خب همیشه برای هر مشکلی راه حلی هم پیش رو هست. می خواهیم با استفاده از استایلی که آماده کرده ام و انجام دادن چند مرحله ی بسیار ساده ی زیر، بیشترین لذت را از محیط فرندفید ببریم :)

persian-friendfeed-style-demo

ویژگی های این استایل:
با استفاده از این استایل، قسمت هایی که که در آن ها متن های فارسی قرار می گیرند، کاملا راست به چپ و متناسب با زبان فارسی می شوند. و اگر همزمان از کلمات فارسی و انگلیسی در یک متن استفاده کنید، جمله تان بهم نمی خورد و همان طور که باید نشان داده می شود.
همچنین لوگوی اصلی فرندفید هم که در بالا و سمت چپ قرار دارد، با لوگوی معادل فارسی آن تعویض می شود. (واژه ی “دوست نوشت” را دوست خوبم امیرعباس عزیز انتخاب کرده بود). سعی می کنم برای مناسبت های مختلف مانند عید نوروز، لوگوی متناسب با همان مناسبت را تهیه کنم و جایگزین کنم. البته تعهدی در این مورد نمی دهم چون ممکن است فراموش کنم :دی
مورد بعدی، رنگ سفید زمینه ی فرندفید است که فوق العاده چشم را اذیت می کند. خصوصا اگر مثل من، شب ها هم مشتری فرندفید هستید، بدون شک بارها چشم تان خسته می شود و ممکن است عوارض نامطلوبی هم داشته باشد.
اگر از این استایل استفاده کنید، زمینه ی فرندفیدتان کمی مایل به رنگ طوسی می شود و این امر جلوی درخشش زمینه ی سفید را می گیرد. امیدوارم کم تر چشم تان خسته شود :)
اما چیزی که سعی کردم در نوشتن استایل رعایت کنم، چیدمان اصلی عناصر بود. یعنی قسمت هایی که احتیاجی به راست به چپ شدن نداشتند را تغییری ندادم. مانند قسمت سرصفحه. این امر موجب می شود که تا حدودی فضای جدید فرندفید در این استایل برای تان غریب نباشد و خیلی زود در آن احساس راحتی کنید.

چگونه از این استایل فارسی استفاده کنیم؟
مسلما اولین پیش نیاز شما داشتن مرورگر فایرفاکس است :)
مراحل بسیار ساده و آسان است. ابتدا افزونه ی Stylish را در فایرفاکس ِ خود نصب کنید. بعد از نصب، فایرفاکس را ری استارت کنید. سپس به این صفحه بروید و مانند تصویر زیر، در قسمت Install Options روی Load into Stylish کلیک کنید. در پنجره ی باز شده روی Save کلیک کنید.
حالا وارد فرندفید ِ خود شوید و لحظات خوشی در کنار دوستان تان داشته باشید :)

install-option-ff-style

نکته: اگر از استایل های دیگری برای فرندفید استفاده می کنید، یادتان باشد که غیر فعال اش کنید تا این استایل به درستی کار کند!

پس نوشتت 1: استایل به روز شد و اشکالاتی که داشت همگی برطرف شدند و کدهای آن نیز بهینه تر شد! (+)

و کلام آخر اینکه به هرحال ممکن است نواقصی در کار وجود داشته باشد. اگر با مشکلی برخورد کردید و یا حتی پیشنهادی برای بهتر و بهینه تر شدن استایل داشتید، حتما به بنده اطلاع دهید. یا در همین جا لطف کنید و کامنت بگذارید و یا مرحمت کنید و ایمیل بزنید :)

من در فرندفید

]]> http://aliha.ir/2009/02/14/new-persian-style-for-friendfeed-and-how-to-use-that/feed/ 45 پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر http://aliha.ir/2009/01/30/how-to-use-lightbox-jquery-plugin/ http://aliha.ir/2009/01/30/how-to-use-lightbox-jquery-plugin/#comments Fri, 30 Jan 2009 23:19:49 +0000 علیها http://aliha.ir/?p=795 می خواهیم توسط پلاگین Lightbox، تصاویری که در صفحات خود داریم را در پنجره ای به صورت ایجکس نمایش دهیم همراه با افکتی زیبا.
البته این پلاگین برای سیستم هایی مثل مووبل تایپ یا وردپرس، هماهنگ شده است و خیلی راحت می توانید از آن در این سیستم ها استفاده کنید. پلاگین Lightbox برای مووبل تایپ را از اینجا و برای وردپرس را از اینجا دریافت کنید.
مسلما این آموزش برای کسانی است که از موبل تایپ یا وردپرس استفاده نمی کنند و صرفا می خواهند با خود ِ Lightbox آشنا شوند.

چگونه از پلاگین Lightbox استفاده کنم؟

1. دریافت فایل های موردنیاز:
ابتدا پلاگین Lightbox و سپس کتابخانه ی جی کوئری را دریافت کنید.

Download Lightbox Plugin
Download JQuery Library

نکته: از آنجایی که در تحریم ِ گوگل به سر می بریم، برای دریافت کتابخانه ی جی کوئری، قطعا به مشکل بر می خورید. به همین خاطر می توانید همین الان جی کوئری را از اینجا دریافت کنید.

2. فراخوانی اسکریپت ها و استایل ها:
باید کتابخانه ی جی کوئری و پلاگین Lightbox را در صفحه قرار دهیم. کدهای زیر را بین تگ head قرار دهید:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lightbox-0.4.js" type="text/javascript"></script>

یک فایل سی اس اس هم در پوشه ی پلاگین موجود هست که آن را هم باید در صفحه فراخوانی کنید. توسط کد زیر و مانند کدهای بالا بین تگ head:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

3. فعال سازی:
برای اینکه تصاویر با Lightbox هماهنگ شوند، احتیاجی به تغییر و اصلاح کدهای اکس اچ تی ام ال ندارید. این پلاگین نهایت انعطاف پذیری را داراست.
فقط لازم هست در صفحه یک همچین چیزی داشته باشید:

<a href="image1.jpg"><img src="thumb_image1.jpg" alt="" width="72" height="72" /></a>

حالا اگر روی این تصاویر کلیک کنیم، Lightbox فراخوانی می شود و افکت را اجرا می کند.

اسکریپت زیر را هم داخل تگ head قرار دهید:

<script type="text/javascript"><!--
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
// --></script>

به این صفحه بروید و نمونه ی آنچه که اینجا یاد گرفتیم را ببینید :)

]]> http://aliha.ir/2009/01/30/how-to-use-lightbox-jquery-plugin/feed/ 33 چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟! http://aliha.ir/2008/10/08/how-to-creating-menus-with-css/ http://aliha.ir/2008/10/08/how-to-creating-menus-with-css/#comments Wed, 08 Oct 2008 21:09:19 +0000 علیها http://aliha.wordpress.com/?p=500 برای ایجاد منوهای زیرمنودار (منوهای پایین افتادنی) در صفحات وب، راه های مختلفی وجود دارد که هرکدام مزایا و معایب خاص خود را دارند. به طور کلی سه روش برای ایجاد منوهای زیرمنودار وجود دارد:

1. فلش
2. جاوا اسکریپت
3. سی اس اس

ابتدا اجازه بدید هرکدام از این روش ها را بررسی کنیم و ببینیم کدام روش اصولی تر و کاربردی تر می باشد.

1. فلش: لازمه ی استفاده از این روش در مرحله ی اول تسلط کافی بر فلش است و باید کار با فلش را بلد بود تا بتوان منوهای جالب ایجاد نمود. البته نرم افزارهایی مانند “123 flash menu” در این زمینه ارائه شده اند که منوهایی از پیش طراحی شده را در اختیار کاربر قرار میدهند و با استفاده از ابزارهایی که در خود گنجانده اند، امکان ویرایش منوها را به کاربر میدهند. یکی از معایبی که منوهای فلش دارند، ایندکس نشدن محتوای آن ها در موتورهای جستجوگر میباشد که البته اخیرا گوگل این مشکل را برطرف کرده و محتوای فایل های فلش اعم از همین منوها را نیز ایندکس می کند و این مورد تا حدودی مشکلات سئو را برطرف میکند.

2. جاوا اسکریپت: بگذارید یک چیزی را همینجا بگویم! اگر میخواهید منوهای سایتتان با جاوا اسکریپت باشد، تاکید می کنم که اگر می توانید، خودتان آن را کدنویسی کنید وگرنه از کدهای آماده بپرهیزید، چرا که اگر با مشکلی رو به رو شوید، هرگز نمیتوانید مشکلتان را برطرف کنید، مگر اینکه از کسی کمک بگیرید!

3. سی اس اس: در این بین، تنها منوهایی که با استفاده از سی اس اس ایجاد میشوند، از نظر سئو و ایندکس شدن کاملا بهینه و اصولی می باشند! چرا که محتوای این منوها در پرونده ی اکس اچ تی ام ال موجود است. و البته ایجاد و کدنویسی آن در مقایسه با فلش و جاوا اسکریپت، به نسبت راحت تر می باشد. اما خب مشکل دیگری که سر راه مان قرار می گیرد، عدم پشتیبانی مرورگری مثل IE (نسخه ی 6 به پایین) از این روش است! در ادامه توضیحات بیشتری در این زمینه می دهم و البته راه حل این مشکل را هم به زودی و در مقاله ای جداگانه منتشر خواهم کرد!

چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

منوی طرا�ی شده با سی اس اس

خب، چیزهایی که لازم داریم، اینها هستند: یک فایل سی اس اس، یک فایل اکس اچ تی ام ال و یک ویرایشگر متن، مثلا نوت پد ویندوز.
برای ساختن فایل سی اس اس، می توانید یک فایل متنی ایجاد کنید و پسوند آن را به css تغییر دهید و ترجیحا نام فایل را style بگذارید. یعنی در نهایت بشود:

style.css

ساختید فایل رو؟! خب، حالا بریم سراغ کدنویسی…
فایل سی اس اسی رو که ساختید، با کمک یک برنامه ی ویرایشگر متن، باز کنید.
ما باید با کمک لیست ها این منو را طراحی کنیم. فقط کافیست کمی با تگ های ul و li، بازی کنیم. پس در ابتدا یک سلکتور با نام nav می نویسیم و پدینگ و مارجین ِش رو صفر میکنیم و به list-styleش هم مقدار none می دیم:

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

حالا یک اینتر بزنید و برید خط بعدی… اینبار باید به تگ li ای که در nav قرار می گیرد، دستورات زیر را بدهیم:

#nav li {
float: right;
position: relative;
width: 90px;
height: 20px;
background-color: #f6f6f6;
color: #f75801;
font: bold 70% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
direction: rtl;
border: 1px solid #e1e1e1;
text-align: center;
padding-top: 5px;
}

به خاصیت float مقدار right دادیم، چون می خواهیم منو در قسمت راست صفحه و به صورت شناور قرار بگیره.
دوباره اینتر بزنید و برید خط پایین. این دستوری که می خواهیم بنویسیم، برای این هست که وقتی کرسر موس رفت روی عناوین منو، رنگ زمینه اش تغییر کند:

#nav li:hover {
background-color: #f1ff96;
}

باز هم اینتر بزنید. دستورات زیر هم وضعیت ظاهری لینک ها را تعیین می کنند:

#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
color: #868584;
}
#nav a:hover, #nav a:active {
display: block;
text-decoration: none;
color: #f75801;
}

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

#nav ul {
display: none;
position: absolute;
padding-top: 7px;
}

خاصیت display که با none مقداردهی شده، درواقع دستور میدهد که قسمت زیر منو، مخفی و غیر قابل نمایش بماند!
اینتر بزنید باز هم! خب، حالا باید کمی ظاهر زیرمنو را سبک دهی کنیم. به زمینه و حاشیه اش رنگی بدهیم و موقعیتش را جمع و جور کنیم:

#nav ul li {
float: none;
border: 1px solid #dded6f;
background-color: #f1ff96;
font-size: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
}

اینتر فراموش نشه! باز هم با دستور زیر، رنگ زمینه ی گزینه های زیر منو ها را در زمان حرکت کرسر موس روی آن ها، تعیین می کنیم:

#nav ul li:hover {
background-color: #f9ffcf;
}

آخرین اینتر را بزنید که می خواهیم یک کار قشنگ بکنیم:) یادتان که هست چند خط بالاتر، دستور مخفی کردن زیرمنوها را دادیم؟! حالا باید دستور بدهیم که هر زمان کرسر موس روی یکی از عناوین منو رفت، بی چون و چرا زیرمنوی آن نمایش یابد! فقط کافیست بگوییم:

#nav li:hover ul {
display: block;
}

زیبا نیست؟! خب، فایل سی اس اس تان تکمیل شد. حالا برویم سراغ فایل اکس اچ تی ام ال! خسته که نشدید خدای ناکرده؟!
فایل اکس اچ تی ام ال را بسازید. برای ساختن آن مانند ساختن فایل سی اس اس عمل کنید و نام فایل را بگذارید menu. یعنی باید بشود:

menu.htm یا menu.html

خب. اول کدهای مربوط به هدر را می نویسیم:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>creating menus with CSS | Demo!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

حالا تگ بدنه رو باز می کنیم و لیست مورد نظر رو ایجاد می کنیم و سلکتور nav رو بهش نسبت می دهیم و بعد از اون، عناوین و زیرمنوها رو اضافه می کنیم:

<body>
<ul id="nav">
<li><a href="#">رنگ ها</a>
<ul>
<li><a href="#">آبی</a></li>
<li><a href="#">سبز</a></li>
<li><a href="#">نارنجی</a></li>
</ul>
</li>
<li><a href="#">آموزش ها</a>
<ul>
<li><a href="#">سی اس اس</a></li>
<li><a href="#">پی اچ پی</a></li>
<li><a href="#">جی کوئری</a></li>
</ul>
</li>
</ul>
</body></p>

واضح هست دیگه؟! در اینجا ما یک منو، دو عنوان به نام های “رنگ” و “آموزش ها” و برای هر عنوان، سه زیرمنو داریم. در آخر هم تگ html را ببندید!

پشتیبانی از این روش
همون طور که در ابتدا هم گفتم، این روش در نسخه ها ی 6 و پایین تر ِ مرورگر IE پشتیبانی نمی شود و کار نمی کند! دلیلش هم روشن است. ما برای این کار از خاصیت hover استفاده کرده ایم که این نسخه ها از مرورگر IE (یعنی نسخه های 6 به پایین) خاصیت hover را فقط برای لینک ها می شناسند و برایشان جای تعجب دارد که بخواهید با استفاده از خاصیت hover، مثلا متنی را ظاهر و یا مخفی کنید! اما از IE7 به بعد این مشکل رفع شده و این منویی که ایجاد کردیم به درستی کار خواهد کرد. سعی می کنم به زودی مقاله ای را در این رابطه منتشر کنم و در آن به حل این مشکل پردازم. یعنی این منو بتواند در IE6 و حتی پایین تر هم کار کند!

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

]]> http://aliha.ir/2008/10/08/how-to-creating-menus-with-css/feed/ 30