CODEWITHSUNDEEP
htmlcsspositioninline
Six Quads
Six Quads

Reputation: 855

Logo image and H1 heading on the same line

I want to create my first web page but I encountered a problem.

I have the following code:

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

I'd like to know how to make the logo and the H1 to be in the same line. Thanks!

Upvotes: 83

Views: 646828

Answers (13)

Richa Mehta
Richa Mehta

Reputation: 1

Steps:

  1. Surround both the elements with a container div.
  2. Add overflow:auto to container div.
  3. Add float:left to the first element.
  4. Add position:relative; top: 0.2em; left: 24em to the second element (Top and left values can vary according to you).

Upvotes: 0

javapedia.net
javapedia.net

Reputation: 2731

This is my code without any div within the header tag. My goal/intention is to implement the same behavior with minimal HTML tags and CSS style. It works.

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>

output: Result

Upvotes: 1

shreya_js
shreya_js

Reputation: 107

you can do this by using just one line code..

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

Upvotes: 4

satya pati
satya pati

Reputation: 1

<head>
<style>
header{
    color: #f4f4f4;
    background-image: url("header-background.jpeg");    
}

header img{
    float: left;
    display: inline-block;
}

header h1{
    font-size: 40px; 
    color: #f4f4f4;
    display: inline-block;
    position: relative;
    padding: 20px 20px 0 0;
    display: inline-block;
}
</style></head>


<header>
<a href="index.html">
    <img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
    <a href="index.html">
    <h1><span> Technocrat</span> Blog</h1></a>
</div></header>

Upvotes: 0

RustyIngles
RustyIngles

Reputation: 2493

I'd use bootstrap and set the html as:

<div class="row">
    <div class="col-md-4">
        <img src="img/logo.png" alt="logo" />
    </div>
    <div class="col-md-8">
        <h1>My website name</h1>
    </div>
</div>

Upvotes: 3

Saqib Omer
Saqib Omer

Reputation: 5477

Check this. 

 .header{width:100%;
    }

    .header img{ width: 20%; //or whatever width you like to have

    }

    .header h1{

    display:inline; //It will take rest of space which left by logo.
}

Upvotes: 0

Dylan
Dylan

Reputation: 81

Just stick the img tag inside the h1 tag as part of the content.

Upvotes: 7

Mr. Alien
Mr. Alien

Reputation: 157304

You can do it as Billy Moat told you, wrap your <img> and <h1> in a <div> and use float: left; to float your image to the left, set the <div> width and than set a line-height for your h1 and use <div style="clear: float;"></div> to clear your floating elements.

Fiddle

Upvotes: 3

Danil Speransky
Danil Speransky

Reputation: 30453

As example (DEMO):

HTML:

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

CSS:

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

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

DEMO

Upvotes: 114

Moin Zaman
Moin Zaman

Reputation: 25435

If your image is part of the logo why not do this:

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

Use CSS to style it better.

And it is also best practice to make your logo a hyperlink that take the user back to the home page.

So you could do:

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

Upvotes: 26

Billy Moat
Billy Moat

Reputation: 21050

Try this:

  1. Put both elements in a container DIV.
  2. Give that container the property overflow:auto
  3. Float both elements to the left using float:left
  4. Give the H1 a width so that it doesn't take up the full width of it's parent container.

Upvotes: 22

M. Ahmad Zafar
M. Ahmad Zafar

Reputation: 4939

Try this:

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

Upvotes: 8

Andy
Andy

Reputation: 14575

in your css file do img { float: left; } and h1 {float: left; }

Upvotes: 0

Related Questions