لینک کردن یک محیط دایره‌ای در css

لینک کردن یک محیط دایره‌ای در css

شاید که وقتی تمامی divها و المان‌های متفاوت در اچ‌تی‌ام‌ال به شکل چهارضلعی است به چه شکل می‌توان دایره ساخت؟ بعد از ساخت دایره به چه شکل می‌شود آن‌را لینک کرد؟

برای ساخت دایره به شکل زیر عمل می کنید:

<!DOCTYPE html>
<html>
<head>
	<title>How To Make Circle - CamelCase</title>

	<style type="text/css">
		
		.circle
		{
			margin: 200px auto;
			border-radius: 100%;
			width: 300px;
			height: 300px;
			background: #000;
			color:#fff;
			text-align: center;
		}

		.circle p
		{
			font-size: 20px;
			padding-top: 138.8px;
		}

	</style>
</head>
<body>

	<div class="circle">
		<p>CamelCase</p>
	</div>

</body>
</html>

نتیجه:

لینک کردن دایره در css

در کد بالا ابتدا یک div تعریف کرده و به آن کلاس circle را نسبت دادیم؛ سپس با خاصیت border-radius در css و مقداردهی 100% به آن گفتیم که گوشه‌های شکل را به شکل دایره‌ای کن. بعد از اینکه این‌کار را کردیم باید محیط دایره را با width و height به اندازه ای بزرگ کنیم که شکل به صورت بیضی نشود و کاملا به شکل دایره نمایان شود. در مرحله‌ی بعد می‌خواهیم دایره‌ی بالا را با یک هایپرلینک به یک صفحه در وب لینک کنیم. برای این‌کار به روش زیر عمل می‌کنیم:

<!DOCTYPE html>
<html>
<head>
	<title>How To Make Circle - CamelCase</title>

	<style type="text/css">
		
		.circle
		{
			margin: 200px auto;
			border-radius: 100%;
			width: 300px;
			height: 300px;
			background: #000;
			color:#fff;
			text-align: center;
		}

		.circle p
		{
			font-size: 20px;
			padding-top: 138.8px;
		}

		a
		{
			text-decoration: none;
			color: #fff;
		}

	</style>
</head>
<body>

	<a href="http://camelcase.ir" title="camelcase.ir">
		<div class="circle">
			<p>CamelCase</p>
		</div>
	</a>

</body>
</html>

همان‌طور که مشاهده می‌کنید کد اولیه را ویرایش کرده و به کد فعلی رسیدیم. حالا یک دایره‌ی لینک شده دارید. اگر کد بالا را تست کنید مشاهده می‌کنید که خارج محیط دایره هم لینک شده است این مشکل به علت چهارضلعی بودن عنصر div می باشد اما راه حل آن چیست؟

برای حل این مشکل کافیست به روش زیر عمل کنید:

<!DOCTYPE html>
<html>
<head>
	<title>How To Make Circle - CamelCase</title>

	<style type="text/css">
		
		body
		{
			text-align: center;
		}
		
		.circle
		{
			margin: 200px auto;
			border-radius: 100%;
			width: 300px;
			height: 300px;
			background: #000;
			color:#fff;
			text-align: center;
			display: inline-block;
		}

		.circle p
		{
			font-size: 20px;
			padding-top: 138.8px;
		}

		a
		{
			text-decoration: none;
			color: #fff;
		}

	</style>
</head>
<body>

	<a href="http://camelcase.ir" title="camelcase.ir">
		<div class="circle">
			<p>CamelCase</p>
		</div>
	</a>

</body>
</html>

در کد بالا با استفاده از خاصیت display در کلاس circle این مشکل را حل کردیم. شما می‌توانید از این لینک فایل تمرین بالا را دانلود کنید و استفاده کنید.

نظرات خود را در ارتباط با “ترفند لینک کردن دایره در css” برای ما بنویسید.

برای امتیاز به این نوشته کلیک کنید!

[کل: 0 میانگین: 0]