CODEWITHSUNDEEP
csshtmlcss-position
Will Rosenberg
Will Rosenberg

Reputation: 61

Positioning a <input> using CSS

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>

Upvotes: 1

Views: 63

Answers (2)

StefanBob
StefanBob

Reputation: 5128

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>

Upvotes: 2

dukedevil294
dukedevil294

Reputation: 1305

#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.

Upvotes: 1

Related Questions