web-dev-qa-db-fra.com

Problèmes de positionnement CSS: valeur de propriété non valide

RESOLU

J'ai du code HTML/CSS très simple, et peu importe ce que je fais, j'obtiens toujours une exception "valeur de propriété invalide" par chrome, et le logo ne se positionnera pas correctement. Merci pour toute aide.

ÉDITER:

Correction du premier problème, mais maintenant l'image ne bouge pas par rapport à la bordure. Désolé, mais je suis totalement nouveau dans la conception de sites Web et j'ai besoin d'un peu d'aide.

<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>
htmlcsspositionpadding
6
tagduck

Je ne comprends tout simplement pas pourquoi vous avez utilisé padding-bottom au lieu de bottom dans ce cas. En tous cas:

   <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>

Propriété CSS bottom : http://www.w3schools.com/cssref/pr_pos_bottom.asp

Propriété CSS padding-bottom : http://www.w3schools.com/cssref/pr_padding-bottom.asp

4
Vixed

J'avais un problème similaire pour moi.

J'ai écrit 10, au lieu de 10px

J'espère que cela pourra aider.

3
Manohar Reddy Poreddy

Il y a un espace avant le px dans padding-bottom:50 px;. Réparer:

padding-bottom: 50px;
0
Paul Redmond