0

#contentフッターの余白を変更して、ウェブページの幅に拡大しようとしていますが、セクションに追加した左右の余白の50ピクセルの影響を受けているようです。フッターセクションのコンテンツの余白の影響を取り除くために、ここで欠落しているプロパティは何ですか？

HTML

<div id="wrapper" />
      <div id="header" />
      <div id="mast"><img src="http://i1256.photobucket.com/albums/ii488/terafanb/guildwars2/26.png" height="99" width="774=" /></div>
      <div id="below-mast" />
      <div id="left" class="column"><img src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="226" border="0" alt="Crusader Army" /></div>
      <div id="center" class="column"><img src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="400" border="0" alt="Crusader Army" /></div>
      <div id="right" class="column"><img src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="139" border="0" alt="Crusader Army" /></div>
      <div></div>
      <div id="content" />
      <p>
      <div class="Heading">Forward Exchange *</div>
      $500.00 - collected upon the closing of the Relinquished Property.
      $500.00 - collected upon closing of each Replacement Property purchased.
      * Special credits may apply - Call Us.<br /></br>
      <div id="we-pay">
        <br />
        <div class="Heading">We pay interest</div>
        </br>
        We provide full disclosure of the fees involved in the transaction in the Exchange Agreement. Our customers are entitled to receive earned interest based on the First National Bank of Durango Investment Money Market rate, from the time when the Relinquished Property funds are initially deposited. Interest does not accrue on those funds withdrawn during the first 30 calendar days after the funds are deposited in the Exchange Trust Account. Also, interest does not accrue if customer elects to have exchange funds held at First National Bank of Durango in an Unlimited FDIC insurance non-interest bearing account (available through December 31, 2012)
      </div>
      <br />
      <div class="Heading">
        Safe-Harbor Reverse Exchange <br />
        <h2>We charge the following fees:</h2>
      </div>
      <div id="prices">$2,500.00 – Title holding fee<br /> 
        $500.00 – LLC fee<br />
        $200.00 – Monthly Rent<br />
        Plus – Forward Exchange fees<br />
        <br />
      </div>
      <div id="note">
        <p>Note: If any improvements need to be made to the parked property,
          being held by the EAT ( Exchange Accommodator Titleholder )
          there will be an additional fee of 1% of the final sales price to Taxpayer.
        </p>
        <div>
          <br /></br>
          <div id="disclaimer">Fees are subject to change without prior notice</p></div>
        </div>
        <div id="footer">
          <a href="index.html">Home</a>
          <strong>l</strong> <a href="whatIs1031.html">What is a 1031 Exchange?</a> <strong>l</strong> <a href="exchangeRequ.html">
          1031 Exchange Requirements</a> <strong>l</strong> <a href="typesOfExchange.html">Types of Exchanges</a> <br />
          <div id="Second-Half">              
            <a href="howToStart.html">How to get Started</a> <strong>l</strong> 
            <a href="whyCLX.html">Why CLX?</a><strong>l</strong> <a href="resources.html">Resources</a> <strong>l</strong> <a href="fAQs.html">FAQs</a> <strong>l</strong> <a href="fees.html">Fees</a> 
            <a href="contactUs.html">Contact Us</a>
          </div>
        </div>
      </div>

CSS

*{box-sizing:border-box;}
#wrapper {margin-left:auto; margin-right:auto;width:774px;}
#below-mast { width:774px; overflow:hidden; }
#left {height:297px; width:29%; margin:4px;margin-left:0px;}
#center{height:297px; width:51%; margin:4px;}
#right {height:297px; width:17%; margin:4px;}
#left,  #center, #right { float:left;margin-bottom:50px;}
#content{overflow:;margin:0px;margin-top:100px;font-family:Arial, Helvetica, sans-serif;margin-right:50px;margin-left:50px;}
.Heading{font-size:19px;font-weight:bold;text-align:center; text-decoration:underline}
.Heading>h2{font-size:13px;text-decoration:none}
#we-pay{font-size:13px}
#we-pay>.Heading{font-size:20px;text-decoration:none;}
#prices{text-align:center; font-size:20px;}
#note{text-align:center;}
#disclaimer{font-size:13px; text-align:center; font-weight:bold;font-style:italic; }
#footer{margin-right:-50px;margin-left:-50px;}
#footer,a:link{font-family:Helvetica, sans-serif;color:#300000; margin-top:50px;}
#Second-Half{margin-left:auto; margin-right:auto;width:450px;}

これがあなたの便宜のためにCodePenの私のコードへのリンクです http://codepen.io/Austin-Davis/pen/rLeEi

4

3 に答える 3

1

バグは、次のコードで修正できます。

#footer { margin: 0; position: absolute; left: 0; width: 100%; }

チェックアウトしてください: http://codepen.io/joe/pen/uBikf

PS: テスト目的で、フッターの背景を灰色にしました。

于 2012-12-27T19:53:33.703 に答える
0

申し訳ありませんが</div>、 #note セクションの締めくくりが欠けていて、フッターがコンテンツ セクションの一部になっていたため、css を介してフッターにマージンを変更しても役に立たなくなりました。

于 2012-12-27T20:01:59.583 に答える
0

別の解決策は、フッターを #wrapper div の外に移動することです。また、HTML を確認してください。多くの場所で壊れているため、css の問題を修正することは不可能かもしれません ;)

例えば。自己終了タグ "" がたくさんあります (無効) また、終了 body タグがありません、既存のタグ "" などはありません。

于 2012-12-27T20:20:11.017 に答える