how to position a search bar in html/css


Tags: html,css

Problem :

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?



Solution :

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.

Demo


    CSS Howto..

    how to trim css code to just one line [closed]

    How do I use PHP to apply css properties? [closed]

    How to have two sections using 50% of the total height?

    Bootstrap custom CSS rule how to set text-decoration:none for hyperlink?

    How to make the gif photo to be same width as the table?

    How to click on a link from the header and then go back with HTML, Javascript and CSS? [closed]

    How to put things in divs with true border

    How to use font-family with same name?

    How do I get text to go in the middle of a div? [duplicate]

    How to achieve multi column layout with inline images

    How to correct CSS formatting problem in Visual Studio

    How to change TextBox class based on input

    CKEditor — How can I add document-specific CSS styles

    How to check if an element has a hover property and do something to another element in css [closed]

    How to make a 3D banner overlay (??) with CSS

    How to make CSS sourcemapping work in Chrome with Compass (SASS)

    server-side control - how set background with css ? (link & hover)

    How can I position my navigation bar further up on the page?

    How to enlarge and shrink an element in a loop animation through jquery or CSS

    How to write css for specific div selection like before after

    How to vertically align images inside a list

    How to create multicolored circle in css

    How do i automatically resize Fonts and Images (complete Website) on window-resize?

    Python: How to override text area in form using CSS

    show image in aspect ratio and all image size same height and width

    How to solve Firefox 2.0 cross browser issues?

    Coding the slideshow

    Changing opacity for div in div - is this possible? How?

    How to increase width of Bootstrap container on Max width?

    How can i Convert left vertical menu to right?