Question

我不能进行填充，因为我需要一个负数布局，因此它可以小于填充大小1。边距允许我去负数，这正是我所需要的，但是我似乎无法填写背景色它完全。是否有更好的替代方法可以完全填充所选大小的背景颜色的负边距？

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>

  <head>
    <title>CSS Challenge 3</title>
  </head>

  <style>

  html{
  background-color: #518c6b;

  }

    body{
    position: absolute;
    right: 320px;
  }

    #nav{
    margin:-10px;
    padding:1px;

    }

    #nav li{
    display: inline;
    list-style-type: none;
    padding-right: 24px;
    }

  #numbers{
    width: 150px;
    height: 490px; /*This is what determines the height of the line (the length */
    float: right;
    padding:10px;
    border-top: 3px dashed #ffffff;


  margin-left:24px;
  background-color:#92AD4E;

  }
  #content{
  list-style-type: none;
  text-align: center;
  border-top: 3px dashed #ffffff;

  }

  .copyright{


  background-color: #66CDAA;
   margin-left:-16px;
   margin-right:-1px;

   clear: both;

  }

  ul.noBullets{
  list-style-type: none;
  text-align: center;
  font-size: 18px;

  }

  #yolo{
   background-color:#7c915b;
   height: 509px;
   padding:1px;
   text-align: justify;
   padding-left:15px;

  }

  #header{
    background-color: #92AD4E;
    height: 90px;
    padding-top: 1px;


  }

  #wrap{

    width: 700px;
    height: 9px;

    }

   a {
    text-decoration: none;
    }

  .tab{
    margin-left: 40px;
    }

   #pos{
    margin-top: 13px;
    padding-left: 450px;
  }

  #titlePos{
  padding-top: 3px;
  margin-bottom: -4px;

  }

  #headPos{
  padding-top: 5px;
  }

  #underline{
    text-decoration: underline;
  }

  #sonnetIndex{
    margin-top: -1px;
    margin-left: 7px;
    font-size:18px; 
    font-weight: normal;
  }

  </style>

  <body>
  <div id="wrap">

      <div id="header">
        <h1 id="pos">Shakespear.net</h1>
      </div>

      <div id="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Writings</a></li>
          <li><a href="#">Sonnets</a></li>
          <li><a href="#">Life Story</a></li>
          <li><a href="#">About Shakespear.net</a></li>
        </ul>

      </div>




              <div id="numbers">

                <h2 id="sonnetIndex">Sonnet Index</h2>
                    <ul id="underline">
                          <li><a href="#">Sonnet #1</a></li>
                          <li><a href="#">Sonnet #6</a></li>
                          <li><a href="#">Sonnet #11</a></li>
                          <li><a href="#">Sonnet #15</a></li>
                          <li><a href="#">Sonnet #18</a></li>
                    </ul>
              </div>

      <div id="content">
        <div id="yolo">
           <h1 id="titlePos">Shakespeare's Sonnet #18</h1>
                <p id="headPos">This is one of the most famous of the sonnets. It is referenced
                   in the film Dead Poets Society and gave names to the band The
                   Darling Buds and the book and television series The Darling Buds
                   of May. Read it and weep!</p>
                        <ul class="noBullets">
                          <li>Shall I compare thee to a summer's day?</li>
                          <li>Thou art more lovely and more temperate:</li>
                          <li>Rough winds do shake the darling buds of May,</li>
                          <li>And summer's lease hath all too short a date:</li>
                          <li>Sometime too hot the eye of heaven shines,</li>
                          <li>And often is his gold complexion dimm'd,</li>
                          <li>And every fair from fair sometime declines,</li>
                          <li>By chance, or nature's changing course<br> untrimm'd:</br></li>
                          <li>But thy eternal summer shall not fade,</li>
                          <li>Nor lose possession of that fair thou ow'st,</li>
                          <li>Nor shall death brag thou wander'st in his shade,</li>
                          <li>When in eternal lines to time thou grow'st,</li>
                          <li>So long as men can breathe, or eyes can see,</li>
                          <li>So long lives this, and this gives life to thee.</li>
                        </ul>

                <p class="copyright">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;See the 
                <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
                Shakespeare's sonnets</a> Wikipedia article for more information
                </p>

            </div>

      </div>

    </div>

  </body>
</html>

如何填充边距的整个背景颜色？

0 个答案: