নেভিগেশনের জন্য পৃথককারী

Question

আমাকে নেভিগেশনের উপাদানগুলির মধ্যে পৃথককারী যুক্ত করতে হবে। পৃথককারীগুলি ইমেজ are

আমার এইচটিএমএল স্ট্রাকচার মত হল: ol > li > a > img।

এখানে আমি দুটি সম্ভাব্য সমাধান নিয়ে আসছি:

1. liবিচ্ছেদ (বু!) এর জন্য আরও ট্যাগ যুক্ত করতে ,
2. প্রতিটি উপাদানের ইমেজে বিভাজক অন্তর্ভুক্ত করুন (এটি আরও ভাল, তবে এটি সম্ভাবনা তৈরি করে যে ব্যবহারকারী "হোম" ক্লিক করতে পারে, তবে "পরিষেবাদি" এ পৌঁছাতে পারে, কারণ তারা অন্যটির পিছনে রয়েছে এবং ব্যবহারকারী দুর্ঘটনাক্রমে বিভাজকটিতে ক্লিক করতে পারে যে "পরিষেবা" এর অন্তর্গত);

কি করো?

Comments

শৈল্পিক উপস্থাপনের জন্য +1।

— জেমস পি।

Answer 1

কেবলমাত্র একটিতে পটভূমির চিত্র হিসাবে পৃথককারী চিত্রটি ব্যবহার করুন li।

এটি কেবল তালিকা আইটেমের মধ্যে উপস্থিত হওয়ার জন্য, চিত্রটি বাম দিকে রাখুন li, তবে প্রথমটি নয়।

উদাহরণ স্বরূপ:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

এই সিএসএস প্রতিটি তালিকার আইটেমটিতে চিত্র যুক্ত করে যা অন্য তালিকার আইটেমটি অনুসরণ করে - অন্য কথায় এটি সমস্ত কিন্তু প্রথম।

বিশেষ দ্রষ্টব্য। জেনে রাখুন সংলগ্ন নির্বাচক (লি + লি) আই 6 তে কাজ করে না, সুতরাং আপনাকে কেবলমাত্র প্রচলিত লিতে (শর্তসাপেক্ষ স্টাইলশিট সহ) পটভূমি চিত্র যুক্ত করতে হবে এবং সম্ভবত কোনও একটিতে নেতিবাচক মার্জিন প্রয়োগ করতে হবে।

Comments

:beforeসিউডো সিলেক্টর ব্যবহার করা এটি শেষ উপাদানটির পরে উপস্থিত হতে বাধা দেয়।

— জুন

দুর্দান্ত সমাধান-কোনও কবজ -IE6 সমর্থন মত কাজ? কে পাত্তা দেয়! :) যদি আমরা সকলেই সম্ভবত লিগ্যাসি ব্রাউজারগুলিকে সমর্থন করা বন্ধ করি তবে আমরা লোকদের তাদের ব্যবহার বন্ধ করতে বাধ্য করব।

— জর্দান

border-leftআইটেমগুলির মধ্যে উল্লম্ব রেখা আঁকতে ক্রমের মতো কাজ করে ।

— রিচার্ড-দেগেন

Answer 2

বিভাজকদের জন্য চিত্রগুলি ব্যবহার করার জন্য যদি চাপের প্রয়োজন না হয় তবে আপনি খাঁটি সিএসএস দিয়ে এটি করতে পারেন।

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

এটি মূল তালিকাতে বর্ণিত চিত্রের মতো প্রতিটি তালিকার আইটেমের মধ্যে একটি বার রাখে। তবে যেহেতু আমরা সংলগ্ন নির্বাচকগুলি ব্যবহার করছি , এটি প্রথম উপাদানটির আগে বারটি রাখে না। এবং যেহেতু আমরা :beforeসিউডো সিলেক্টরটি ব্যবহার করছি , এটি শেষে একটি রাখে না।

Comments

কি দারুন! আমার ফুটার মেনুটির জন্য এটি ঠিক আমার প্রয়োজন ছিল needed অবশ্যই কিছু অতিরিক্ত সিএসএসের সাথে।

— ভ্লাদিমির

প্রযুক্তিগতভাবে আপনি এখনও একটি চিত্র ব্যবহার করতে পারেন তবে বেস 64 এটি এনকোড করে এবং চিত্রটি ইনলাইন সংরক্ষণ করতে পারে। css-tricks.com/data-uris

— ই

@ জ্রু কি পৃথকদের অবস্থানকে উল্লম্বভাবে পরিবর্তন করাও সম্ভব? এটি শীর্ষ প্যাডিং / মার্জিনের প্রতিক্রিয়া জানায় না।

— ফ্লোরিস

Answer 3

আপনি liযেখানে একটি বিভাজক যুক্ত করতে চান সেখানে একটি উপাদান যুক্ত করতে পারেন

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

সিএসএসে আপনি নিম্নলিখিত কোড যুক্ত করতে পারেন।

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

এটি কার্যকর করার গতি বাড়িয়ে তুলবে কারণ এটি কোনও চিত্র লোড করবে না। শুধু এটি পরীক্ষা .. ..

Comments

আপনি কিভাবে ব্যাখ্যা করতে পারেন? তবে সর্বদা অন্য উপায় ... সিএসএস 3: আমরা এনথ এলিমেন্টটি পেতে এবং এতে বিভাজক যুক্ত করতে পারি।

— রাজীব পিংগলে

ড্রাট, কিছুটা গণ্ডগোল আমি নিজেই .ুকলাম। আমি মাত্র 30 মিনিট স্ট্যান্ডার্ড ডকুমেন্টস, আরডাব্লুডি পত্রপত্রিকা, এবং এমনকি আমার বক্তব্য প্রমাণ করার জন্য বিভিন্ন স্ক্রিন পাঠকদের চেষ্টা করেছিলাম spent তবে কমপক্ষে স্ক্রিনের পাঠকরা বেশি খালি বুলেটগুলি না পড়ার পক্ষে যথেষ্ট চালাক (যদি আপনি @ উল @ এর পরিবর্তে @ ওল @ ব্যবহার করার সময় অনুপস্থিত বিকল্পগুলি গণনা করতে পারেন)। সুতরাং আমি কেবল উল্লেখ করতে পারি যে এখানে @ li @ এর ব্যবহার কলাম লেআউট অর্জনের জন্য একটি টেবিল ব্যবহার করার মতো একই বিভাগে।

— ভোলকার স্টলজ

Answer 4

অন্যান্য সমাধান ঠিক আছ, কিন্তু খুব অবশেষে বিভাজক যোগ করার জন্য যদি ব্যবহার কোন প্রয়োজন নেই : পর বা খুব প্রারম্ভে যদি ব্যবহার : সামনে ।

তাই হয়:

কেস: পরে

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

কেস: আগে

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

Answer 5

মেনু পাঠ্যের তুলনায় বিভাজকটি উল্লম্বভাবে কেন্দ্রিকভাবে পেতে,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

Answer 6

liপটভূমিতে বিভাজক যুক্ত করুন এবং নিশ্চিত করুন যে বিভাজকটি কভার করার জন্য লিঙ্কটি প্রসারিত হয় না, যার অর্থ বিভাজক ক্লিক-সক্ষম হবে না।

Answer 7

Sass ব্যবহারকারীদের জন্য , আমি এই উদ্দেশ্যে একটি মিশ্রণ লিখেছি :

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

উদাহরণ:

@include addSeparator('li', '|', 1em);

যা আপনাকে এটি দেবে:

li+li:before {
  content: "|";
  padding: 0 1em;
}

Comments

এটি '|' দেখাচ্ছে না কিছু কারণে? কোন কারণ নেই কেন?

— জেমস 111

চিন্তা করবেন না আমি কীভাবে এটি করব তা বুঝতে পেরেছি। আমাকে একটি

— যুক্তও

Answer 8

আমি বিশ্বাস করি এটির সর্বোত্তম সমাধানটি আমি ব্যবহার করি এবং এটি একটি প্রাকৃতিক CSS সীমানা:

border-right:1px solid;

আপনার প্যাডিংয়ের যত্ন নেওয়া দরকার:

padding-left: 5px;
padding-right: 5px;

শেষ অবধি, যদি আপনি এই পৃথক সীমানাটি শেষ লি পছন্দ না করতে চান তবে এটি সর্বশেষ সন্তানের "সীমান্ত-ডান" এর মতো "কেউ নয়" দিন:

li:last-child{
  border-right:none;
}

শুভকামনা :)

Answer 9

এটিকে তালিকার উপাদানটিতে একটি পটভূমি হিসাবে রাখুন:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

এর পরে, আমি অ্যাক্সেসযোগ্যতার জন্য আলাদা মার্কআপের প্রস্তাব দিই:
চিত্রগুলি ইনলাইন এম্বেড করার পরিবর্তে পাঠ্যকে পাঠ্য হিসাবে ছড়িয়ে দিন, প্রতিটিটিকে একটি স্প্যান দিয়ে ঘিরে ফেলুন, ব্যাকগ্রাউন্ডটিকে ব্যাকগ্রাউন্ড হিসাবে চিত্রটি প্রয়োগ করুন এবং তারপরে প্রদর্শনটি পাঠ্যটি আড়াল করুন: কিছুই নেই - এটি আরও অনেক স্টাইলিং ফ্লেক্সিবিলিটি দেয় এবং আপনাকে 1px প্রশস্ত বিজি চিত্রের সাহায্যে টাইলিং ব্যবহার করতে দেয়, ব্যান্ডউইথ সংরক্ষণ করে এবং আপনি এটি একটি সিএসএস স্প্রিতে এম্বেড করতে পারেন, যা এইচটিটিপি কলগুলি সংরক্ষণ করে:

এইচটিএমএল:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

সিএসএস:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

হালনাগাদ করা ঠিক আছে, আমি দেখতে পাচ্ছি যে অন্যরাও আমার আগে একই রকম উত্তর পেয়েছিল - এবং আমি নোট করেছি যে জন এছাড়াও পৃথককে প্রথম উপাদানটির সামনে উপস্থিত হতে বাধা দেওয়ার জন্য একটি উপায় অন্তর্ভুক্ত করেছে, লি + লি নির্বাচক ব্যবহার করে - যার অর্থ কোনও লি পরে অন্যের পরে আসছে লি।

Comments

হ্যাঁ - আমি কেবল এটি সন্ধান করেছি এবং আপনি ঠিক বলেছেন। আমার উত্তর সম্পাদনা করা হয়েছে, এবং আপনি নেতৃত্ব দেওয়ার পর থেকে আমি আপনার +1 উপহার দিচ্ছি।

— ফাউস্ট

ধন্যবাদ। প্যাডিংয়ের জন্য +1 যা আমি যুক্ত করতে ভুলে গেছি।

— এজেসিডাব্লু