ساخت دکمه با ارتفاع بلند تر از div

[mahsa.n]

سلام به همه

چه طوری میتونم یه دکمه شبیه به دکمه نارنجی درست کنم که ارتفاعش بلند تر از div خاکستری رنگ باشه؟

114949

[mahdavi1456]

<div class="b">
<ul>
<li>asda</li>
<li>asda</li>
<li>asda</li>
</ul>
</div>



.b{
width: 500px;
height: 50px;
background:#000;
margin:100px auto;
opacity: 1;
transition:1s;
}

li{
width: 100px;
height: 60px;
background: red;
float: right;
position: relative;
top: -10px;
margin: 0 10px;
text-align: center;
}


ریست کردن استایل یادتون نره.

[khateratean]

نکته کد CSS بالا، در واقع خصوصیت position است که با مقدار relative تنظیم شده است. (relative باعث می شود که عنصر بتواند نسبت به مکان جاری خودش موقعیت دهی شود)
در ادامه خصوصیت top با مقدار -10 تنظیم شده که باعث می شود عنصر li نسبت به مکان جاری خودش 10 پیکسل به بالا حرکت کند.
کلاً خصوصیت position خیلی پرکاربرد، در صورت تمایل برای یادگیری کامل این خصوصیت به لینک زیر مراجعه نمایید:
http://www.beyamooz.com/css/87-advance/292-%D8%AE%D8%A7%D8%B5%DB%8C%D8%AA-position-%D8%AF%D8%B1-css

[khateratean]

در ضمن برای گرد کردن لبه ها هم به لینک زیر مراجعه کنید:
http://www.beyamooz.com/css3/649-%DA%AF%D8%B1%D8%AF-%DA%A9%D8%B1%D8%AF%D9%86-%DA%A9%D9%88%D8%B4%D9%87-%D9%87%D8%A7-%D8%AF%D8%B1-css3