شنبه ۲۰ خرداد ۱۴۰۲

Saturday, June 10, 2023 GMT +3:30

نحوه تنظیم لیست با تگ ul li در CSS

css-ul-li-list

همان طور که در مطالب قبل از بخش آموزش مقدماتی CSS گفتیم، خاصیت های CSS قابلیت های بسیار خوبی برای سفارشی سازی ظاهر و شکل نمایش تگ های HTML در صفحات وب در اختیارمان قرار می دهند تا حدی که امروزه دیگر کسی به طراحی وب بدون استفاده از CSS فکر نمی کند، در ادامه آموزش ها این بار می خواهیم نحوه تنظیم شکل ظاهری تگ های ul و li که مربوط به ایجاد لیست در صفحات وب هستند را بررسی کنیم، یادآور می شویم که تگ ul و li برای ایجاد منوهای استاندارد و باب طبع موتورهای جستجو در سایت ها و وبلاگ ها و همچنین ایجاد نقشه ی HTML (بدون استفاده از XML) سایت کاربرد فراوان دارند.

ساختار لیست با تگ ul و li در HTML


قبل از اینکه به نحوه تنظیم تگ های ul و li با استایل CSS بپردازیم بد نیست نگاهی اجمالی داشته باشیم به نحوه استفاده از دو تگ ul و li در صفحات HTML که برای ایجاد ساختار لیست با زیر مجموعه به صورت درختی کاربرد دارند، مثال زیر نحوه چیدمان صحیح تگ ul و li را به صورت تو در تو نمایش می دهد:
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul>
</li></ul>
</li>
</ul>
توضیح:
- متال بالا منوی درختی از لیست های فرضی ترسیم می کند که در آن ابتدا یک لیست اصلی به عنوان بالاترین آیتم، سپس یک لیست اصلی دیگر در ادامه آن با دو لیست زیرمجموعه نمایش داده می شود.
- باید به نحوه چینش تو در توی تگ های ul و li دقت داشته باشیم، کوچکترین اشتباه در نحوه چینش صحیح تگ های ul و li ممکن است باعث نامعتبر شدن کدنویسی از لحاظ سرویس های اعتبار سنجی مانند validator.w3.org شود که از نظر سئو (SEO یا بهینه سازی صفحات وب برای موتورهای جستجو) فاکتوری منفی است.

تنظیم تگ ul با استایل CSS


تگ ul به عنوان تگ اصلی ایجاد لیست در صفحات وب معمولا در حالت پیش فرض به همراه نقطه توپر (نقطه پر رنگ در سمت راست یا چپ) نمایش داده می شود که این موضوع می تواند ظاهر کار را در طراحی وب تحت تاثیر قرار دهد، خوشبختانه مانند بسیاری از تگ های HTML تگ ul نیز به خوبی خاصیت های CSS را می پذیرد که در مثال زیر برخی از این ویژگی ها را بر روی آن اعمال کرده ایم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظيم تگ ul با استايل CSS</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
ul{
    list-style:none;
    list-style-image:url(list-item-image.jpg);
    list-style-position:outside;
}
</style>
</head>
<body>
<ul>
<li>ليست اصلي بدون زير مجموعه</li>
<li>
ليست اصلي با زير مجموعه
<ul><li>ليست فرعي و زير مجموعه اول
<ul><li>ليست فرعي و زير مجموعه دوم</li></ul>
</li></ul>
</li>
</ul>
</body>
</html>
برای مشاهده پیش نمایش آنلاین لطفا به انتهای این آموزش مراجعه کنید.
توضیح:
- خاصیت list-style شکل نمایش علامت مربوط به آیتم های لیست را تعیین می کند، مقادیر زیادی را می توانیم برای list-style در نظر بگیریم که در زیر فهرست وار برخی از مهم ترین و پرکاربردترین آنها را بررسی می کنیم:
inside: برای ایجاد نقطه هایی رو به داخل لیست (در برخی مرورگرها پشتیبانی می شود).
outside: ایجاد نقطه رو به بیرون لیست (در برخی مرورگرها پشتیبانی می شود).
circle: ایجاد نقطه های توخالی و گرد برای آیتم های لیست.
decimal: ایجاد آیتم های لیست به صورت شمارشی و زیر مجموعه بدون صفر (1، 2، 3 و...).
decimal-leading-zero: ایجاد آیتم های لیست به صورت شمارشی و زیرمجموعه ای به صورت اعداد به همراه صفر (01، 02، 03 و...).
square: ایجاد مربع های کوچک برای آیتم های لیست.
none: نمایش آیتم های لیست بدون هیچ گونه علامتی.
نکته: به جای list-style از list-style-type نیز استفاده می شود.
- خاصیت list-style-image برای تعریف یک تصویر به جای علامت های نقطه، مربع و... در آیتم های لیست کاربرد دارد که مقادیر آن با آدرس URL (نسبی یا مطلق) تصویر تکمیل می شود.
- خاصیت list-style-position نیز موقعیت آیتم ها را مشخص می کند، این خاصیت می تواند دو مقدار outside و inside داشته باشد.

تنظیم تگ li با استایل CSS


مشابه تگ ul تنظیمات بالا بر روی تگ li نیز قابل اعمال است، البته چون تگ li خود زیر مجموعه ul محسوب می شود اگر هم استایلی برای آن تنظیم نکنیم برخی از ویژگی های آن از خاصیت های ul پیروی می کنند، اما در صورت تنظیم استایل برای تگ li تنظیمات مشابه با قسمت ul نادیده گرفته شده و با خاصیت های اختصاصی جایگزین می شوند، در مثال زیر تکمیل شده کد بالا به همراه امکان پیش نمایش آنلاین جهت تست و بررسی درج شده است:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظيم تگ ul و li با استايل CSS</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
ul{
    list-style:none;
    list-style-image:url(list-item-ul.png);
    list-style-position:inside;
}
.li-1{
    list-style:none;
    list-style-image:url(list-item-ul.png);
    list-style-position:inside;
    color: #c00;
}
.li-2{
    list-style:none;
    list-style-image:url(list-item-li.png);
    list-style-position:inside;
    color: #c08;
}
</style>
</head>
<body>
<ul>
<li class="li-1">ليست اصلي بدون زير مجموعه</li>
<li class="li-1">
ليست اصلي با زير مجموعه
<ul><li class="li-2">ليست فرعي و زير مجموعه اول
<ul><li class="li-2">ليست فرعي و زير مجموعه دوم</li></ul>
</li></ul>
</li>
</ul>
<hr>
در اين نمونه کد نحوه چينش صحيح تگ ul و li به صورت تو در تو و کاربرد کلاس CSS براي اعمال استايل ظاهري به تگ هاي HTML مشخص شده است.
</body>
</html>
پیش نمایش آنلاین
با دقت در پیش نمایش آنلاین نمونه کد هنگامی که برای تگ li ویژگی هایی تعریف می کنیم تگ ul نیز از آن پیروی می کند، در واقع تگ ul به تنهایی نمود ظاهری ندارد و آیتم های لیست نهایتا به صورت li نشان داده می شوند و ul صرفا برای تنظیم تو در توی آیتم ها کاربرد دارد.
در اینجا از دو کلاس فرضی li-1 و li-2 برای آیتم های سطح یک و سطح دو استفاده کرده ایم که پی بردن به نحوه تنظیم صحیح آنها نیاز به اندکی دقت و توجه به ترتیب چینش ها دارد.
نکته: ویژگی های قابل اعمال بر تگ های ul و li به موارد گفته شده محدود نمی شود، بر حسب نیاز در پروژه های طراحی وب می توانیم از خاصیت های دیگر از جمله padding و margin نیز استفاده کنیم.
دسته بندی: آموزش مقدماتی » CSS
برچسب ها: CSS
قبلی »
« بعدی
related مطالب بیشتر:
مقدمه ای بر CSS و استایل دهی صفحات وب
کار با ویژگی margin و padding در CSS
نحوه تنظیم استایل لینک (Link) در CSS
کاربرد خاصیت height و width در CSS
خاصیت Background و ویژگی های آن در CSS
دیدگاه
more ۳۷ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
داوود
۱۹:۴۳ ۱۳۹۴/۰۴/۲۴
سلام آقای مهندس، عصرتون بخیر باشه.
استاد من یه منو طراحی کردم امروز. میخواستم ببینم امکانش هست یه نگاه کوچولو بکنین و ببینین آیا درست انجام دادم یا خیر؟؟ البته hover و focus رو هنوز درست نکردم و فقط بخش اولیه ش رو انجام دادم. امکانش هست تایید و یا موارد خطا رو بهم گوشزد کنین، چون خودم احساس می کنم درست و خوب نوشتم ولی بازم میخوام نظر استادانه شما رو بدونم.
<style type="text/css">
*{
margin:0;
padding:0;
}

body{
width:auto;
color:white;
padding:20px;
}

ul#menu{
height:40px;
list-style:none;
}

ul#menu li a{
line-height:40px;
text-decoration:none;
float:left;
text-align:center;
border:#eeeeee 2px solid;
border-top-left-radius:8px;
border-top-right-radius:8px;
background-color:#eeeeee;
margin:0 3px;
padding:0 8px;
}
</style>
</head>
<ul id="menu" >
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5 link5</a></li>
</ul>
اصولا به این نوع سوالات پاسخ خاصی نمی توان داد، چون هر منویی با توجه به هدف و شرایط استفاده، ممکن است نیاز به خاصیت های متفاوتی داشته باشد و رویه ثابتی برای همه حالت ها وجود ندارد، صرفا می توان گفت به لحاظ کدنویسی ایراد خاصی در این منو وجود ندارد!
داوود
۱۳:۵۵ ۱۳۹۴/۰۵/۱۱
سلام آقای مهندس؛
وقتتون بخیر؛ خوشحالم که دوباره برگشتین و راه اندازی و جابجایی سرور رو هم که به سلامتی انجام شد بهتون تبریک میگم.
آقای مهندس من داشتم یه منوی افقی طراحی میکردم که به مرور براش زیر منو و غیره بذارم. ببینید الان در همین مرحله وقتی که Inspect می کنم؛ به غیر از منوی اولی (خبر اول) روی بقیه که میرم، انگاری یه فاصله کوچولو از سمت راستشون دارن و این قضیه داره اذیت میکنه؛ آخه چرا تو خونه اولی من همچین فاصله ای رو از سمت راست ندارم ولی تو منوهای بعدی دارم؟؟. کد رو براتون میذارم، امیدوارم که منظورم واضح باشه، اگه نبود بفرمایین تا یه عکس بگیرم و بفرستم براتون.
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
	margin:0;
	padding:0;
}	
body{
	color:black;
	padding:20px;
	height:600px;
}
#wrapper{
    width:960px;
	padding:50px;
	margin:0 auto;
}	
ul#menu{
 	border:1px solid black;
	list-style:none;
}
ul#menu li{
    width:120px;
	display:inline-block;
	border-left:1px solid black;
}
ul#menu li a{ 	
	text-decoration:none;
	line-height:50px;
	display:block;	
	text-align:center;
}
ul#menu li a:hover{  
}
ul#menu li:last-child{
}
</style>
</head> 
 <body>
	<div id="wrapper">
		<ul id="menu">
			 <li><a href="#">خبر اول</a></li>
			 <li><a href="#">خبر دوم</a></li>
			 <li><a href="#">خبر سوم</a></li>
    	</ul>
  </div>
</body>
</html>
مشکل به خاطر محاسبه فضای خالی به عنوان margin است، دو راه برای حل این مشکل وجود دارد:
- فضای خالی بین تگ های li را حذف کنید (تگ ها به صورت خطی و بدون فاصله یا line break باشند).
- با استفاده از علامت comment در HTML فضای خالی را از پردازش مرورگر حذف کنید، مثال:
<ul id="menu"><!--
    --><li><a href="#">خبر اول</a></li><!--
    --><li><a href="#">خبر دوم</a></li><!--
    --><li><a href="#">خبر سوم</a></li><!--
--></ul>
داوود
۱۹:۴۷ ۱۳۹۴/۰۵/۱۱
سلام مجدد آقای مهندس؛ خیلی خیلی ممنونم بخاطر تسلط بالای شما به مسائل مورد نظر.
فقط آقای مهندس منظورتون رو از محاسبه فضای خالی درک نمی کنم! مگه فضای خالی یی وجود داره آخه؟؟
ضمنا میشه برای این نمونه ای هم که فرمودین یه مثال بزنید:
"فضای خالی بین تگ های li را حذف کنید (تگ ها به صورت خطی و بدون فاصله یا line break باشند)".
اونوقت با این راه حلی که خدمتتون ارائه دادم و درست شد، آیا موافق هستین؟ این روش هم روش خوبیه؟؟ چون امروز بعد از اینکه سوالم رو فرستادم یه خورده دیگه باهاش ور رفتم و اینجوری درست شد:
ul#menu li{
	width:90px;
	float:right;
	border-left:1px solid black;
}
منظور همان space های (مرئی) و خط شکست (نامرئی) است که باعث فرمت گرفتن کدنویسی شما در ویرایشگرها می شود، برای از بین بردن این خط شکست می توانید علاوه بر روش توضیح داده شده، به حالت زیر نیز کدها را بنویسید:
<li><a href="#">خبر اول</a></li><li><a href="#">خبر دوم</a></li><li><a href="#">خبر سوم</a></li>
راه حل شما نیز در صورتی که در مرورگرهای مختلف تست کرده باشید، هیچ ایراد خاصی ندارد، چون هدف نهایی در CSS حالت visual یا دیداری است و اینکه با چه کدهایی به این هدف دست پیدا کنیم اهمیت ذاتی ندارد (البته قاعدتا بر طبق اصول کلی کدنویسی هر چه کمتر و خوانا تر باشد، بهتر است).
داوود
۰۹:۵۹ ۱۳۹۴/۰۵/۱۲
سلام و صبح بخیر آقای مهندس،
عذر میخوام از ایجاد مزاحمتم. با سوال امروزم در خدمتتون هستم.
ببینید آقای مهندس، تو این لینک:
http://jsfiddle.net/e5dndzvd
من ادامه منوی قبلیم رو دارم کامل می کنم. تنها مشکلی که الان باهاش دارم و گیر کردم، اینه که زیرمنو (که میخوام عمودی هم باشه) رو چجوری بیارم زیر منوی مثلا خبر دوم؟؟!!
البته منطق کار رو می دونم ها، مثلا باید زیرمنو رو از flow صفحه خارج کرده و با top بیارمش دقیقا منطبق با خط افقی و پایین منوی اصلی و بزارم باشه، و وقتی که ماوس رفت روی منوی اصلی و hover شد، این زیر منو از حالت hidden و یا disable به حالت آشکار یا فعال دربیاد.
ولی همین رو نمیدونم چجوری باید پیاده سازیش کنم.
پاورقی:
هر چند سعی کردم سوالم شامل بند 3 (عدم انتشار) نباشه ولی ممکنه شامل این بند بشه چون کدها یه خورده ای طولانی هستش.
اگه شامل این بند هستش، جهت راحتی و عدم مزاحمت برای شما لطفا بهم پاسخ ندین که مزاحم وقتتون نباشم. تا همینجاش هم حسابی ممنونتونم.
بحث طراحی منو به شیوه کاربردی جزئیات زیادی دارد و کوچکترین اشتباه می تواند باعث از کار افتادن منو شود، چندین نمونه آموزش در این رابطه (در بخش کاربردی سایت) وجود دارد، لطفا به این مطالب رجوع کنید (به راحتی قابل الگوبرداری است).
داوود
۱۹:۱۲ ۱۳۹۴/۰۵/۱۵
سلام آقای مهندس، عصرتون بخیر، ممنونم ازتون که بدون تعارف پاسخم رو میدین و جاهایی که نیاز به مطالعه بیشتر داره و یا اینکه یه خورده همراه با ریزه کاری هستش رو به مطالعه بیشتر واگذار می کنین! اینجوری من هم راحت ترم در طرح سوالم و خیالم راحت تره که بخاطر من زحمت بیش از اندازه ای رو متحمل نمیشین. آقای مهندس علت اینکه من از کدهای شما استفاده نمی کنم راستش رو بخواین این هستش که میخوام خودم یاد بگیرم. هر چند شاید حرف شما هم کاملا در نقش استاد و معلم من درست باشه.
در همین ارتباط اگه این شبه کد هم نیاز به جزئیات و یا خوب نوشتم میشه یه نگاه بکنید: ببنید من میخوام وقتی کاربر روی آیتم مورد نظر رفت یه حاشیه رنگی کوچولویی از سمت راست نمایان بشه. البته خودم سعی کردم بنویسم ولی وقتی که روی آیتم میره، نوشته های آیتم یه خورده ای میرن جلوتر که این جالب نیستش. تو ذهنم اومد که بیام و برای a:hover یک width تعریف کنم ولی گفتم شاید استاندارد نباشه. بهرحال اگه دیدین کد زیاد نیست و درکش راحته یه راهنمایی کوچولو بکنید، اگه نه که میرم و باز بیشتر میخونم.
لینک کد اجرای منوی مورد نظر:
http://jsfiddle.net/o3nrdk82/
اغلب راه حل ها در CSS بسته به شرایط در خاصیت های ساده و پرکاربرد آن وجود دارد، به طور مثال در مورد مشکل شما با ویرایش قسمت زیر و کاهش padding، افزایش عرض عنصر در هنگام hover رفع خواهد شد:
ul#menu li a:hover{  
  border-right:5px solid red;
  padding-right:1px;  
}
نکته: باید توجه کنید که تنظیم border به افزایش عرض عنصر منجر می شود، لذا باید راهی پیدا کنید که به همان مقدار عرض کاهش داده شود.
داوود
۰۸:۰۷ ۱۳۹۴/۰۵/۱۹
سلام آقای مهندس، صبحتون بخیر، مشکل حل شد. احسنت. البته میدونستم که عرض border به عرض عنصر اضافه میشه و اومدم که از Outline-border استفاده کنم ولی دیدم انگاری این property خاصیت اینکه فقط یه سمت رو انتخاب کنیم نداره.
الف) آقای مهندس الان مثلا وقتی که میخوایم وارد gmail بشیم و چند تا ایمیل در صفحه نخست ثبت شده (منظورم همون صفحه ای ست که گوگل نشون میده تا تعیین کنیم با کدوم ایمیل میخوایم login شیم)، تا زمانی که کلیک نکنیم روی گزینه ها، خط آبی حاشیه سمت چپ نمایان نمیشه، برای این حالت، باید گزینه :
a:active رو فعال کرده باشن دیگه درست میگم؟؟ یا از jquery میان و استفاده می کنن؟؟
ب) آقای مهندس مگه ما فقط یه حالت انتخاب برای تگ a نداریم؟ چرا تو این صفحه w3schools با این لینک: http://www.w3schools.com/tags/tag_a.asp در انتهای صفحه اینجوری نوشته؟ منظورش چیه از اینکه دو تا خاصیت رو همزمان به تگ a داده. 
Most browsers will display the <a> element with the following default values: 
a:link, a:visited {
    color: (internal value);
    text-decoration: underline;
    cursor: auto;
}
a:link:active, a:visited:active {
    color: (internal value);
}
- منظور از حالت active تنها زمانی است که شما بر روی لینک کلیک می کنید (یک فاصله زمانی بسیار کوتاه از زمان کلیک تا رها کردن نشانه گر را شامل می شود)، نه زمانی که صفحه مربوط به یک لینک انتخاب می شود، حالت مد نظر شما باید با برنامه نویسی و اختصاص کلاس متفاوت به لینک فعال ایجاد شود (نمونه آموزش در سایت وجود دارد، لطفا عبارت "ساخت منوی هوشمند" را در وب جستجو کنید)
- منظور از یک حالت انتخاب برای a مشخص نیست؟ عبارت a اشاره به anchor دارد که معمولا به همراه href استفاده می شود که خود می تواند حالت link, visited, active و... داشته باشد، منظور از متن مورد نظر این است که در حالت معمول استایل اختصاص داده شده برای a:link, a:visited در یک مرحله (زمانی که کاربر هیچ عکس العمل تعاملی با ماوس انجام نمی دهد) اعمال می شود و استایل a:link:active, a:visited:active نیز در یک مرحله (زمانی که کاربر بر روی یک لینک دیده نشده/شده در حال کلیک است!) اعمال می شود (در واقع مرورگرها فرق چندانی بین این سلکتورهای مشابه قائل نیستند).
داوود
۱۲:۰۴ ۱۳۹۴/۰۵/۲۷
سلام آقای مهندس، وقتتون بخیر
استاد:
الف) به غیر از property هایی مثل overflow ، و فکر کنم height دیگه چه عناصری مانع از collapse شدن عنصر والد میشن؟؟ الان در مثالی که برای خانم سوده (در صفحه یک) گذاشتین من اومدم و به Body خاصیت float رو اعمال کردم. دیدم این هم انگاری مانع از collapse شدن میشه و درست بود. حالا دیگه Body ما کل عناصر رو پوشش میداد.
ب) تو مثالی که زدین اگه خاصیت inline-block رو هم حذف کنیم، بازهم div ها سرجای خودشون باقی میمونند. میخواستم ببینم از چه نظر بهتره که این خاصیت رو گذاشتین باشه؟؟؟
ج) من اومدم و تو همون مثال و تو یکی از div ها یه متن رو بدون اینکه فاصله ای بین کلمات باشه و بطور یکنواخت تایپ کردم، یعنی اینجوری:
<div class="right">sdfsdfsdfsdfsasdfasdfdfsdfsdfsdfsdfsd</div>
<div class="center">In then Name of God</div>
الان تو div اولی کلمات زدن بیرون از کادر و خوب صفحه چهره زشتی به خودش گرفت. ولی تو دومی که فاصله داره نه ، خود متن اومد و خودش رو هم اندازه کادر کرد.
چیکار کنیم که تو حالت اول هم همین اتفاق رخ بده؟؟ یعنی حتی اگه متن بدون فاصله و زیاد باشه از کادر بیرون نزنه؛ من از مقادیر white-space استفاده کردم ولی جواب نداد مقادیر مورد نظر برای این مورد.
- در CSS بسته به شرایط از خاصیت های ذکر شده یا 
clear:both، float:left/right، position:absolute، display:inline-block
برای نمایش محتوا به نحو دلخواه استفاده می شود!
- برای چینش عناصر در یک راستا انتخاب اول باید خاصیت inline-block باشد، چون علاوه بر پشتیبانی در مرورگرها، هدف از تعریف این خاصیت نیز همین بوده است، اما float الزاما برای فرمت بندی و نمایش عناصر در یک راستا استفاده نمی شود، به طور مثال نمایش توضیح یک عکس روی تصویر از اهداف اولیه تعریف خاصیت float بوده!
- برای شکست متن و انتقال به خط جدید از خاصیت زیر استفاده کنید:
word-wrap:break-word;
داوود
۰۹:۳۰ ۱۳۹۴/۰۶/۰۹
سلام آقای مهندس؛ خیلی عذر میخوام که مجددا تکرار میکنم؛ حدس زدم شاید بخاطر تغییرات سرور ممکنه سوالم پاک شده باشه. در خصوص قسمت الف سوال قبلیم (عناصر موثر در عدم collapse شدن) امکانش هست در صورت امکان پاسخ رو مرقوم بفرمایین؟؟
پاسخ داده شده و در همین مطلب وجود دارد! سوال شما سه بخش بود که در پاسخ با علامت "-" در سه بخش مشخص است!
محسن
۱۲:۴۰ ۱۳۹۴/۰۶/۳۰
سلام مهندس خسته نباشید یه سوال خدمتتون دارم اینکه
من منو رو طراحی کردم زیرمنو هم عالی بالا میاد اما یه اسلایدر گذاشتم حالا وقتی منو hover میشه زیر منو زیر اسلایدر قرار می گیره می خوام روی اسلایدر قرار بگیره
ممنون میشم اگه کمکم کنید.
باید به بلاک اصلی منو خاصیت z-index (با یک مقدار بیشتر از z-index سایر عناصر) اضافه کنید.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
داوود
۱۲:۳۵ ۱۳۹۴/۰۸/۲۶
سلام آقای مهندس؛
وقت بخیر. استاد تو این طراحی منو:
* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

ul {
    list-style: none;
    overflow: auto;
}

li {
    float: right;
}

li a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
}

li:hover a {
    border-right: 5px solid red;
}

a:hover {
    padding-right: 10px;
}
و با این کد Html:
<ul>
          <li><a href="">لینک اول</a></li>
          <li><a href="">لینک دوم</a></li>
          <li><a href="">لینک سوم</a></li>
          <li><a href="">لینک چهارم</a></li>
          
      </ul>
میخواستم کاری کنم که وقتی ماوس میره روی لینکها، عبارت مورد نظر دیگه جابجا نشه. به این نتیجه رسیدم که باید مقدار padding از سمت راست رو دو برابر مقدار li:hover a بزارم. راستش رو بخواین هم میدونم چرا و هم نمیدونم چرا اینجوری میشه. امکانش هست بگید چرا باید دوبرابر باشه؟؟ آیا خود li هم یعنی داره از جایی میگیره padding رو؟؟ بذارین اینجوری بگم؛ مگه وقتی که من گفتم li من یه border به قطر 5 داشته باشه، خوب وقتی که hover میکنم عبارت لینک باید 5- تا بیاد سمت راست دیگه که تکون نخوره به نوعی و نره جلوتر، ولی الان با دو برابر مقدار مثبت به این نتیجه دست پیدا کردم. میشه دلیلشو بهم بگین؟؟ ممنونم ازتون.
- در سلکتور li a به تگ a مقدار padding برابر با 15 پیکسل داده شده (در حالت عادی از چهار جهت 15 پیکسل فضای خالی).
- در سلکتور li:hover a به سلکتور a مقدار 5 پیکسل خط حاشیه داده شده (زمانی که کاربر ماوس را روی محدوده li ببرد که در اینجا با محدوده a مشترک است).
- در سلکتور a:hover نیز مجدد 10 پیکسل padding به a در حالت hover داده شده که با میزان border قبلی می شود 15 پیکسل!
داوود
۱۳:۱۷ ۱۳۹۴/۰۸/۲۷
سلام آقای مهندس؛
بسیار بسیار سپاسگزارم بخاطر پاسخگویی خوبتون.
استاد در اینجا که فرمودین:
الف - "در سلکتور li:hover a به سلکتور a مقدار 5 پیکسل خط حاشیه داده شده (زمانی که کاربر ماوس را روی محدوده li ببرد که در اینجا با محدوده a مشترک است)." میشه بگیم بنوعی داره collapse رخ میده یا نه تو اینجا این مورد صدق نمیکنه؟؟
ب - آقای مهندس انگار این دو تا کد با همدیگه فرقی ندارن؛ درست میگم!! اگه مثبته چرا؟؟ چون hover فقط روی a اثر میذاره اینجوریه یا نه به نوعی چون ما این دو تا رو با همدیگه تلفیق کردیم اینجوری شده.
li:hover a {
    border-right: 5px solid red;
}
و این یکی:
li a:hover {
    border-right: 5px solid red;
}
زمانی که برای li عرض و ارتفاع خاصی تعیین نمی کنید، در واقع تگ a که درون li است، با گرفتن padding فضای آن را پوشش می دهد (تگ li به اندازه مورد نیاز a گسترش می یابد) و به نوعی محدوده دو تگ یکی می شود (li لفاف a می شود)، لذا این طور به نظر می رسد که استایل های اعمال شده برای هر دو تگ مشترک عمل می کنند! توجه کنید که این قانون همیشه صادق نیست و بسته به اندازه های اعمال شده برای a و li ممکن است محدوده آنها متفاوت باشد، در کل بهترین حالت برای جلوگیری از سردرگمی این است که پس از آشنایی با اصول کلی، به صورت عملی و با آزمایش و خطا تفاوت را در چند مرورگر به طور هم زمان بررسی کنید!
داوود
۱۲:۰۴ ۱۳۹۴/۰۹/۱۵
سلام استاد عزیزم؛
وقتتون بخیر.
استاد آیا ul همیشه لازمه که با li بیاد؟؟ یا بزارین اینجوری بگم! li میتونه به تنهایی و بدون استفاده از ul بیاد؟؟
علت سوالم به این خاطره: (البته راستش رو بخواین خیلی واجب و مهم نیست ولی جهت علاقه به دونستنش ازتون دارم میپرسم).
این کد رو ببینید استاد:
<body>
        <li><a class="button" href="#">for test button link</a></li>
  </body>
و حالا این تکه کد css مربوط به همین کد html رو:
.button {
    text-decoration: none;
    display: inline-block;
    padding: 20px 35px;
    border: 1px solid black;
    background-color: #ffd1fa;
}
li a.button {
    list-style: none;
    padding: 20px;
}
ببینید استاد الان من منظورم از این کد: li a.button اینه که بیا و آیکن یا همون Bullet icon (اگه درست گفته باشم) کنار li رو که بصورت پیش قرار میدی بیا بردار؛ ولی کد بالا درست عمل نمیکنه؛ در عوض این کد درست عمل میکنه: ببینید: 
li {
    list-style: none;
}
البته همونطور که گفتم این مورد خیلی مهم نیست ولی میخواستم بدونم چرا اینجوری که به تنهایی تگ li رو نوشتم عمل کرده ولی زمانی که سفارشی کردم، عمل نکرد. آیا تو تعاریف سفارشی و مسیر دهی به li اشتباه کردم؟
- از نظر کدنویسی استاندارد یا Valid HTML Markup الزاما باید تگ li درون تگ ul یا ol استفاده شود، در غیر اینصورت ممکن است در مرورگرهای مختلف به شکل متفاوتی پردازش شود!
- در مورد مشکل دوم، سلکتور تنظیم شده تگ li را به عنوان عنصر هدف تنظیم نمی کند، قبلا هم گفته شد، دستور شما یعنی تگ a ای درون تگ li که کلاس button داشته باشد!
<style>
li a.button{
	font-size:36px;
}
</style>
<ul>
<li>
<a href="#" class="button">test!</a>
</li>
</ul>
محسن
۱۳:۳۵ ۱۳۹۴/۱۰/۲۵
سلام
استاد من چون تازه دارم با طراحی وب آشنا میشم بعضی از سوالاتم خیلی ابتدایی و مبهمه در این مورد از شما عذر می خوام ولی چاره ای ندارم اگه میشه به تمامی این سوالاتم پاسخ بدید
سوالم اینکه با توجه به این که شما در این مطلب دو مثال زدید و خروجی هردو یکسان بود پس چرا برای مثال دومی از دو کلاس li استفاده کردید
تصویر پس زمینه به کار رفته در کلاس li-1 با کلاس li-2 متفاوت است! همچنین با این کار می توانید خاصیت های دیگری برای هر کلاس تعریف و استفاده کنید، کدها صرفا جهت نمونه و فهم مطلب درج شده اند.
علی
۲۰:۴۸ ۱۳۹۵/۰۸/۲۲
سلام,
چجوری با زدن یک گزینه در منو تگی در صفحه ایجاد شود. ممنون
برای این کار باید از جاوا اسکریپت استفاده کنید، مثال:
<style>
#test{
	border:1px solid #949494;
	padding:4px;
	margin:4px;
}
.class{
	background:#A3E5D0;
	margin:4px;
}
</style>
<script>
function myFunction(id) {
    var tag = document.createElement("P");
    var text = document.createTextNode("your text!");
	tag.className = 'class';
    tag.appendChild(text);
    document.getElementById(id).appendChild(tag);
}
</script>
<div id="test"></div>
<input type="button" value="Click!" onclick="myFunction('test')">
alizz j
۲۱:۰۷ ۱۳۹۵/۰۹/۲۴
من اگه بخوام این نقطه ها رو از کنار لیست بردارم و بین نوشته های لیستم فاصله ایجاد کنم باید از چه کد هایی استفاده کنم؟ ممنون
لطفا توضیحات مربوط به خاصیت list-style را در آموزش حاضر مطالعه کنید، همچنین برای اعمال تنظیمات بیشتر باید مباحث دیگر CSS از جمله padding و margin را فرا گرفته باشید.
نخست
قبلی
1
2
3
بعدی
آخر
paged صفحه 2 از 3
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
4 × 6
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
علی یوسفی
آشنایی با مفهوم Semantic در HTML
ممنون از این مقاله کامل جامع
۱۴۰۲/۰۳/۱۹
حسین
نمایش آمار بازدیدها با PHP بدون استفاده از دیتابیس
با سلام ببخشید این کدها تو وردپرس هم میشه استفاده کرد؟
۱۴۰۲/۰۳/۱۹
پـــرتو
نمایش آمار بازدیدها با PHP بدون استفاده از دیتابیس
سلام خسته نباشید ببخشید این کد رو میشه برای وبلاگ بلاگفا استفاده کرد یا نه؟ اگر نمیشه میشه یه کد مثل این برای بلاگفا بدین؟...
۱۴۰۲/۰۳/۱۹
پـــرتو
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
سلام جناب خسته نباشید شرمنده دوباره مزاحم میشم عه جناب شما می تونید برام یه کد آمارگیر تو همین سایت وبگذر درست کنید لطفا؟ ایمیلم...
۱۴۰۲/۰۳/۱۹
پـــرتو
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
سلام اوکی ولی چرا من هر چی ایمیلمو میزنم ارور میده؟ بله درسته چون من چندوقته هر چی ایمیلمو میزنم ارور میده گفتم شاید باید...
۱۴۰۲/۰۳/۱۶
پرتو
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
سلام جناب خسته نباشید شرمنده مزاحم میشم برای ساخت عضویت در سایت وبگذر باید چه ایمیلی داشته باشیم که ساخته بشه؟ منظورم جیمیله یا یاهو...
۱۴۰۲/۰۳/۱۵
سینا
رویدادها (Events) در جاوا اسکریپت (JavaScript)
با سلام و خسته نباشید من یه متنی رو از یه سایت با file_get_contents می گیرم و توی سایت منتشر می کنم راهی...
۱۴۰۲/۰۳/۰۷
مرتضی حسین پور
نحوه درج علامت های خاص در HTML
سلام مثلا من میخوام عبارت زندگی در کوهستان را تگ بزنم چگونه باید این کار را بکنم
۱۴۰۲/۰۳/۰۴
ابوالفضل
رویدادها (Events) در جاوا اسکریپت (JavaScript)
سلام استاد بازم من اومدم با طرح یه سوال جدید من میخوام در یک جدول در دیتابیس یک مقدار که به 1 تغییر کرد...
۱۴۰۲/۰۲/۳۰
احمد
حذف اسکرول افقی (Horizontal Scroll) با CSS
سلام، در کدوم قسمت باید کد رو قرار بدیم؟ در قسمت سفارشی سازی css قرار میدم، ارور میده و قبول نمیکنه.
۱۴۰۲/۰۲/۳۰
محمد
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
سلام من چطور prompt که از کاربر بگیرم به boolean تبدیل کنم
۱۴۰۲/۰۲/۲۵
مزرجی
ارسال پارامتر به URL و دریافت مقادیر با PHP
سلام وقت بخیر چجوری میشه فهمید خروجی هر لینک چیه؟ مثلا از کجا بفهمیم خروجی یک لینک، متن هست یا فیلم هست یا عکس...
۱۴۰۲/۰۲/۲۱
علی
استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
با سلام و عرض ادب می خواستم کار با پایگاه داده در جاوا رو یاد بگیرم (ورود اطلاعات در دیتابیس و آپدیت و حذف...
۱۴۰۲/۰۱/۲۷
علی
استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
با سلام و درود اگر همین کد رو مستقیم در یک فایل جاوا وارد کنیم چرا اجرا نمیشه؟ و اگر بخواهیم اجرا بشه...
۱۴۰۲/۰۱/۲۵
پـــرتو
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
سلام ببخشید مزاحم میشم من ویندوزم رو تازه کردم ولی موقع نصب فتوشاپ موقعی که فتوشاپ نصب میشه خطای dll میاد که من دقیقا نمی...
۱۴۰۲/۰۱/۲۴
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
آموزش مقدماتی | آموزش کاربردی | مهارتهای وب | تماس با ما | انتقادات و پیشنهادات | برنامه نویسی وب | پشتیبانی فنی | تبلیغات | درباره ما | حریم خصوصی | سوالات متداول | HEX RGB
copyright  محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
copyright  خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
© 2012 - 2023 Webgoo.ir - All Rights Reserved.