i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

ایجاد منو برای سایت یا وبلاگ با استفاده از CSS

css-menu

از جمله امکانات مورد نیاز هر سایت یا وبلاگی وجود مجموعه ای از لینک ها به صورت منو جهت هدایت کاربران به صفحات مختلف و بخش های اصلی آن سایت یا وبلاگ است، این سبک منوها به لحاظ ظاهری و اصول فنی معمولا می توانند طیفی از خیلی ساده تا پیشرفته و همراه با جلوه های بصری گوناگون را شامل شوند اما در حالت معمول و برای رفع نیازهای عادی استفاده از کدهای ساده HTML به همراه استایل CSS کافی خواهد بود، اگر چه برای سازگاری بیشتر در کنار کدهای CSS از JavaScript نیز استفاده می شود اما در این آموزش، شیوه ساخت منویی ساده، سبک و در عین حال زیبا و سازگار را خواهیم گفت که می تواند حداقل به عنوان سرآغازی برای طرح های بزرگتر مورد استفاده قرار گیرد، از منوهای CSS می توانید در سربرگ وبلاگ یا سایتتان با هدف زیبا سازی یا تسهیل دسترسی استفاده کنید، برای راحتی و جلوگیری از پیچیده شدن موضوع، آموزش همراه توضیح و مثال آنلاین است.

ایجاد منوهای تعاملی با تصویر گرافیکی و CSS


احتمالا منوهایی را دیده اید که با بردن ماوس روی آنها به رنگ یا حالتی متمایز تغییر می کنند، به این سبک منوها در اصطلاح تعاملی یا Interactive گفته می شود که در وب به دو روش استفاده از یک تصویر گرافیکی به همراه استایل CSS یا استفاده صرف از خاصیت های CSS ساخته می شوند، در گام اول روش استفاده از تصویر گرافیکی به همراه خاصیت های CSS توضیح داده خواهد شد و در قسمت دوم آموزش، روش استفاده صرف از استایل CSS را مرور خواهیم کرد.
ابتدا یک تصویر با ارتفاع 120 پیکسل (که از دو نیمه ی 60 پیکسلی تشکیل شده) در برنامه های گرافیکی مانند فتوشاپ ایجاد می کنیم (عرض تصویر اهمیت چندانی ندارد و می تواند دلخواه باشد، برای آموزش حاضر آن را 60 پیکسل یا کمتر در نظر بگیرید)، از آنجایی که برای ایجاد منوهای تعاملی از خاصیت background-position در CSS با مقادیر متفاوت در حالت عادی و hover استفاده خواهیم کرد، لذا تصویر ما باید در دو نیمه 60 پیکسلی خود (بالا و پائین) دارای دو ویژگی بصری متفاوت باشد تا هنگامی که در حالت فعال قرار می گیرد متمایز به نظر برسد، به عبارت ساده تر یعنی زمانی که نشانه گر ماوس را روی منو می بریم شکل آن بر اساس سلیقه و نیاز ما تغییر کند تا کاربر متوجه شود که این منو در حالت فعال قرار گرفته است، نمونه تصویر اولیه می تواند به شکل زیر باشد:
navbg
پس از آماده سازی و ذخیره تصویر با ابعاد مورد نظر کد زیر را مطابق نیازمان با تعریف لینک ها و استایل CSS سفارشی، در هر قسمت از سایت یا وبلاگ که مناسب بود استفاده می نمائیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد منو با استفاده از تصویر گرافیکی و CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#menu {
    display:block;
    width:400px;
}
#menu ul {
    list-style-type:none;
}
#menu ul li {
    display:inline-block;
    float:right;
    width:100px;
    height:60px;
    margin:2px;
}
#menu a{
    display:inline-block;
    width:100px;
    height:60px;
    background:url(navbg.jpg);
    background-position:top;
    background-color:#666;
    text-align:center;
    color:#FFF;
    line-height:60px;
    text-decoration:none;
    margin-top:4px;
}
#menu a:hover {
    background-position:bottom;
    line-height:60px;
    overflow:hidden;
    background-color:#333;
}
.clear {
    clear:both;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">لینک اول</a>
</li>
<li>
<a href="#">لینک دوم</a>
</li>
<li>
<a href="#">لینک سوم</a>
</li>
</ul>
</div>
<div class="clear"></div>
<hr>
برای ایجاد منوهای تعاملی گرافیکی، از خاصیت background-position با مقادیر متفاوت در حالت عادی و hover استفاده کرده ایم.
</body>
</html>
پیش نمایش
توضیح:
- خاصیت display با مقادیر inline-block و همچنین float:right لینک های ما را در یک ردیف کنار هم قرار می دهند که برای ایجاد منوی افقی ضروری است.
- قسمت مربوط به menu a دربرگیرنده استایل CSS موقعیتی است که لینک منو در حالت عادی قرار دارد.
- قسمت مربوط به menu a:hover دربرگیرنده استایل CSS موقعیتی است که لینک منو در حالت فعال قرار می گیرد، یعنی زمانی که کاربر ماوس را روی لینک منو می برد استایل این قسمت استفاده خواهد شد.
- تگ های ul و li عناصر ایجاد کننده لیست در صفحات وب هستند و به لحاظ ساختاربندی و بهینه سازی برای موتورهای جستجو (SEO) شیوه ای مناسب و توصیه شده جهت ساخت منو محسوب می شوند.
- تغییر تصاویر پس زمینه منو در حالت عادی و فعال با خاصیت background-position و مقادیر آن در CSS صورت می گیرد، به این صورت که در حالت عادی موقعیت تصویر پس زمینه ای که قبلا ساخته ایم در قسمت بالا یا همان top است و در حالت فعال موقعیت تصویر پس زمینه در حالت پائین یا bottom قرار می گیرد.
نکته: برای استفاده از این کد در سایت یا وبلاگ باید دقت کنید که ابتدا تصویر گرافیکی را در سرور سایت یا در یک سرویس میزبان فایل آپلود کرده باشید، سپس باید آدرس URL فایل آپلود شده را در قسمت background:url درج کنید.

ایجاد منوهای تعاملی با خاصیت های CSS


علاوه بر استفاده از تصویر گرافیکی و ترکیب آن با CSS برای ساخت منوهای تعاملی، می توانیم با خاصیت های خود CSS نیز به تنهایی چنین منوهایی را ایجاد کنیم، با به روز شدن امکانات مرورگرهای وب و پشتیبانی از خواص جدید و پیشرفته تر CSS این شیوه به مرور جایگزین استفاده از عناصر گرافیکی در صفحات وب شده و طراحان وب سعی می کنند تا حد امکان کمتر از عناصر گرافیکی نظیر تصاویر در طراحی قالب های خود استفاده کنند، به هر صورت خاصیتی که از آن در ایجاد منوهای ساده مبتنی بر CSS استفاده خواهیم کرد linear-gradient است که در 3 CSS معرفی شده، کاربرد این خاصیت را در ایجاد منو در نمونه کد زیر ملاحظه می کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد منو با استفاده از خاصیت های CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#menu {
    display:block;
    width:400px;
}
#menu ul {
    list-style-type:none;
}
#menu ul li {
    display:inline-block;
    float:right;
    width:100px;
    height:60px;
    margin:2px;
}
#menu a{
    display:inline-block;
    width:100px;
    height:60px;
    background-color:#CCC;
    background-image:linear-gradient(#CCC, #000);
    text-align:center;
    color:#FFF;
    line-height:60px;
    text-decoration:none;
    margin-top:4px;
}
#menu a:hover {
    background-color:#000;
    background-image:linear-gradient(#000, #CCC);    
    line-height:60px;
    overflow:hidden;
}
.clear {
    clear:both;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">لینک اول</a>
</li>
<li>
<a href="#">لینک دوم</a>
</li>
<li>
<a href="#">لینک سوم</a>
</li>
</ul>
</div>
<div class="clear"></div>
<hr>
برای ایجاد منوهای تعاملی مبتنی بر CSS، از خاصیت linear-gradient با مقادیر متفاوت در حالت عادی و hover استفاده کرده ایم.
</body>
</html>
پیش نمایش
تفاوت این دو شیوه در این است که خاصیت linear-gradient در نسخه های قدیمی مرورگرها پشتیبانی  نمی شود هرچند این یک مشکل جدی نیست زیرا تعداد کاربرانی که از نسخه های قدیمی استفاده می کنند هر روز رو به کاهش است، نکته دیگر اینکه با عدم استفاده از تصاویر گرافیکی سرعت بارگذاری صفحات وب بهبود یافته و همچنین با غیرفعال شدن نمایش تصاویر در مرورگر به هر دلیل (به طور مثال توسط کاربر)، تغییری در ظاهر قالب صفحه وب ایجاد نمی شود.
نکته: در نمونه کدهای بالا تگ های کامل یک صفحه وب (متاتگ ها، عنوان صفحه، تگ body و...) به جهت سهولت تست مستقل صفحه وب درج شده که در حین استفاده از آن در قالب سایت یا وبلاگ نیازی به این قسمت های اضافه و احیانا تکرار مجدد آنها نیست و صرف درج قسمت style و منوی ul و li کفایت می کند.
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» ساخت منوی کشویی با تگ ul li و css
» آموزش استفاده از فونت فارسی در وب با CSS
» ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3
» ساخت بلاک شناور عمودی با CSS
» حذف اسکرول افقی (horizontal scroll) با css
commentنظرات (۱۶ یادداشت برای این مطلب ارسال شده است)
نویسنده: elaheh
زمان: ۲۳:۵۱:۰۷ - تاریخ: ۱۳۹۲/۰۲/۲۰
سلام
ممنون از زحماتتون
من به یه مشکل برخوردم
من زیاد تو برنامه نویسی حرفه ای نیستم
شاید سوالی که میپرسم ساده به نظر برسه
ولی وقتی من قسمت float:right رو به float:center تغییر میدم منوها بهم میریزن و تو حالت فعال لینک ها علاوه بر تغییر مطلوبی که میخوایم به سمت بالا هم حرکت میکنن و این اصلا زیبا و خوشایند نیست
برای رفع این مشکل باید چیکار کنم؟
پاسخ: 
خاصیت float مقادیری به عنوان center ندارد، تنها left و right جزء مقادیر استاندارد هستند، اگر می خواهید مکان چینش منو را به فرض در وسط صفحه قرار دهید، باید کل منو را داخل یک بلاک دیگر تعریف کنید و آن بلاک را در وسط صفحه تنظیم نمائید، به فرض در حالت معمول استایل زیر، بلاک div و محتوای آن را در وسط صفحه تنظیم می کند:
<style type="text/css">
.center-block{
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>
<!-- نحوه استفاده -->
<div class="center-block">کد منو</div>
البته این به رفتار (طول، ارتفاع، چینش و...) بلاک های والد (بلاک هایی که در سطح بالاتری از آخرین بلاک هستند) نیز بستگی دارد.
در مورد تغییر حالت لینک در حالت فعال، باید ببینید چه مقادیری برای حالت a و a:hover در استایل های استفاده شده در صفحه وجود دارد (این خاصیت ها به دلیل سراسری بودن از دیگر استایل های یک صفحه تاثیر می گیرند)، به فرض اگر فونت در حالت hover چند پیکسل بزرگتر شود، نتیجه به این صورتی که گفتید خواهد بود، باید خاصیت های مربوط به طول و ارتفاع در هر دو حالت به یک نحو باشند.
نویسنده: پرویز
زمان: ۱۹:۴۹:۱۱ - تاریخ: ۱۳۹۲/۰۷/۲۳
سلام, بخشید موارد زیر را به صورت کامل توضیح دهید؟ ضمنا عید بزرگ قربان را به شما و خانواده تان محترمتان تبریک می گویم.
1-line-heigh
2-margin
3-list-style-type
4-overflow
5-display
پاسخ: 
سپاس فراوان.
لطفا از طرح سوالات کلی خودداری کنید، موارد مطرح شده هر کدام در مباحثی جداگانه و در بخش CSS (و همچنین در وب) آموزش داده شده اند.
نویسنده: مجید
زمان: ۲۱:۱۰:۵۰ - تاریخ: ۱۳۹۲/۱۲/۰۸
سلام
خیلی عالیه
خیلی سایت کاملیه
مثال های خوبی دارید
با تشکر
نویسنده: پرواز
زمان: ۰۱:۴۳:۵۰ - تاریخ: ۱۳۹۳/۰۲/۰۹
سلام
خواستم بدونم می شه مطالب موجود تو یه موضوع وبلاگ رو با کد لیست کرد بیشتر توضیح میدم فرض کنید یه موضوعی به نام سلامت داریم و تو این موضوع 5 مطلب هست حالا میشه عناوین این 5 پست را از موضوع مورد نظر گرفت و یه جایی نشون داد یعنی چیزی شبیه کلیک کردن رو موضوعات سایت ولی با این تفاوت که اول صفحه نمایش داده بشن به فرض مثال مطالب یه موضوعی تو یه قسمت از صفحه نمایش داده بشن
مثلا یه قسمتی تو سایت قرار بدیم که جدیدترین مطالب علمی رو نشون بده و ...
با سپاس
پاسخ: 
این نوع موارد بستگی به قابلیت های ارائه شده توسط سرویس وبلاگی دارد، البته اکثر سرویس ها قابلیت های زیادی در این زمینه ارائه نمی کنند، اما برای اطمینان باید به راهنمای تگ های اختصاصی (که معمولا در بخش ویرایش قالب) قرار دارد مراجعه کنید، امکانات وبلاگ ها بر اساس اصول تگ های اختصاصی هر سرویس تعریف می شود.
نویسنده: میثم
زمان: ۰۰:۳۸:۱۳ - تاریخ: ۱۳۹۳/۰۳/۲۳
سلام
خسته نباشید
عذر میخوام جای بهتری برای مطرح کردن پیدا نکردم.
با این حال چون مرتبط با css بود اینجا مطرح میکنم.
چطورمیشه با css یک callout ساخت؟
منظور از callout هم همون اشکال مستطیلی هستند که روی یکی از border هاش شکل یه مثلث داره.
و به عنوان "توصیحات بیشتر یا نوشته راهنما" کاربرد داره.
(البته این اشکال مستطیلی گاهی بیضی هستند)
مثل بخش setting شکل زیر:
http://t1.gstatic.com/images?q=tbn:ANd9GcQhFIXBuQY6lieLquBE1mermH4AMNyYcyVy85ILRhZQHKb4GjQthQ
همچنین چطور میشه با css مثلت یا لوذی ساخت.
پاسخ: 
لطفا به آدرس زیر مراجعه کنید:
http://cssdeck.com/labs/bv45bh6p
همچنین با جستجوی عبارت "CSS callout" نمونه های زیادی در وب خواهید یافت.
نویسنده: میثم
زمان: ۰۹:۵۵:۱۱ - تاریخ: ۱۳۹۳/۰۳/۲۵
سلام
بله این سایت رو قبلا دیدم
از این کدها هم قبلا استفاده کردم
منتها بخشیش رو متوجه نشدم
اون قسمتی که ::before داره رو میشه توضیح بدید؟
مرسی.
پاسخ: 
before:: یک selector در CSS3 است که محتوایی را قبل از محتوای موجود در تگ هدف قرار می دهد (قبل در اینجا الزاما به این معنی نیست که حتما باید پیش از محتوای موجود نمایش داده شود، این بستگی به استایل استفاده شده دارد)، این محتوا می تواند به صورت متنی یا به صورت استایل باشد، به طور مثال قسمت callout.top::before در سایت مذکور برای ایجاد مثلث کوچک در زیر بلاک با کلاس callout top است.
نویسنده: ضحی
زمان: ۰۰:۲۵:۵۳ - تاریخ: ۱۳۹۳/۰۴/۱۷
سلام خسته نباشید. من بارها از مطالب سایتتون استفاده کردم. اما الان یه سوال برام پیش اومده. منویی که توی این آدرس
http://www.doctorsalamat.com/experts.aspx
استفاده شده با css طراحی شده؟
اصلا چه جوری میشه همچین منویی ایجاد کرد؟
با توجه به اینکه من نیمه مبتدی هستم...
ممنون
پاسخ: 
اینگونه منوها معمولا با استفاده از جاوا اسکریپت یا جی کئوری + CSS ساخته می شوند، نمونه های زیادی در وب به صورت آماده وجود دارد که باید (به فارسی و انگلیسی) جستجو کنید.
نویسنده: محسن
زمان: ۰۹:۲۳:۱۴ - تاریخ: ۱۳۹۳/۰۵/۱۵
سلام خسته نباشید
یه سوال علت اورن کد حذف اسکرول عمودی
overflow:hidden; 
تو کد منو چیه
من این کدا برداشتم تغییری نکرد
پاسخ: 
این خاصیت ضرری ندارد! فایده آن این است که به فرض اگر متن منو خیلی زیاد باشد، میزان اضافه مخفی می شود و موجب به هم ریخته شدن منو نمی شود.
نویسنده: فرزاد
زمان: ۱۶:۳۴:۳۶ - تاریخ: ۱۳۹۳/۱۰/۰۲
سلام ضمن تشکر از شما که این نکات آموزنده رو در سایتتون قراردادین , من برای منوها در اکسپلورر سوال داشتم چون فایل ie6 الی ie9 رو از سایت
http://www.iecss.com
دانلود و در صفحه جایگذاری کردم و مانند سورس برنامتون هم قرار دادم
همین مثال شما رو در اکسپلورر منوهاشو باز نمیکنه ولی در google chrome باز میکنه
فکر میکنم یک مشکل از کمبود کد باشه اگر ممکنه کد اکسپلورر برای همین مثال منو ها در سایت بذارین تا برای همه اکسپلوررها کامل نمایش بده
پاسخ: 
دوست گرامی در این مثال منوی بازشو وجود ندارد! این آموزش صرفا یک منوی ساده و سبک با CSS را شامل می شود که در تمام مرورگرها به خوبی عمل می کند، لطفا اگر آموزش خاصی مد نظرتان است، به همان مطلب اشاره کنید.
نویسنده: داوود
زمان: ۱۱:۵۱:۲۱ - تاریخ: ۱۳۹۴/۰۷/۰۶
سلام آقای مهندس، وقتتون بخیر دوست عزیزم.
استاد من اومدم و برای اینکه خودم بدون نگاه کردن به کد شما، بتونیم یه همچین منویی رو طراحی کنم (البته بدون استفاده از عکس background ی که گذاشته بودین)؛ الان که نگاه می کنم میبینم کد من کوتاه تر هستش؛ میشه یه نگاه کوچولو بندازین و بگین آیا موارد مورد نیاز و استانداردها رو رعایت کردم یا نه؟؟
body{
direction:rtl;
font-family:tahoma;
font-size:11px;
padding:0 2px;
}
#menu{
width:400px;
min-height:100px;
}
#menu ul{
list-style:none;
float:right;
}
#menu ul li{
text-align:center;
float:right;
background-color:#333333;
margin:0px 2px;
}
#menu a{
padding:23px 30px;
text-decoration:none;
color:#fff;
display:inline-block;
}
#menu a:hover{
background-color:#999999;
}
نکته: من میتونستم از Line-height استفاده کنم و اتفاقا راحت تر هم بودم، ولی اگه یادتون باشه میگن Line-height به تگ والد وابسته ست فکر کنم و یا به اندازه فونت و اگه در طول یک پروژه یک فونت یا همون تگ والد تغییر اندازه پیدا کنه ، ممکنه تو طراحی ما هم مشکل ساز بشه. نمیدونم تا چه حد درست گفتم خدمتتون. امکانش هست بگید آیا کد من هم خوبه یا نه؟؟
ممنونم از لطفتون دوست عزیزم.
پاسخ: 
- همان طور که قبلا گفتیم برای طراحی منو و... هیچ استاندارد خاصی وجود ندارد که بخواهیم کد شما را در آن چارچوب بررسی کنیم! در واقع CSS یک سری خاصیت ها و قابلیت های استانداردی دارد که با آن می توان به عناصر وب شکل و استایل بخشید، اینکه با چه روشی به هدف نهایی (در اینجا ایجاد منویی که به درستی کار کند!) دست پیدا کنید، به خودی خود چندان از استاندارد پیروی نمی کند (روش های خاصی به دلایلی مانند رعایت SEO، منعطف بودن، ساده بودن و... به مرور مورد اقبال بیشتر طراحان قرار گرفته اند که طراحی منو با استفاده از ul li یکی از این روش ها است، اما این موضوع با استاندارد بودن متفاوت است).
- در مورد استفاده از line-height هم قبلا توضیح داده شد، دو انتخاب در این مورد وجود دارد:
1- اینکه line-height را به صورت کلی در تگ body یا یک تگ سطح بالا تعریف کنید تا سایر عناصر از آن پیروی کنند (به تجربه این روش معمولا کافی و کاربردی نیست!).
2- اینکه برای هر قسمت، متناسب با نیاز همان قسمت line-height تعریف کنید، البته با رعایت محدود بودن تعداد متفاوت خاصیت های line-height (جهت حفظ یکپارچگی و در عین حال منعطف بودن کار)، در این حالت با هر تغییر کلی اگر هم نیاز به ایجاد تغییراتی در line-height ها باشد، به راحتی قابل اعمال است و در عمل هیچ مشکلی از این بابت معمولا پیش نمی آید!
نویسنده: داوود
زمان: ۰۷:۵۸:۴۵ - تاریخ: ۱۳۹۴/۰۷/۰۹
سلام و صبح زیباتون بخیر باشه؛
آقای مهندس یه سوالی داشتم ازتون عزیز؛ ببینید من سوال آقا میثم رو تو چند تا پست بالاتر دیدم و رفتم به صفحه ای که شما مرقوم کرده و گذاشته بودین. منظورم آدرس:
http://cssdeck.com/labs/bv45bh6p
حالا اگه دعوام نمیکنید بدون اینکه به سورس نگاه کنم رفتم و خودم کدش رو نوشتم؛ اینهم لینک کد:
http://jsfiddle.net/0k96m7uk/
راستش رو بخواین فقط کد مثلث رو تقلب کردم و سایر قسمتهاش رو خودم نوشتم. حالا بعدش که اومدم و سوالای بعدی رو خوندم دیدم انگاری طراح اون کدی که شما فرستاده بودین اومده از after هم استفاده کرده. به احتمال زیاد کسی که اون رو طراحی کرده از من واردتر و با تجربه تر بوده. الان فلسفه وجودی before چیه وقتی که میشه بدون این خاصیت، به شکل مورد نظر دست پیدا کرد؟؟ کلا میشه یه کوچولو راجع به این خاصیت توضیحی بدین.
پاورقی: البته علت اینکه من سعی کردم بدون این خاصیت به شکل مورد نظر دست پیدا کنم، بلد نبودن کامل نحوه استفاده از این خاصیت بود، چون طرز کارش رو فراموش کرده بودم یه خورده ای. :)
پاسخ: 
در قسمت پاسخ یادداشت های این مطلب در مورد before صحبت شده، اما اینکه چرا از این خاصیت استفاده کنیم بستگی به نیاز طراحی دارد، در عمل فرق خاصی بین روش کار شما و مثال وجود ندارد (نتیجه مهم است، البته با رعایت مختصر نویسی!)، اما دقت کنید که با before می توان عبارت متنی نیز قبل از بلاک ها درج و تکرار کرد که این با استایل نویسی ساده ممکن نیست.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore
نویسنده: داوود
زمان: ۰۸:۴۰:۴۳ - تاریخ: ۱۳۹۴/۰۷/۰۹
سلام مجدد آقای مهندس،
آقای مهندس در خصوص سوال قبلیم که یه مثلث کوچیک ایجاد کردم برای اینکه در زیر کادر اصلی قرار بگیره، طبق کدی که در زیر براتون میذارم اگه ما بخوایم در هر حالتی که اندازه مستطیل یا box اصلیمون بزرگ یا کوچیک میشه، اون مثلث دقیقا تو وسط بیفته از چه ترفندی باید استفاده کنیم؟؟ علیرغم اینکه این مثلث رو والد box کردم، فکر کردم با margin:0 auto شاید بشه به خواسته م برسم ولی انگاری نمیشه. البته در حالتی عرض box افزایش پیدا میکنه، راستش رو بخواین خیلی محسوس نیست که در وسط قرار نگرفته، ولی برای اینکه کارم تمیز باشه سوال کردم. ممنونم ازتون.
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:50px;
background-color:#dddfd7;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bolder;
font-size:12px;
}
#box{
position:relative;
width:auto;
height:15px;
background-color:#4d6476;
text-align:center;
padding:15px;
border-radius:5px;
display:inline;
}
#box span{
color:#ffffff;
}
#triangle-down{
position:absolute;
width:0;
height:0;
border-left:6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #4d6476;
top:100%;
left:40%;
}
</style>
</head>
<body>
<div id="box"><span>DemoDemoDemoDemoDemoDemoDemoDemo</span>
<div id="triangle-down"></div>
</div>
</body>
پاسخ: 
در قسمت triangle-down مقدار left را %50 قرار دهید! :-)
نویسنده: داوود
زمان: ۱۲:۳۸:۲۴ - تاریخ: ۱۳۹۴/۰۷/۱۹
سلام و وقتتون بخیر استاد گرامی؛
استاد اگه دعوام نمیکنید و نمیگید چرا بقول این بازیگرها فلاش بک میزنم به گذشته، در خصوص نمونه کدی که برای آقا میثم مرقوم فرموده بودین، میخواستم ببینم چرا طراح اون کد نیومده و این دو تا سلکتورها رو یکی بکنه دیگه!! آیا بدلیل اینکه میخواسته حرفه ای کار کنه اینجوری کرده؟ ببینید اینجا رو منظورم هستش.
div.callout {
height: 60px;
width: 200px;
float: left;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 50px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
در صورتی که اگه الان این دو تا رو تبدیل به یکی بکنیم، دقیقا خروجی یکی هست که خوب منطقی هم هستش. ببخشید.
پاسخ: 
ظاهرا دلیل خاصی برای این حالت وجود ندارد! شاید سهوا یا طی ویرایش های صورت گرفته در نهایت به این شکل تبدیل شده! بعضا در نوشتن اینگونه کدها که صرفا جنبه نمونه و آموزشی دارند دقت لازم در جزئیات صورت نمی گیرد و بیشتر نتیجه نهایی مد نظر است!
نویسنده: محسن
زمان: ۲۲:۳۷:۵۳ - تاریخ: ۱۳۹۴/۱۲/۱۷
سلام استاد
من تو این قالب چطور می تونم تمامی گزینه های منو رو به صورت یک سطر در داخل بلاک عنوان (header.) قرار بدم؟
حذف شد
پاسخ: 
با توجه به بررسی اجمالی، کافی است مقادیر width را برای بلاک با آی دی menu افزایش دهید!
نویسنده: محسن
زمان: ۲۰:۵۳:۴۱ - تاریخ: ۱۳۹۴/۱۲/۲۳
سلام استاد
مقادیر خاصیت background-position رو میشه نام ببرید
پاسخ: 
لطفا به آدرس زیر مراجعه کنید:
https://developer.mozilla.org/samples/cssref/background-position/
paged صفحه 1 از 2




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

8 × 8
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)