0

Trying to create a basic header but have run into problems with the positioning text inside the user_login element.

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" placeholder="Search magical instruments, tricks, books and more">
            </div>
            <div class="user_settings">
                <a href="settings.html"><img src="onebit_09.png" width="24px" height="24px"></a>
            </div>
            <div class="user_login">
                <p class="login_properties">Test</p>
            </div>
        </div>
    </body>
</html>

css:

html,body {
    height     : 100%;
    min-height : 100%; 
    width      : 100%
    min-width  : 100%;
    margin     : 0;
    padding    : 0;
}

.header {
    margin-top       : 0;   
    margin-bottom    : 0;
    height           : 10%; 
    width            : 100%;
    background-color : #343430;
}

.search_bar input[type="text"] {
    position            : absolute; 
    left                : 20%;
    top                 : 5%;
    width               : 27%;
    height              : 2.75%;
    padding             : 5px;
    padding-right       : 50px;
    outline             : none;
    border              : 2px solid #9C4B8F;
    border-radius       : 5px;
    background-color    : #FBFBFB;  
    font-family         : Cambria, Cochin, Georgia, serif;
    font-size           : 16px;
    color               : grey;
    background-image    : url('search.png');
    background-position : 100% -10px;
    background-repeat   : no-repeat;
    margin-top          : -1.375%;
}

.search_bar input[type="text"]:focus {
    background-color : #FFFFFF;
    border-color     : #333333;
}

.user_login {
    position         : absolute;
    left             : 70%;
    top              : 5%;
    width            : 5%;
    height           : 2.75%;
    padding          : 5px;
    margin           : -1.375% 0 0 -2.5%;
    color            : white;
    background-color : #9C4B8F;
    border-radius    : 5px;
}

p.login_properties {
    position : absolute;
    height   : 50%;
    width    : 75%;
    top      : 0px;
}

.user_settings img {
    position : absolute;
    top      : 5%;
    left     : 95%;
    height   : 48px;
    width    : 48px;
    margin   : -24px 0 0 -24px;
}

Why is top 0px in login properties positioning the text 'Test' halfway down the user_login element? It seems I have mistakenly made the top of the element the middle somewhere, please help

Johannes H.
  • 5,875
  • 1
  • 20
  • 40
user3213163
  • 607
  • 3
  • 8
  • 10
  • Because

    tag is block-level element. You can apply display: inline in css to change it to inline-element.

     – yalight Feb 16 '14 at 09:50
  • Please narrow it down to a minimal example. – Johannes H. Feb 16 '14 at 09:51
  • @yalight What'S the problem with block elements? they can be positioned absolute, too... – Johannes H. Feb 16 '14 at 09:52
  • the percentage height of an element is a percentage of its container height. Eg the height of the search bar is 2.75% of the header is 10% of the viewport. If the viewport is 800px the search bar is 2.2px – otherDewi Feb 16 '14 at 09:56
  • a good way to bug fix positioning is put a border around all your elements. In css add `*{border:solid 1px red;}` – otherDewi Feb 16 '14 at 10:02
  • @Johannes H. I think the

    tag will have a default new line as the disscusion in http://stackoverflow.com/questions/2076109/how-to-avoid-a-new-line-with-p-tag , so for this question, he shouldn't use

    tag there

     – yalight Feb 16 '14 at 10:02

1 Answers1

0

It's because the default margin of the p element.

nemvalid
  • 1