tagduck tagduck - 24 days ago 10
CSS Question

CSS positioning issues: invalid property value

SOLVED

I have that very simple CSS/html code, but no matter what I do, i always get an "invalid property value" exception by chrome, and the logo won't be positioned properly.
Thanks for any help.

EDIT:

fixed the first problem, but now the image does not move related to the border.
Sorry, but I'm totally new to web design and need a little bit of help.

<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>my website</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.header {
width: 100%;
height: 100px;
border: none;
border-bottom-style: solid;
border-bottom-width: 5px;
position: relative;
border-bottom-color: rgb(220,30,60);
}

.logo {

position: absolute;
padding-bottom:50 px;
height: 150%;
width: auto;

}


</style>

</head>

<body>
<div class="header" id="header">
<img id="logo" class="logo" src="image.png"/>
</div>
</body>
</html>

Answer

I just don't understand why you used padding-bottom instead of bottom in this case. Anyway:

   <html lang="de" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>my website</title>
        <style type="text/css">
             *{ padding: 0; margin: 0; } 
            .header {
                position: relative;
                height: 100px;
                border-bottom: 5px solid rgb(220,30,60);
            }
            .logo {
                position: absolute;
                bottom:50px;
                height: 150%;
                width: auto;
            }
        </style>
    </head>
    <body>
     <div class="header" id="header">
        <img id="logo" class="logo"  src="image.png"/>
     </div>
    </body>
    </html>

CSS bottom property: http://www.w3schools.com/cssref/pr_padding-bottom.asp

CSS padding-bottom property: http://www.w3schools.com/cssref/pr_pos_bottom.asp

Comments