CSS定位问题:属性值无效

问题描述 投票:2回答:3

解决了

我有一些非常简单的HTML / CSS代码,无论我做什么,我总是通过chrome获得“无效的属性值”异常,并且徽标将无法正确定位。谢谢你的帮助。

编辑:

修复了第一个问题,但现在图像不会移动与边框相关。对不起,但我对网页设计完全陌生,需要一些帮助。

<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:50px;
            height: 150%;
            width: auto;                
        }    

    </style>        
</head>

<body>
    <div class="header" id="header">
        <img id="logo" class="logo"  src="image.png"/>
    </div>
</body>
</html>
html css position padding
3个回答
4
投票

我只是不明白为什么你在这种情况下使用padding-bottom而不是bottom。无论如何:

   <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底部属性:http://www.w3schools.com/cssref/pr_padding-bottom.asp

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


2
投票

我有类似的问题。

我写了10,而不是10px

希望有所帮助。


0
投票

pxpadding-bottom:50 px;之前有一个空间。固定:

padding-bottom: 50px;
© www.soinside.com 2019 - 2024. All rights reserved.