এইচটিএমএল / সিএসএসে পুরো ডিভের জন্য একটি href লিঙ্ক

Question

এইচটিএমএল / সিএসএসে আমি যা সম্পাদন করতে চাইছি তা এখানে:

আমার বিভিন্ন উচ্চতা এবং প্রস্থে চিত্র রয়েছে তবে সেগুলি সবগুলি 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 লিঙ্ক হতে সম্পূর্ণ ডিভ ( ) প্রয়োজন ।

Answer 1

আপডেট 06/10/2014: ডিভাইসটির অভ্যন্তরে ডিভ এর ব্যবহার HTML5 এ শব্দার্থগতভাবে সঠিক।

আপনাকে নিম্নলিখিত পরিস্থিতিতেগুলির মধ্যে একটি চয়ন করতে হবে:

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

যা শব্দার্থগতভাবে ভুল, তবে এটি কার্যকর হবে।

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

যা শব্দার্থগতভাবে সঠিক তবে এটি জেএস ব্যবহারের সাথে জড়িত।

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

যা শব্দার্থগতভাবে সঠিক এবং প্রত্যাশার মতো কাজ করে তবে এটি আর কোনও ডিভ নয়।

Comments

লল :) ভিজ্যুয়াল ওয়েব বিকাশকারী 2010 বলেছেন: বৈধকরণ (এক্সএইচটিএমএল 1.0 ট্রানজিশনাল): এলিমেন্ট 'ডিভ' উপাদান 'এ' এর মধ্যে বাসাতে পারে না।

— ফাতিহ এসিট

হ্যাঁ - একটি <a>ট্যাগ ইনলাইন, এবং একটি <div>ট্যাগ ব্লক। কোনও ইনলাইন ট্যাগের মধ্যে কোনও ব্লক স্তরের ট্যাগ লাগানো বৈধ নয়, সুতরাং এটিই ত্রুটির উত্স।

— পরাবাস্তব স্বপ্নগুলি

আপনি এগুলির spanপরিবর্তে একটি ব্যবহার করতে পারেন divএবং সিএসএস ব্যবহার display: block;করতে এটি এটিকে পছন্দসই এবং শব্দার্থক দেখায়।

— আজশর্মা

আপনি শুধু সেট করা উচিত display:blockউপর <a>ট্যাগ। এটি বাসা ছাড়াই একটি ব্লক উপাদান হয়ে উঠবে।

— অগি গার্ডনার

আমি মনে করি না শব্দার্থবিজ্ঞানের এর সাথে কিছু করার আছে। এটি এখন বৈধ এবং প্রযুক্তিগতভাবে সঠিক কিন্তু শব্দার্থবিজ্ঞানের সাথে কিছুই করার নেই।

— রব

Answer 2

আপনি কেন <div>উপাদানটি বের করে এনে তার <a>পরিবর্তে প্রতিস্থাপন করবেন না? অ্যাঙ্কর ট্যাগটি কেবল একটি ডিভ নয়, এর অর্থ এটি নয় যে আপনি এটি স্টাইল করতে পারবেন না display:block, উচ্চতা, প্রস্থ, পটভূমি, সীমানা ইত্যাদি You আপনি এটিকে ডিভের মতো দেখতে তৈরি করতে পারেন তবে তবুও কোনও লিঙ্কের মতো কাজ করতে পারেন। তারপরে আপনি অবৈধ কোড বা জাভাস্ক্রিপ্টের উপর নির্ভর করছেন না যা কিছু ব্যবহারকারীর জন্য সক্ষম নাও হতে পারে।

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% এ সেট করার কারণে স্প্যান ট্যাগটি তার প্যারেন্ট ব্লকটি পূর্ণ করবে parent অন্যান্য উপাদানগুলির তুলনায় জেড-ইনডেক্স বেশি সেট করার কারণে স্প্যান আশেপাশের সমস্ত উপাদানের শীর্ষে থাকবে। অবশেষে স্প্যানটি ক্লিকযোগ্য হবে, কারণ এটি একটি 'এ' ট্যাগের অভ্যন্তরে।

Comments

আজমজিং, দিনগুলি অনুসন্ধান করার পরে এটিই আমার জন্য কাজ করা সমাধানটি সমাধান করেছে

— somid3

আমি স্বীকৃত উত্তরের চেয়ে এর জন্য ব্যবহার খুঁজে পেয়েছি; "একটি ব্লক" এর মধ্যে সমস্ত পাঠ্য আন্ডারলাইন হয়ে যায়। হ্যাঁ, আপনি পাঠ্য-সজ্জা মাধ্যমে আন্ডারলাইনগুলি থেকে মুক্তি পেতে পারেন তবে সেই সম্পত্তি উত্তরাধিকার সূত্রে প্রাপ্ত নয়। আপনার পদ্ধতি, @denu ব্যবহার করে এটি সহজ করে তোলে।

— ইয়াপডোগ

Answer 4

দুটি কাজ আপনি করতে পারেন:

1. পরিবর্তন #childdivimageএকটি থেকে spanউপাদান, এবং পরিবর্তন #parentdivimageএকটি নোঙ্গর ট্যাগ করতে। জিনিসগুলি নিখুঁত দেখতে পেতে আপনাকে আরও কিছু স্টাইলিং যুক্ত করতে হতে পারে। এটি প্রিফারড, যেহেতু এটি শব্দার্থক মার্কআপ ব্যবহার করে এবং জাভাস্ক্রিপ্টের উপর নির্ভর করে না।

2. ক্লিকের ইভেন্টটিকে আবদ্ধ করতে জাভাস্ক্রিপ্ট ব্যবহার করুন #parentdivimage। আপনাকে অবশ্যই window.locationএই ইভেন্টের মধ্যে পরিবর্তন করে ব্রাউজার উইন্ডোটি পুনর্নির্দেশ করতে হবে । এটি TheEasyWay ^টিএম , তবে কৃত্রিমভাবে হ্রাস পাবে না।

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 কোনও স্প্যান করতে childdivimage link..converting এবং একটি এটা মোড়কে সমগ্র ব্লক চান সাধা না আমি কি চাই

— আদিল

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>ট্যাগ স্টাইলে অবস্থান নির্ধারণ করুন handle একটি অ্যাড onclick eventকরার a whereজাভাস্ক্রিপ্ট ঘটনা ফেলবো, তারপর জাভাস্ক্রিপ্ট ঘটনা শেষে মিথ্যা ফিরে ডিফল্ট কর্ম প্রতিরোধhref এবং ক্লিক সাড়া জাগানো। এটি জাভাস্ক্রিপ্ট সক্ষম হওয়া বা ছাড়াই ক্ষেত্রে কাজ করে এবং যে কোনও এজেএক্স জাভাস্ক্রিপ্ট শ্রোত্রে পরিচালনা করতে পারে।

আপনি 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 ট্যাগ ব্যবহার

এইচটিএমএল:

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

JQuery:

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