Problēmas ar <div> un <a>

nemakuphp · August 18, 2010

Lai nebūtu tik grūti stāstīt, izveidoju attēlu, ko es vēlētos panākt.

Attēls:

Kods, kāds ir pašreiz:

<a href="">
<div>
	<a href="">Links #1</a><br />
	<a href="">Links #2</a>
</div>
</a>

Ko es vēlos panākt:

Lai uzspiežot jebkur zilajā klucī (kodā div bloks), izņemot linkus, kas ir iekš viņa(Links #1 un Links #2), man atvērtos links, kas ir apkārt zilajam klucim (a tags, kas ir visam apkārt).

Problēma:

Testējot viss notiek kā es vēlētos tikai Opera 10.61.

Ne IE8, ne FF 3.6.8, ne Chrome 5.0.375.126 nenotiek mans vēlamais rezultāts.

briedis · August 18, 2010

Tā vispār nederīkst darīt! <a> ir inline elements, nav paredzēts, lai viņā bāztu bloka elementus...

Pārdomā, vai tev šitādu sviestiņu vajag.

nemakuphp · August 18, 2010

Būs tad laikam jāiztiek bez, jo nu arī tik ļoti nepieciešams nebija

briedis · August 18, 2010

Otrkārt, nevarētu arī noklikšķināt uz iekšējiem a, jo nostrādātu tas ārējais links.

Ieteiktu arī rakstīt valīdu html kodu, tas ir, regulāru validēt viņu!

Te: http://validator.w3.org/

Edited August 18, 2010 by briedis

Evi · August 18, 2010

Jā, html struktūra ir nepareiza.

Variants buutu:

<div class="wrapper"> /* width, height */

<a href="#"></a> /* zilais raamis: width, height, display:block, z-index */

<a href="#"></a> /* links 1, width, height, position:absolute, display:block, z-index */

<a href="#"></a> /* links 2, width, height, position:absolute, display:block, z-index */

</div>

Maris-S · August 18, 2010

Tu to varētu panākt ar javascript.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Links</title>

<style type="text/css">
	.outer {
		width: 300px;
		height: 200px;
		background-color: lime;
	}

	.outer a {
		width: 150px;
		height: 20px;
		background-color: white;
		margin-top: 10px;
		display: block;
	}
</style>

<script type="text/javascript">
	function cancelEvents(e) {
		if (!e)
			e = window.event;

		e.cancelBubble = true;
		if (e.stopPropagation)
			e.stopPropagation();
	}
</script>
</head>
<body>
<div class="outer" onclick="javascript: document.location.href='http://php.lv';">
<a href="http://php.net" onclick="javascript: cancelEvents(event);">Pirmais</a>
<a href="http://php.net" onclick="javascript: cancelEvents(event);">Otrais</a>
</div>
</body>
</html>

Pielāgo linkus un CSS savām vajadzībām un viss strādās.

Sign In

Problēmas ar <div> un <a>

Recommended Posts

nemakuphp

briedis

nemakuphp

briedis

Evi

Maris-S

Join the conversation

Browse

Activity