Login/Register
Logo image and H1 heading on the same line
Asked Answered
Solved htmlcsspositioninline
S

13

82

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!

Secret answered 28/7, 2012 at 13:12 Comment(0)
H
114

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

Hereupon answered 28/7, 2012 at 13:19 Comment(2)
@Speransky Got almost same.. ;) – Barnacle
@SperanskyDanil You deserve it too am upvoting you, you missed out the line-height and clear I guess – Barnacle
D
26

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>
Doglike answered 28/7, 2012 at 13:15 Comment(1)
Is is "legal" per HTML specification? – Bracci
D
22

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.
Diaconicum answered 28/7, 2012 at 13:15 Comment(0)
H
8

Try this:

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
Hence answered 28/7, 2012 at 13:13 Comment(0)
R
7

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

Riddick answered 12/3, 2013 at 18:47 Comment(1)
@Kermit It's pretty self explanatory and worked for me! – Corriecorriedale
S
4

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

<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
Sahib answered 2/1, 2019 at 16:27 Comment(0)
B
3

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

Barnacle answered 28/7, 2012 at 13:24 Comment(0)
K
3

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>
Kex answered 7/8, 2015 at 15:32 Comment(0)
N
1

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

Nuke answered 16/2, 2019 at 15:32 Comment(0)
H
0

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

Hillyer answered 28/7, 2012 at 13:13 Comment(0)
F
0

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.
}
Fitly answered 2/7, 2014 at 10:50 Comment(0)
P
0
<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>
Percussive answered 20/6, 2018 at 6:36 Comment(0)
K
0

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).
Kaule answered 25/6, 2019 at 8:21 Comment(1)
Welcome to Stack Overflow @Richa It is always better to include the source or references in support of your answer and If possible provide why your answer works... – Pallette

© 2022 - 2024 — McMap. All rights reserved.