This is my code so far:
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home_style.css">
</head>
<body>
<div class="header">
<div class="search_bar">
<input type="text" name="search" value="search">
</div>
</body>
</html>
css:
html,body{
height:100%;
min-height:100%;
width:100%
min-width:100%;
}
.header{
margin-bottom:0;
height:10%;
width:100%;
background-color:#343430;
}
.search_bar input[type="text"]{
position:relative;
left:20%;
top:25%;
width:30%;
background-color:white;
color:grey;
}
How do I make the search bar be positioned further down, i need the search bar to be positioned in the middle of the header not the top. Why is top:25% not working?
Replace position:relative with position:absolute:
html, body {
height:100%;
min-height:100%;
width:100% min-width:100%;
}
.header {
margin-bottom:0;
height:10%;
width:100%;
background-color:#343430;
}
.search_bar input[type="text"] {
position:absolute;
left:20%;
top:25%;
width:30%;
background-color:white;
color:grey;
}
If you look at the definition for relative positioning:
The element is positioned relative to its normal position,
so "left:20" adds 20 pixels to the element's LEFT position
your search bar was really positioning itself.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments