یه سوال بچگانه در مورد تگ a

[SianiD]

سلام دوستان
سوالی که دارم شاید خیلی ساده باشه اما پیداش نکردم !! :لبخند:

یه همچین کدی دارم تو قسمت منو :


<ul>
<li>
<a href="#"> adsd</a>
</li>
<ul>


حالا مشکل اینه که وقتی موس میاد روی متن لینک دارم اما میخوام فضای جلوی متن تا انتهای li لینک باشه و با کلیک بره به اون صفحه !
چه کنم ؟

[uthman]

<a href="#"><li>Some Text</li></a>

[SianiD]

داداش اینو میدونم اما میخواستم بدونم خود تگ a خاصیتی نداره که این محدوده رو بهش داد ؟
چون یکم طراحیم اینجوری بهم میخوره باید خیلی چیزارو تغییر بدم

[mehbod.rayaneh]

سلام
از اونجایی ک والد ul فقط li هست نمیتونید a را قبل از li بذارید! شاید کار بده! ولی کد نویسیتون غلطه!
باید به a استایل بدید!
اینو روی کدی ک دادید تست کنید :

ul li {height:200px;width:200px;background:blue}
ul li a {width:100%;height:100%;display: block;background:green}
ul li a:hover {background:red}

ینی باید به a ک توی li قرار دادید استایل width:100%;height:100%;display: block; را بدید.
موفق باشید.

[f_talebi]

سلام
از اونجایی ک والد ul فقط li هست نمیتونید a را قبل از li بذارید! شاید کار بده! ولی کد نویسیتون غلطه!
باید به a استایل بدید!
اینو روی کدی ک دادید تست کنید :

ul li {height:200px;width:200px;background:blue}
ul li a {width:100%;height:100%;display: block;background:green}
ul li a:hover {background:red}

ینی باید به a ک توی li قرار دادید استایل width:100%;height:100%;display: block; را بدید.
موفق باشید.
سلام این display: block مال چیه باعث چی میشه؟ نمایش لینک؟!

[asghar2008]

سلام این display: block مال چیه باعث چی میشه؟ نمایش لینک؟!

سلام


مشخصه ی Display کاربردهای زیادی در طراحی صفحات وب دارد. به طور کلی عناصر موجود در صفحه به دو دسته تقسیم میشوند که عبارتند از:


عناصر بلوک ( Block Elements)؛
عناصر درون خط ( Inline Elements)

عناصر بلوک به صورت پیشفرض تمام عرض محدوده ای که در آن قرار گرفته اند را اشغال میکنند و علاوه بر آن از بالا و پایین یک سطر با سایر عناصر فاصله خواهند داشت. از جمله این عناصر میتوان به تگهای h یا سرتیترها، تگهای p یا پاراگراف و تگ Div اشاره داشت.
برای اینکه مفهوم عناصر بلوک را درک کنید میتوانید به صورت عملی آنها را مورد استفاده قرار دهید. برای نمونه، صفحه html ای ایجاد کنید و کد زیر را درون آن بنویسید:



<h1>تیتر نخست</h1>
<h2>تیتر رده ی دوم</h2>
اگر کد فوق را در قالب صفحه وب مشاهده کنید خواهید دید که هرکدام از نوشته ها در یک سطر جداگانه قرار گرفته اند چراکه تگ h ذاتا یک عنصر بلوکی است.

در مقابل بعضی از عناصر، درون خط هستند، مثل تگ <a> یا تگ <span>. اگر مثال فوق را با این عناصر امتحان کنید، نتیجه کاملا متفاوت خواهد بود:



<a> تیتر نخست </a>
<a>تیتر رده ی دوم</a>
و هر دو متن در امتداد یکدیگر نمایش داده خواهند شد.

با استفاده از مشخصه ی Display میتوانید نحوه ی نمایش عناصر درون خط را به بلوک و یا برعکس تبدیل کنید. این مشخصه مقادیر زیر را دریافت میکند:


Block
Inline
Inline-block
None
Table
Compact

البته مقادیر دیگری نیز وجود دارند که کاربرد زیادی ندارند. در بین موارد فوق نیز پرکاربردترین آنها شامل ۴ تای نخست است که به توضیح آنها خواهیم پرداخت.

Display:block

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


a{ display:block;}

اگر کد css بالا را به تگهای span موجود در صفحه ( که ذاتا درون خط هستند ) اختصاص دهید، آنها به صورت بلوک به نمایش درخواهند آمد.

Display: inline

این مقدار دقیقا برعکس مقدار قبلی است و عناصری را که به صورت بلوک هستند را به صورت درون خط نمایش خواهد داد. به عنوان مثال:


H1,h2{ display:inline;}

اگر این کد را برای تگهای h1 و h2 در صفحه اعمال کنید، بر خلاف مثال نخست که هرکدام در یک سطر بودند، در اینجا آنها را در امتداد یکدیگر و در یک سطر خواهید دید.

Display: inline-block

مقدار ترکیبی است از دو مقدار قبلی، یعنی یک عنصر را هم به صورت بلوک و هم به صورت درون خط تبدیل خواهد کرد.

Display: none

اگر بخواهید عنصری در صفحه نمایش داده نشود از مقدار none برای صفت Display استفاده میکنیم.