-1
내 바닥 글 (배경색 없음, 배경 이미지 없음)을 사용하여 항상 뷰포트 (또는 화면)의 100 %를 차지하려고합니다. 내가 시도한 모든 노력에도 불구하고, 바닥 글은 오른쪽으로 틈이 있습니다. 나는 그것의 폭, 높이, 패딩 또는 마진 문제를 분명히 이해하지만, 내 삶을 생각할 수는 없다. 아래는 내 html과 css 코드입니다 (그리고 테이블을 사용하기 위해 나에게 물어보기도 전에이 방법이 나를 고용하는 사람들이하는 일입니다.) 그들은 많은 HTML 이메일 뉴스 레터를 작성하고 테이블을 사용해야합니다. html이 완료되어야하는 방법. 이것이 최선의 관행이 아니라는 것을 깨닫는다. 그러나 나는 그것을 지불하는 사람들이 그것을하기를 원하는 방식으로하고있다. :)바닥 글이 화면 전체에 100 % 스트레칭을하지 않습니다.
또한, 나는 구독 취소 섹션을 얻을 필요가있다. 그것은 왼쪽에있는 것처럼 오른쪽에 동일한 여백을 갖도록 바닥 글 바로 위에 있습니다 (즉, 왼쪽과 오른쪽의 흰색을 볼 수 있어야합니다). 어쩌면 일을 망쳐 놓고있는이 탈퇴 섹션 일 수도 있습니다. 모르겠습니다. 어떤 도움이 가장 감사하겠습니다 (어쨌든, 충분히 내 산책, 여기 코드가).
http://hoppedupdesigns.com/evolv/clients/apics/epc/form.html
HTML 코드 :
<!-- start of unsubscribeTable div -->
<div class="tableLeft" id="unsubscribeTable">
<table border="0" cellspacing="3" cellpadding="3">
<tr>
<td valign="top"><input type="checkbox" name="chkOptOut" id="chkOptOut"></td>
<td>
<label for="chkOptOut">Unsubscribe</label><br>
<p class="optout_message">Opt-out of all APICS communications</p><br>
<p class="optout_warning">This option will remove you from all APICS email communciations excluding transactional email and email related to membership status.</p>
<div>
<a href="#" class="button" id="cmdOptOut">Confirm Opt-Out</a>
</div>
</td>
</tr>
</table>
</div>
<!-- end of unsubscribeTable div -->
<!-- start of footer div -->
<div id="footer">
<p class="copyright">©2013 APICS</p>
<ul id="footerNav">
<li><a href="http://www.apics.org/privacy-policy" target="_blank">Privacy Policy</a></li>|
<li><a href="http://www.apics.org/about/contact" target="_blank">Contact Us</a></li>|
<li><a href="http://www.apics.org/terms-of-use" target="_blank">Terms of Use</a></li>
</ul>
</div>
<!-- end of footer div -->
</div>
<!-- end of wrapper div -->
</body>
</html>
CSS Code:
body {
line-height: 20px;
font-family: arial, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#wrapper {
width: 100%;
}
/* 1.
* ***** UNSUBSCRIBE SECTION *****
*/
#unsubscribeTable {
background: #F1F1F1;
color: #333;
width: 100%;
clear: left;
padding: 30px 25px 15px 25px;
margin: 0 0 15px 85px;
}
/* 2.
* ***** FOOTER *****
*/
#footer {
background: #666;
color: #bdbebf;
border-top: 8px solid #838d94;
clear: both;
height: 100px;
padding: 30px 25px 15px 25px;
width: 100%;
}
#footerNav {
float: right;
}
#footerNav li {
display: inline;
padding: 20px;
}
#footerNav a {
text-decoration: none;
color: #bdbebf;
font-size: 14px;
}
덕분에 많이들 아래의 코드를 정독하지 않으려면
다음은 페이지에 대한 링크입니다. 당신은 최고입니다. 당신의 CSS의 #footer 제이슨
문제와 관련된 코드 만 게시해야합니다. – Nit
좋아, 편집 할게. – HoppedUpDesigns
미래에 pared-down 테스트 케이스를 공유하기 위해 http://jsfiddle.net/을 제안합니다. 따라서 사용자는 문제에 대해 반복하고 나눌 수 있습니다. 문제를 재현하는 데 필요한 비트 수만큼 코드를 삭제할 수 있도록 시간을 보내십시오. 글꼴 색상이나 크기가 문제의 원인입니까? 그렇지 않은 경우 삭제하십시오. 그 테이블은 어때? 오, 삭제하면 문제가 바뀐다 고요? 그런 다음 우리를 위해 그것을 남겨두고 생각하십시오. _ "문제를 일으키기 위해 특정 요소가 왜 필요합니까?"_ – Phrogz