머리말과 꼬리말을 페이지 가장자리까지 늘리는 방법은 무엇입니까?

나는 HTML과 CSS에 매우 익숙하며이 포럼에 전혀 새로운 내용이다. 현재 전자 메일로 보내려는 웹 페이지에서 배우고있는대로 노력하고 있습니다. 헤더, 하위 머리글, 본문 및 바닥 글이있는 매우 간단한 형식입니다. 페이지가 거의 완성되었지만 여전히 코딩은 거의 이해하지 못했습니다. 내가 지금에 붙어하면 페이지의 가장자리 (위, 왼쪽과 헤더 & 서브 헤더 및 에 대한 권리가 오른쪽, 왼쪽과에 대한 아래로 헤더 & 바닥 글 (단색) 스트레칭 바닥 글).머리말과 꼬리말을 페이지 가장자리까지 늘리는 방법은 무엇입니까?

나는 자연스럽게 많은 연구를했으며, 도움 포럼을 들여다 보았다. CSS 재설정, 마진 설정 등. 분명히 나는 실패했으며 따라서 여기에있다. 여기

는 웹 페이지가 구글 크롬의 개발자 도구를 통해 아이폰 5처럼

HTML 헤더

<head> 
    <div class="header-background" style="margin-top:0;"> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Vorstellung – Ether</title> 
     //content 
    </div> 
</head>

CSS 헤더

.header-background { 
    background: #899799; 
    border: 0px solid #467813; 
    border-radius: 0px; 
    color: #fff; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    padding: 10px 0px 10px 20px; 
    left:0; 
    right:0; 
    margin:0; 
    top:0; 
} 

.sub-header { 
    background: #23313B; 
    border: 0px solid #467813; 
    border-radius: 0px; 
    color: #969696; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    padding: 10px 0px 10px 20px; 
}

을 모습의 스냅 샷입니다 HTML 바닥 글

<footer class="email-footer"> 
    <div id="footer-content"> 
     <div id="wrapper"> 
     <p> 
      <address> 
       <div style="margin-left:20px"> 
       <span style="color: #DDD">Name<br> 
       Street<br> 
       State<br> 
       Country 
       <br /> 
       <br /> 
       Copyright</span><br /> 
       </div> 
      </address> 
     </p> 
     </div> 
    </div> 
</footer>

CSS 바닥 글

.email-footer { 

} 

#footer-content { 
    text-decoration: none; 
    font-family: "Arial", "Helvetica", "sans-serif"; 
    color: #ccc; 
    width: 100%; 
    background: #6e6e6e; 
    padding: 50px 0px; 

}

일반적으로 코드를 개선에 어떤 도움과 팁을 많이 주시면 감사하겠습니다!

감사합니다, 인 Ashish

P.S. Dreamweaver CS5를 사용하고 있습니다.

출처

2017-11-06 Ashish V

왼쪽/위/아래/오른쪽/아래가 정적 인 위치와 작동하지 않습니다. 왜 단순히 '너비 : 100 %'를 사용하고 모든 여백을 제거하지 않으시겠습니까? –

도 필요한 '몸'의 여백을 잊지 마세요. 제거 할. 나는 이것이 당신이 놓치고있는 것이라고 생각합니다. –

문제는 본체의 일부 스타일이 자동으로 설정된다는 것입니다.

기본값을 사용하지 않으려면이를 덮어 써야합니다.

*{ 
    margin: 0; 
}

스타 요소는 덮어 쓰게됩니다 : 당신의 케이스 본체에

은 마진 스타일은 그래서 당신은 당신이 당신의 코드에서 마진을하지 않으려면 0으로 덮어해야합니다 (8)로 설정하고있다 HTML의 모든 요소를 0으로 설정하고 CSS의 여백을 나중에 변경하면 0으로 덮어 쓰지 않으므로 모든 것을 처리해야합니다.

출처

2017-11-06 11:56:47

왜 단순히 body, html로 지정하지 않습니까? –

본문에만 지정할 수 있지만 별표와 함께 사용하면 다른 태그 기본값이나 이미 가져온 스타일을 덮어 씁니다. 따라서 모든 콘텐츠에 여백이 없어야한다는 것을 알고 있다면 태그에 특별히 추가하지 않으면이 방법으로 모든 기본값을 덮어 쓰게됩니다. 별도의 .css 파일에서 다른 스타일을 덮어 쓰지 않도록주의해서 사용하십시오. 다른 css 파일을 호출하면 호출 한 순서대로 서로 덮어 씁니다. 따라서 * {}가 들어있는 .css 파일을 먼저 호출해야합니다. –

당신은'단지 그것을 사용할 때주의해야한다. 그래서 당신은 다른 .css 파일들로부터 다른 스타일들을 덮어 쓰지 않는다. ' 그래서이 경우에는 충돌을 피하기 위해 몸을 지정하는 것으로 충분합니다.) –

-1

환영합니다. 이 HTML을 작업하는 동안 Mailchimp 및 CampaignMonitor와 같은 사이트에서 다양한 전자 메일 템플리트를 사용할 수 있음을 알면 유용 할 수 있습니다. 템플릿은 이러한 조직이 여러 가지 전자 메일 클라이언트에서 템플릿을 사용할 수 있도록하기 위해 많은 노력을 기울여야한다는 점에서 유용합니다.

즉, 여백과 패딩이 없도록 본문의 CSS를 설정하면 페이지의 전체 너비를 차지하기 위해 각 콘텐츠 영역의 너비를 100 %로 지정할 수 있습니다.

이 콘텐츠 영역은 마스터 컨테이너 내에 포함될 수 있으며 그 자체의 너비는 100 %입니다. 이렇게하면 나중에 속성 값을 변경하여 나중에 이메일 너비를 줄일 수 있습니다. 컨텐츠 영역은 그 너비를 상속합니다.

출처

2017-11-06 11:56:48 sassquad

답장을 보내 주셔서 감사합니다, @assassad. 그것은 나에게 많은 도움이되었다. MailChimp와 같은 사이트를 사용하지 않기로 결정한 이유는 완전히 사용자 지정된 템플릿을 직접 만들려고하기 때문입니다. 부분적으로는 제 목적을 위해서, 그리고 부분적으로는 기본적인 코딩을 가르치는 것입니다. –

머리말과 꼬리말을 페이지 가장자리까지 늘리는 방법은 무엇입니까?

답변

관련 문제