padding сдвигает фоновую картинку? или дело в чем другом?

Afinagen · April 6, 2012

Подскажите пожалуйста, в чем ошибка.

Я установил фоновую картинку родительскому блоку и вся конструкция из вложенных блоков уехала на величину padding'а :huh:

Но я чую, что дело не совсем в padding'е. Где и что я умудрился напортачить?

Вот код страницы:


<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>уровень 3</title>
  <link rel="stylesheet" href="styles/main.css">
 </head>
 <body>

  <header>
    <div class="menu">
     <a href="#">home</a>
     <a href="#">portfolio</a>
     <a href="#">webhosting</a>
     <a href="#">about</a>
    </div>
  </header>

  <article>
   <div class="left">
    <h1></h1>
    <p></p>
   </div>
   <div class="center">
    <h1></h1>
    <p></p>
   </div>
   <div class="right">
    <h1></h1>
    <p></p>
   </div>
   <div class="last"></div>
  </article>

  <footer>
  </footer>

 </body>
</html>

Вот CSS:


html,body {
           padding: 0px;
           margin: 0px;
           font-size: 62.5%;
          }

body {
      font-size: 10px;
      width: 100%;
      min-height: 100%;
      background: url(../images/fon-square.png) 0% 0% rgb(0, 0, 0);
     }

header {
        width: 100%;
        height: 49%;
        padding: 4% 0% 43% 0%;
        background: url(../images/header.png) 50% 0% no-repeat;
       }

.menu {
       width: 45%;
       margin: 0%;
       padding: 0% 0% 0% 55%;
      }

.menu a {
         width: 12.5%;
         margin: 0% 0% 0% 2.5%;
         background: url(../images/menu-fon.png) 0% 100% repeat-x rgb(255, 164, 60);
         font: bold 1.5em "Arial";
         color: rgb(255, 255, 255);
         padding: 0.5em 0.6em;
         border-radius: 3px;
         text-decoration: none;
        }

article {
         width: 100%;
         background: url(../images/content.png) 50% 50% no-repeat rgb(0, 0, 0);
         padding: 5% 14%;
        }

.left {
       width: 20%;
       padding: 0% 2%;
       background: url(../images/column.png) 100% 50% no-repeat;
       float: left;
      }

.center {
         width: 20%;
         padding: 0% 2%;
         float: left;
        }

.right {
        width: 20%;
        padding: 0% 2%;
        background: url(../images/column.png) 0% 50% no-repeat;
        float: left;
       }

.last {
       height: 0px;
       clear: both;
      }

milkeyway · April 6, 2012

<offtop>для начала погуглите заголовки(h1...) да и паддинг в процентах,в данном случае-неправильно</offtop>

Edited April 6, 2012 by milkeyway

Sign In

padding сдвигает фоновую картинку? или дело в чем другом?

Question

Afinagen

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

milkeyway

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information