HTML / CSS में संपूर्ण div के लिए एक href लिंक

Question

यहाँ मैं HTML / CSS को पूरा करने की कोशिश कर रहा हूँ:

मेरे पास विभिन्न ऊंचाइयों और चौड़ाई में चित्र हैं, लेकिन वे सभी 180x235 के नीचे हैं। तो क्या मैं करना चाहता हूँ एक बनाने के है divके साथ borderऔर vertical-align: middleउन सब को। मैंने सफलतापूर्वक ऐसा किया है, लेकिन अब मैं इस बात पर अड़ा हुआ हूं कि कैसे पूरी तरह से एक href लिंक को ठीक से किया जाए div।

यहाँ मेरा कोड है:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

कृपया ध्यान दें कि यहां आसानी से कॉपी पेस्ट करने के लिए, स्टाइल कोड इनलाइन है।

मैंने कहीं पढ़ा कि मैं कोड के शीर्ष पर एक और माता-पिता को जोड़ सकता हूं और फिर उसके अंदर एक href कर सकता हूं। हालाँकि, कुछ शोधों के आधार पर यह मान्य कोड नहीं होगा।

इसलिए इसे फिर से समेटने के लिए, मुझे #parentdivimagehref लिंक होने के लिए संपूर्ण div ( ) की आवश्यकता है ।

Answer 1

अद्यतन 06/10/2014: एचटीएमएल 5 में div's के अंदर का उपयोग करना शब्दार्थ रूप से सही है।

आपको निम्नलिखित परिदृश्यों के बीच चयन करना होगा:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

जो शब्दार्थ रूप से गलत है, लेकिन यह काम करेगा।

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

जो शब्दार्थ रूप से सही है लेकिन इसमें JS का उपयोग करना शामिल है।

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

जो शब्दार्थ रूप से सही है और अपेक्षा के अनुसार काम करता है, लेकिन यह कोई और अधिक नहीं है।

Comments

lol :) विज़ुअल वेब डेवलपर 2010 कहता है: सत्यापन (XHTML 1.0 संक्रमणकालीन): तत्व 'div' को 'a' तत्व के भीतर नेस्ट नहीं किया जा सकता।

— फतह एसीट

हां - एक <a>टैग इनलाइन है, और एक <div>टैग ब्लॉक है। यह इनलाइन टैग के अंदर ब्लॉक स्तर का टैग लगाने के लिए मान्य नहीं है, इसलिए यह त्रुटि का स्रोत है।

— असली सपने

आप सीएसएस के spanबजाय का उपयोग कर सकते हैं divऔर display: block;इसे वांछित और शब्दार्थ के रूप में देखने के लिए सीएसएस का उपयोग कर सकते हैं ।

— अज़शर्मा

आपको बस टैग display:blockपर सेट करना चाहिए <a>। यह घोंसले के बिना एक ब्लॉक तत्व बन जाएगा।

— ऑगी गार्डनर

मुझे नहीं लगता कि शब्दार्थ का इससे कोई लेना-देना है। यह अब वैध और तकनीकी रूप से सही है, लेकिन शब्दार्थ से इसका कोई लेना-देना नहीं है।

— रॉब

Answer 2

आप <div>तत्व को क्यों नहीं हटाते हैं और इसे <a>बदले से बदल देते हैं? सिर्फ इसलिए कि एंकर टैग एक div नहीं है इसका मतलब यह नहीं है कि आप इसे display:blockएक ऊंचाई, चौड़ाई, पृष्ठभूमि, सीमा, आदि के साथ स्टाइल नहीं कर सकते हैं । आप इसे एक div की तरह देख सकते हैं लेकिन फिर भी एक लिंक की तरह काम कर सकते हैं । फिर आप अमान्य कोड या जावास्क्रिप्ट पर निर्भर नहीं हैं जो कुछ उपयोगकर्ताओं के लिए सक्षम नहीं हो सकता है।

Comments

दिलचस्प। क्या आप कृपया एक उदाहरण दे सकते हैं ताकि मैं कोशिश कर सकूं। साभार

— आदिल

अच्छा है, लेकिन उस मामले में महान काम नहीं करेगा जहाँ आपके <a>अंदर एक और है <div>।

— मुहम्मद

महान समाधान - यह मोबाइल सफारी के लिए अच्छी तरह से काम करता है जहां आपको मैन्युअल रूप से छूने से बचने के लिए एंकर टैग की आवश्यकता होती है

— आलमगीर मंड

Answer 3

इसको ऐसे करो:

पेरेंटडिविमेज की चौड़ाई और ऊंचाई निर्दिष्ट होनी चाहिए, और इसकी स्थिति होनी चाहिए:

position: relative;

पेरेंटडिविज के अंदर, अन्य डिवो के बगल में जो पेरेंट आपके पास होना चाहिए:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

फिर सीएसएस फ़ाइल में:

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

स्पैन टैग अपने मूल ब्लॉक को भर देगा, जो कि पैरेंटिव है, क्योंकि ऊँचाई और चौड़ाई 100% है। अन्य तत्वों की तुलना में जेड-इंडेक्स सेट करने के कारण स्पैन आसपास के सभी तत्वों के शीर्ष पर होगा। अंत में स्पैन क्लिक करने योग्य होगा, क्योंकि यह एक 'ए' टैग के अंदर है।

Comments

आहमिंग, दिनों की खोज के बाद यह समाधान है जो मेरे लिए काम किया है

— somid3

मैंने स्वीकृत उत्तर के लिए इस का उपयोग किया है; "ब्लॉक" के सभी पाठ रेखांकित हो जाते हैं। हाँ, आप टेक्स्ट-डेकोरेशन के ज़रिए अंडरलाइन से छुटकारा पा सकते हैं लेकिन यह संपत्ति विरासत में नहीं मिली है। अपने तरीके का उपयोग कर, @denu, इसे सरल बनाता है।

— यपदॉग

Answer 4

दो चीजें जो आप कर सकते हैं:

1. #childdivimageएक spanतत्व में बदलें , और #parentdivimageएक एंकर टैग में बदलें । इससे आपको चीजों को सही दिखने के लिए कुछ और स्टाइल जोड़ना पड़ सकता है। यह प्रीफ़र्ड है, क्योंकि यह सिमेंटिक मार्कअप का उपयोग करता है, और जावास्क्रिप्ट पर निर्भर नहीं करता है।

2. एक क्लिक ईवेंट को बांधने के लिए जावास्क्रिप्ट का उपयोग करें #parentdivimage। आपको window.locationइस घटना के अंदर संशोधन करके ब्राउज़र विंडो को पुनर्निर्देशित करना होगा । यह TheEasyWay ^{TM है} , लेकिन शान से नीचा नहीं होगा।

Answer 5

सुरियल ड्रीम्स ने जो कहा उससे हटकर, शायद मेरे अनुभव में एंकर टैग को स्टाइल करना सबसे अच्छा है, लेकिन यह वास्तव में निर्भर करता है कि आप क्या कर रहे हैं। यहाँ एक उदाहरण है:

एचटीएमएल:

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

फिर सीएसएस:

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output

Answer 6

बनाने divकी id="childdivimag"एक spanके बजाय, और रैप है कि एक में aतत्व। के रूप में spanऔर imgइन-लाइन तत्वों डिफ़ॉल्ट रूप से कर रहे हैं इस मान्य रहती है, जबकि एक divएक ब्लॉक स्तर तत्व है, और एक के भीतर इसलिए अवैध मार्क-अप निहित जब a।

Comments

हाँ, लेकिन यह मेरे लिए काम नहीं करता है क्योंकि मैं नहीं चाहता कि छवि एक href हो। मैं एक href लिंक के लिए पूरे ब्लॉक चाहता हूँ .. एक अवधि के लिए चाइल्डडिविज को बदलने और इसे एक में लपेटने से वह पूरा नहीं होता जो मैं चाहता हूँ

— आदिल

Answer 7

display:blockलंगर तत्व पर डाल दिया । और / या zoom:1;

लेकिन आपको वास्तव में ऐसा करना चाहिए।

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

Answer 8

मैं क्या करूँगा <a>टैग के अंदर एक स्पैन लगाया गया है , स्पैन को ब्लॉक करने के लिए सेट करें, और स्पैन में आकार जोड़ें, या केवल स्टाइल को <a>टैग पर लागू करें । निश्चित रूप से <a>टैग शैली में स्थिति को संभालना । एक जोड़े onclick eventको a whereJavaScript घटना पकड़ेगा, और फिर JavaScript घटना के अंत में झूठी वापसी की डिफ़ॉल्ट गतिविधि को रोकता hrefऔर क्लिक के बुदबुदाती। यह जावास्क्रिप्ट सक्षम के साथ या बिना मामलों में काम करता है, और किसी भी AJAX को जावास्क्रिप्ट श्रोता में संभाला जा सकता है।

यदि आप jQuery का उपयोग कर रहे हैं, तो आप इसे अपने श्रोता के रूप में उपयोग कर सकते हैं और टैग onclickमें छोड़ सकते हैं a।

$('#idofdiv').live("click", function(e) {
    //add stuff here
    e.preventDefault; //or use return false
}); 

इससे आप श्रोताओं को आवश्यक रूप से किसी भी परिवर्तित तत्वों से जुड़ सकते हैं।

Answer 9

<div>टैग के साथ एक लिंक :

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

<a>टैग के साथ एक लिंक :

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>

Answer 10

यह कई तरीकों से किया जा सकता है। ए। किसी टैग के अंदर नेस्टेड का उपयोग करना।

<a href="link1.html">
   <div> Something in the div </div>
 </a>

ख। इनलाइन जावास्क्रिप्ट विधि का उपयोग करना

<div onclick="javascript:window.location.href='link1.html' "> 
  Some Text 
</div>

सी। टैग के अंदर jQuery का उपयोग करना

HTML:

<div class="demo" > Some text here </div>

jQuery:

$(".demo").click( function() {
  window.location.href="link1.html";
 });