2016-11-08 3 views
0

решаемыеCSS вопросы позиционирования: недопустимое значение свойства

У меня есть это очень простой CSS/HTML код, но независимо от того, что я делаю, я всегда получает «значение недействительного свойства» исключение хрома, и логотип выиграли» t правильно позиционироваться. Спасибо за любую помощь.

EDIT:

зафиксировал первую проблему, но теперь изображение не двигаться, связанные с границей. Извините, но я совершенно не знаком с веб-дизайном и вам нужна небольшая помощь.

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

'50 px' должен быть' 50px'. –

+0

Да, исправлено, но теперь, когда img не будет перемещаться относительно нижней границы. Я думал, что заполнение задает расстояние до границы div? – tagduck

+0

@tagduck взгляните на мой ответ. http://stackoverflow.com/a/40489435/1076753 – Vixed

ответ

0

Я просто не понимаю, почему вы использовали отступы-нижний вместо дна в этом случае. В любом случае:

<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 набивки дно свойства: http://www.w3schools.com/cssref/pr_pos_bottom.asp

+0

Спасибо, дно работало для меня. Почему я не должен использовать padding-bottom? – tagduck

+0

Поскольку отступы и положение являются двумя различными свойствами. – Vixed

+0

хорошо, спасибо за вашу помощь и время. – tagduck

0

Там в пространство перед px в padding-bottom:50 px;. Fix:

padding-bottom: 50px;