CODEWITHSUNDEEP
htmlcssstylingoverlap
beware4
beware4

Reputation: 3

Button and Input Keep Overlapping Each Other

Ok so I'm trying to program a bar that appears at the top of the webpage. On that bar I want there to be a title, a button, and an input/search bar. My problem is that the input keeps overlapping the button in the top bar. Please note that the bar at the top is a div. Here is the link to the page with the bug: Link to the page.

This is the HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>Langmesh</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <div id="topbardiv">
      <h1 id="titletext">Langmesh</h1>
      <button onclick="browse()" id="browsebutton">Browse</button>
      <input type="text" id="searchbar" value="Search">
    </div>
  </body>
</html>

Here is the CSS code:

#titletext {
  font-size: 50px;
  font-family: "Brush Script MT", sans-serif;
}

#topbardiv {
  background-color: darkorange;
  text-align: center;
  border: 10px solid lightgray;
}

#topbardiv h1,
#topbardiv button {
  margin: 0px;
  display: inline-block;
  padding: 1em;
  color: white;
  -webkit-text-stroke: 1.5px #000000;
}

#browsebutton,
#searchbar {
  height: 150px;
  width: 100px;
  font-size: 30px;
  font-family: "Brush Script MT", sans-serif;
  background-color: darkorange;
  border: 0;
}

I have not added any Javascript yet.

If this is a stupid question with a simple answer and I'm just dumb, feel free to criticize me.

I tried using text a button and an input in the same div and used css to put them all right next to eachother and I expected that it would look like a bar at the top with a title a browse button and a search bar but instead the search bar and the browse button ended up overlapping.

I am using a Windows 10 OS and replit to program the page and a chrome web browser.

Upvotes: 0

Views: 394

Answers (2)

KayD
KayD

Reputation: 826

it's because you have set the width of the #browsebutton and #searchbar elements. Please unset it and it will work.

Upvotes: 1

ivan irvine
ivan irvine

Reputation: 1

* {
  margin: 0;
  font-family: 'roboto';
}
.container {
text-align: center;
}
.container input {
border: none;
  box-shadow: 0px 0px 2px;
  height: 33px;
}
.container button {
border: none;
  box-shadow: 0px 0px 2px;
  height: 33px;
}
.container h1 {

}
.background_css {
  width: 100%;
  background: orange;
  padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Langmesh</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <div class="container">
      <div class="background_css">
    <h1 id="titletext">Langmesh</h1>
 
<form method="POST" action="page.html" class="search_css">
  <input type="search" placeholder="Search..."><button type="submit">Search</button>
    </form>
    </div>
  </div>
  </body>
</html>

Upvotes: 0

Related Questions