ऐसा लगता है कि वहाँ कुछ अलग तकनीकें हैं, इसलिए मैं इस पर "निश्चित" उत्तर पाने की उम्मीद कर रहा था ...
वेबसाइट पर, लोगो बनाने के लिए यह आम बात है कि मुखपृष्ठ से लिंक हो। मैं वही करना चाहता हूं, जबकि खोज इंजन, स्क्रीन रीडर, IE 6+, और ब्राउज़रों के लिए सबसे अच्छा अनुकूलन, जिनके पास CSS और / या छवियां अक्षम हैं।
उदाहरण एक: एक h1 टैग का उपयोग नहीं करता है। एसईओ के लिए अच्छा नहीं है, है ना?
<div id="logo">
<a href="">
<img src="logo.png" alt="Stack Overflow" />
</a>
</div>उदाहरण दो: यह कहीं मिला। सीएसएस लगता है कि थोड़ा हैकी है।
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>/* css */
#logo {
padding: 70px 0 0 0;
overflow: hidden;
background-image: url("logo.png");
background-repeat: no-repeat;
height: 0px !important;
height /**/:70px;
}उदाहरण तीन: एक ही HTML, पाठ-इंडेंट का उपयोग करके अलग-अलग दृष्टिकोण। यह छवि बदलने के लिए "फ़ार्क" दृष्टिकोण है।
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>/* css */
#logo {
background: transparent url("logo.png") no-repeat scroll 0% 0%;
width: 250px;
height: 70px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}उदाहरण चार: लेहि-लैंगरिज-जेफरीज विधि । छवियों और / या सीएसएस बंद होने पर प्रदर्शित करता है।
<h1 id="logo" class="logo">
<a href="">Stack Overflow</a>
</h1>/* css */
h1.logo {
margin-top: 15px; /* for this particular site, set this as you like */
position: relative; /* allows child element to be placed positioned wrt this one */
overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
padding: 0; /* needed to counter the reset/default styles */
}
h1.logo a {
position: absolute; /* defaults to top:0, left:0 and so these can be left out */
height: 0; /* hiding text, prevent it peaking out */
width: 100%; /* 686px; fill the parent element */
background-position: left top;
background-repeat: no-repeat;
}
h1#logo {
height: 60px; /* height of replacement image */
}
h1#logo a {
padding-top: 60px; /* height of the replacement image */
background-image: url("logo.png"); /* the replacement image */
}इस तरह की चीज़ के लिए कौन सी विधि सबसे अच्छी है? कृपया अपने उत्तर में html और css प्रदान करें।
आपको इस विषय की जाँच करनी चाहिए: stackoverflow.com/questions/1874895/…
—
me
मैट कट्स ने इस सवाल का जवाब दिया। youtu.be/fBLvn_WkDJ4
—
troynt
क्या
—
बोबो
titleविशेषता में नहीं होना चाहिए <a>?
इस प्रश्न को ऑफ-टॉपिक के रूप में चिह्नित नहीं किया जाना चाहिए। यह सीएसएस और खोज इंजन अनुकूलन के बारे में एक बहुत स्पष्ट रूप से परिभाषित प्रश्न है। सिर्फ इसलिए कि यह C # नहीं है इसका मतलब यह कोड नहीं है।
—
माइकमेर्को
@troynt मुझे कभी-कभी भ्रामक सलाह देने के लिए मैट कट्स मिलते हैं। जैसे कि मैं उसे नहीं देखता हूं।
—
TheBlackBenzKid