İç içe geçmeli bağlantı alanları HTML kaynağında iç içe geçme elemanları olmadan

Köprü olarak görünen ve daha büyük bir dikdörtgen (tam sayfa genişliği) olan köprüler gibi davranan bir şeylere sahip olmak isterim.İç içe geçmeli bağlantı alanları HTML kaynağında iç içe geçme elemanları olmadan

 
|-------------------------------------------| 
| Some text [_link_]       | 
|-------------------------------------------|

bütün dış dikdörtgen (blok elemanı) köprü olmaktır: Aşağıda bu gibi görünmelidir ne ASCII sanat gösterimi yoktur. Bu dikdörtgenin içinde bir miktar metin olmalı ve bu metnin sonunda başka bir bağlantı olmalı.

12.2.2 İç içe bağlantılar içe olmamalıdır bir elemanı tarafından tanımlanan yasadışı

Linkler ve çapalar şunlardır:

Maalesef yuvalama bağlantılar (A elemanları) (X) HTML yasadışı ; ve A öğesi, başka bir A öğesi içermemelidir.

( http://www.w3.org/TR/html401/struct/links.html#h-12.2.2 itibaren)

yüzden

<a href="xxx" style="display: block"> 
    Some text 
    <a href="yyy">link</a> 
</a>

yukarıda uygulanmasının en doğal yolu geçerli HTML değil. Daha da kötüsü, bazı web tarayıcılarının bazı durumlarda , iç bağlantı elemanının dış bağlantı elemanının kapama elemanının hemen dışına hareket ettirilmesiyle bu gerekliliği zorlamaktadır. Bu elbette düzeni bozuyor.

yüzden sormak istediğim şey HTML ve CSS (ancak hiçbir JavaScript) kullanarak yukarıda sunulan düzeni varmak, ancak HTML kaynağında iç içe bağlantı elemanları olmadan nasıl olduğunu. Davranış halindeki bağlantı elemanlarına (HTML standardı uygulamada aşırı derecede katı olmayan tarayıcılar için) mümkün olduğunca yakın bir davranış olsa hoş olurdu.

Düzenleme (16-01-2009)

Açıklama: ikiden fazla bağlantı elemanları mükemmel kabul edilebilir kullanmak Çözümler Geçmişte ne yaptın

<a href="xxx" ...>Some text</a> <a href="yyy" ...>Link</a> <a href="xxx" ...>& nbsp;</a> ...

kaynak

2009-01-16 Jakub Narębski

Düşünebildiğim birkaç çözüm var, ama hepsinin javascript kullandığını düşünüyorum. Herhangi birinin saf CSS + HTML –

'dan birini yapıp yapamayacağını görmek isterdim ... bunun erişilebilirlik açısından ne kadar kötü olduğunu fark ettiniz, değil mi? Birbirinize * birbirini * bağlamanız gerekmiyor, içeri girelim! :-) –

Diğer taraftan, kullanılabilirlik/erişilebilirlik ipuçlarından bazıları, menü benzeri bağlantıların yalnızca genişlikli metinleri bulmasını ve tıklatmasını gerektirmeyecek şekilde tüm genişliği kapsaması gerektiğini öne sürüyor. –

Yapabilirsin 'a' etiketi tutmak ve basit css bunun için bir stil tanımlamak, hiçbir javascript fark böyle bir şey deneyin: negatif marjlar ile

div.a { 
 
    position: relative; 
 
    background-color: #F88; 
 
    z-index: 0; 
 
} 
 
a.b { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
a.b:hover { 
 
    background-color: #8F8; 
 
} 
 
a.c { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 
a.c:hover { 
 
    background-color: #88F; 
 
} 
 
a.c span { 
 
    display: none; 
 
}

<div class="a"> 
 
    foo 
 
    <a href="bar" class="b">bar</a> 
 
    <a href="foo" class="c"><span>baz</span></a> 
 
</div>

kaynak

2009-01-16 00:40:42 Gumbo

(Eğer ana öğe olduğu varsayılarak) div için uygun işlevsellik eklemek için Javascript kullanıldı, böylece tıklandığında, window.location alt linkinin .href niteliğini açarak çalıştırılır.

Bunun gibi bir şey.

// jQuery Code 
$(".parentDivLink").click(function(){ 
    window.location = $(this).find("a.mainLink").attr("href"); 
}); 

<div class="parentDivLink"> 
    <a href="http://www.google.com" title="Google" class="mainLink">Click Me</a> 
</div>

kaynak

2009-01-16 00:27:07 Sampson

Javascript yok dedi. –

Haklısınız. Belki ikinci cevabım yeterli olacaktır. – Sampson

Belki bu işe yarar mı?

div.parentBox { 
    position:relative; 
    height:100px; 
} 
    a.someLink { 
    position:absolute; 
    top:0; 
    left:0; 
    height:100px; 
    } 

// Now just position the two spans 

<div class="parentBox"> 
    <span class="someText">Some Text</span> 
    <a href="#" class="someLink"> 
    <span class="linkText">Link Text</span> 
    </a> 
</div>

kaynak

2009-01-16 00:32:07 Sampson

Smashing Magazine kısa bir süre önce benzer bir şey önerdi, ancak blok zaten mevcut alanı doldurduğu için genişlik ve yükseklik yerine dolgu kullanıyordu. http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/ – DavGarcia

Bağlantı için teşekkürler - bu yanıt ad-hoc, bu yüzden olacak Teknikte SM'nin söyleyeceklerini okumaktan keyif alın. – Sampson

Kafam karıştı .. dış bağlantı nerede? –

Sadece dış elemana onclick etkinlik işleyicisi üzerine yerleştirdiğiniz zaman tıklandığında görüşmeleri "window.location = 'yourURLhere';"

Fare bittiğinde el imlecini almak için bir stil özniteliği - "imleç: işaretçi" ekleyebilirsiniz.

Renk değişikliklerini elde etmek için bir css hover kod bloğunuz da olabilir.

DÜZENLEME: sadece bu konuda çok, vb bunu yükseklik, genişlik verebilir bu şekilde,

kaynak

2009-01-16 00:34:18 Jobo

bir şamandıra de çalışması gerekir. (Sadece IE6) Test

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title>Link within link</title> 
<style type="text/css"> 
.Parent { 
width: 500px; 
background-color: yellow; 
} 
.sub { 
float: left; 
margin-left: -300px; 
} 
.foo { 
display:block; 
float: left; 
text-decoration: none; 
} 
</style> 
</head> 
<body> 
<a href="foo" Class="foo"><div class="Parent">foo </div></a> 
<div class="sub"><a href="bar">Link text</a></div> 
</body> 
</html>

Kullanıcı karışıklık için büyük bir potansiyel fark yok.

kaynak

2009-01-16 15:14:30 Traingamer

İç içe geçmeli bağlantı alanları HTML kaynağında iç içe geçme elemanları olmadan

cevap

İlgili konular