Positioning a <input> using CSS

Question

I am positioning elements on page and one of the elements won't move(input type="image"). I was wondering why it isn't moving as all the other elements are moving. Here is my code:

.search {
  position: relative;
  display: inline;
}

.search-bar {
  width: 45%;
  height: 50px;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 27.5%;
  padding: 5px 5px;
  z-index: -2;
}

#search-button {
  width: ;
  height: ;
  border: 5px solid rgb(255, 84, 132);
  border-radius: 100px 45px 100px 45px;
  postition: absolute;
  top: 500px;
  left: 50%;
  z-index: -1;
}

.logo {
  position: absolute;
  top: 29.9%;
  left: 36.25%;
  width: 27.5%;
  display: inline;
}

<body>
  <!--change image to logo and alt to name-->
  <img class="logo" alt="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHdn3LhI9Zg829h1vZVJQ4Ngk-6bFqXdAdw2pf8fycGVcl_lO3ow"><br>


  <!--search bar-->
  <!--fill in action and check if target is correct-->
  <form action="hey" target="_self" method="get">
    <input class="search-bar" type="text" name="search-bar" placeholder="Search..." autofocus>
    <input id="search-button" alt="logo" type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXZJ6ZoHbGStW2ZFfY1Ewb6Ev_-is9K0UWpzgulaC81HkOSFM">

  </form>


</body>

StefanBob · Accepted Answer · 2018-06-08 21:41:42Z

2

position was spelt wrong as postition. Also included values for your empty width and height rules.

.search {
  position: relative;
  display: inline;
}

.search-bar {
  width: 45%;
  height: 50px;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 27.5%;
  padding: 5px 5px;
  z-index: -2;
}

#search-button {
  width: 20px;
  height: 20px;
  border: 5px solid rgb(255, 84, 132);
  border-radius: 5px;
  position: absolute;
  top: 500px;
  left: 50%;
  z-index: -1;
}

.logo {
  position: absolute;
  top: 29.9%;
  left: 36.25%;
  width: 27.5%;
  display: inline;
}

<body>
  <!--change image to logo and alt to name-->
  <img class="logo" alt="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHdn3LhI9Zg829h1vZVJQ4Ngk-6bFqXdAdw2pf8fycGVcl_lO3ow"><br>


  <!--search bar-->
  <!--fill in action and check if target is correct-->
  <form action="hey" target="_self" method="get">
    <input class="search-bar" type="text" name="search-bar" placeholder="Search..." autofocus>
    <input id="search-button" alt="logo" type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXZJ6ZoHbGStW2ZFfY1Ewb6Ev_-is9K0UWpzgulaC81HkOSFM">

  </form>


</body>

edited Jun 8, 2018 at 21:41

answered Jun 8, 2018 at 21:37

StefanBob

5,1182 gold badges35 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

takendarkk Over a year ago

You should also state that you added height and width values. If that change is not relevant to the answer, you should not change those things.

StefanBob Over a year ago

Fair enough. He should definitely fill those in

user9916031 Over a year ago

Thank You sooooo much! I feel so stupid for doing that. I've just started coding so still making stupid mistakes.

StefanBob Over a year ago

It happens! Maybe use a code editor like VScode it will highlight syntax errors like that. Mark as correct answer if you think it is :)

dukedevil294 · Accepted Answer · 2018-06-08 21:10:39Z

1

#search-button{
    width:;
    height:;
}

You are missing a height and width, which makes these invalid and none of the other rules (like position or top) are being applied. Either remove these or enter acceptable values to fix the issue.

answered Jun 8, 2018 at 21:10

dukedevil294

1,30517 silver badges32 bronze badges

Collectives™ on Stack Overflow

Positioning a <input> using CSS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related