html - लोगो चित्र और H1 एक ही पंक्ति पर शीर्षक




css position (8)

मैं अपना पहला वेब पेज बनाना चाहता हूं लेकिन मुझे एक समस्या का सामना करना पड़ा।

मेरे पास निम्नलिखित कोड हैं:

<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>

मैं यह जानना चाहता हूं कि लोगो और H1 को एक ही पंक्ति में कैसे बनाया जाए। धन्यवाद!


अपनी सीएसएस फ़ाइल में img { float: left; } img { float: left; } और h1 {float: left; } h1 {float: left; }


आप इसे कर सकते हैं जैसा कि बिली मोत ने आपको बताया था, अपने <img> और <h1> को <div> में लपेटें और float: left; उपयोग करें float: left; अपनी छवि को बाईं ओर फ़्लोट करने के लिए, <div> width सेट करें और अपने h1 लिए line-height सेट करें और अपने फ़्लोटिंग तत्वों को साफ़ करने के लिए <div style="clear: float;"></div> का उपयोग करें।

Fiddle


इसे इस्तेमाल करे:

  1. दोनों तत्वों को एक कंटेनर DIV में डालें।
  2. उस कंटेनर को प्रॉपर्टी ओवरफ्लो करें: ऑटो
  3. फ्लोट का उपयोग करके दोनों तत्वों को बाईं ओर फ्लोट करें: बाएं
  4. H1 को एक चौड़ाई दें ताकि वह मूल कंटेनर की पूरी चौड़ाई न ले।

इसे इस्तेमाल करे:

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>

उदाहरण के लिए ( DEMO ):

HTML:

<div class="header">
  <img src="img/logo.png" alt="logo" />
  <h1>My website name</h1>
</div>

सीएसएस:

.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

DEMO


बस सामग्री के भाग के रूप में h1 टैग के अंदर img टैग चिपकाएँ।


यदि आपकी छवि लोगो का हिस्सा है तो ऐसा क्यों न करें:

<h1><img src="img/logo.png" alt="logo" /> My website name</h1>

बेहतर तरीके से स्टाइल करने के लिए CSS का उपयोग करें।

और अपने लोगो को हाइपरलिंक बनाने के लिए सबसे अच्छा अभ्यास भी है जो उपयोगकर्ता को होम पेज पर वापस ले जाता है।

तो आप कर सकते हैं:

<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>

हेडर टैग के भीतर बिना किसी div के यह मेरा कोड है। मेरा लक्ष्य / इरादा न्यूनतम HTML टैग और CSS शैली के साथ समान व्यवहार को लागू करना है। यह काम करता हैं।

whois.css

.header-img {
    height: 9%;
    width: 15%;
}

header {
    background: dodgerblue;

}

header h1 {
    display: inline;
}

whois.html

<!DOCTYPE html>
<head>
    <title> Javapedia.net WHOIS Lookup </title>
    <link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
    <header>
        <img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
        <h1>WHOIS Lookup</h1>
    </header>
</body>

उत्पादन:





inline