Html Question posted in
Some basic documentation can be found here.

Html – put search bar next to logo

I am a newbie into HTML and CSS.

I can not figure out how to put the search bar next to my sample logo (this logo is only a placeholder for another one). Like how to access the search bar box

Picture 1 is how it looks like:
see pic1
Picture 2 is how I want it to look like:
see pic2

my code so far:

HTML:

<!DOCTYPE html> <html lang="de">

<head>
    <header>
            <title>Meine Rezepte</title>
                <link href="style.css" rel="stylesheet" type="text/css">
                    <img src="logo.png" alt="Logo">
                    <input type="search" id="search" placeholder="Suche"/>

    </header> </head>

<body> </body> </html>

CSS:

img {
      width: 100px;
      padding-left: 300px;
      padding-top: 50px }

Can anyone help me?

I already tried it by div class, container, flex.. but nothing seem to work. If any it only changes the search bar itself

(dont judge my code, I know for advanced developer it may look horrible haha)

Tags:

2

Answers


  1. 0

    First of all you can’t add img, input etc inside your head tag.

    <!DOCTYPE html>
<html>

  <head>
    <title>Page Title</title>
     <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>

    <div class="content">
      <img src="logo.png" alt="Logo">
      <input type="search" id="search" placeholder="Suche" />

    </div>
  </body>

</html>


img {
  width: 100px;
  height: 100px;
}

.content {
  display: flex;
  justify-content: space-around;
}
    Login or Signup to reply.
  2. 0

    wrap your img and input in a div and style that div with the below styling :

    div {
    display:flex;
    justify-content:space-between;
    align-items:flex-start
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search