Issue
I'm creating a header. It has a logo on the left side and on the right there are a search bar and corresponding search button. I had already added the logo and search bar. Then I added the button. When I did this it made my search bar move a little down and stick past the confines of my header. It also made the button stick a little up past the viewport. Now it looks like this: My Header
I've tried a few things but it's hard to know what to try when you don't have a clue what principles are causing your problem's existence. I'm new to coding. Here's my html:
<body>
<header>
<div class="container">
<div class="logo">
<img src="/Images/logo v2.png" alt="Solo Scriptura Logo"/>
</div>
<div class="search-set">
<form id="s-bar-holder" role="search">
<input type="query" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site."/>
<button class="find">
<img src="/Images/Vector/icons/search-svgrepo-com.svg" />
</button>
</form>
</div>
</div>
</header>
<main></main>
</body>
Here's my css:
body {
max-width: 5000px;
min-width: 500px;
}
header {
display:flex;
background-color: rgb(78,78,78);
margin-top: -8px;
margin-left: -7px;
margin-right: -8px;
height: 60px;
width: auto;
}
.container{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.logo {
height: 60px;
width: 300px;
overflow: hidden;
display: flex;
align-self: flex-start;
}
.logo > img {
width: 100%;
height: 100%;
object-fit: cover;
}
#search-bar {
background-color: rgb(78,78,78);
color: rgb(0,0,0);
outline: none;
height: 58px;
width: 200px;
font-size: 18px;
border-left: 2px solid rgb(86,86,86);
border-right: none;
border-top: none;
border-bottom: none;
cursor: auto;
}
button {
border: none;
background-color: rgb(78,78,78);
}
button > img{
height: 58px;
width: 55px;
overflow: hidden;
}
Thank you for helping.
Solution
You can fix this by adding vertical-align: top to the search bar and button like this:
#search-bar {
vertical-align: top;
...etc.
}
button > img {
vertical-align: top;
...etc.
}
Codepen here
Answered By - Justin Carter
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.