Wie Kopf- und Fußzeile an die Ränder der Seite zu dehnen?

Ich bin ziemlich neu in HTML und CSS, und völlig neu in diesem Forum. Momentan arbeite ich - so wie ich es gelernt habe - auf einer Webseite, die ich als E-Mail versenden möchte. Es ist ein ziemlich einfaches Format mit Header, Sub-Header, Body und Footer. Obwohl ich mit der Seite fast fertig bin, verstehe ich immer noch sehr wenig von der Codierung. Was ich stecke im Moment streckt den Header & Fußzeile (Volltonfarben) an den Rändern der Seite (oben, links und rechts für den Kopf & Unter Header und links, rechts und unten für die Fußzeile).Wie Kopf- und Fußzeile an die Ränder der Seite zu dehnen?

Ich habe natürlich viel Forschung gemacht, in Hilfeforen geschaut und die dort gefundenen Tipps ausprobiert, nämlich. Zurücksetzen der CSS, Einstellen der Marge usw. Offensichtlich war ich erfolglos und deshalb bin ich hier.

Hier ist eine Momentaufnahme von dem, was die Webseite sieht aus wie auf einem iPhone 5 über Google Chrome Developer Tools

HTML-Header

<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 Kopf

.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

<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 Footer

.email-footer { 

} 

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

}

Jede Hilfe und Tipps in den Code im Allgemeinen verbessern würde sehr geschätzt werden!

Danke, Ashish

P. S. Ich arbeite mit Dreamweaver CS5.

Quelle

2017-11-06 Ashish V

links/oben/rechts/unten funktioniert nicht mit statischen position .. warum nicht einfach verwenden Sie "Breite: 100%" und entfernen Sie alle Rand –

auch nicht vergessen, die Marge, Polsterung der "Körper", die brauchen entfernt werden. Ich denke, das ist, was Sie vermissen –

Ihr Problem ist, dass einige Stile des Körpers automatisch eingestellt werden.

Wenn Sie also die Standardwerte nicht verwenden möchten, müssen Sie sie überschreiben.

In Ihrem Fall Körper hat, wird überschreiben kann die Marge Stil auf 8 gesetzt, damit Sie es mit 0, wenn Sie nicht über den Rand in Ihrem Code soll: wird überschreiben

*{ 
    margin: 0; 
}

Das Sternelement alle Elemente in Ihrem HTML und setzen Sie die Ränder auf 0. Stellen Sie sicher, dass es vor allem ist, denn wenn Sie den Rand irgendwo später in Ihrem CSS ändern, wollen Sie nicht mit 0 zu überschreiben.

Quelle

2017-11-06 11:56:47

warum nicht einfach dies für Körper, HTML angeben? –

Sie können es nur für den Körper angeben, aber wenn Sie es mit einem Stern verwenden, werden auch alle anderen Tag-Standard oder bereits importierte Stile überschrieben. Wenn Sie also wissen, dass Ihr gesamter Inhalt keine Ränder haben soll, außer Sie fügen ihn speziell für ein Tag hinzu, sind Sie sicher, dass Sie alle Standardwerte überschreiben. Seien Sie vorsichtig, wenn Sie es verwenden, also überschreiben Sie einige andere Stile nicht aus separaten .css-Dateien. Wenn Sie andere CSS-Dateien aufrufen, überschreiben sie einander in der Reihenfolge, in der Sie sie aufrufen. Daher sollten Sie zuerst die .css-Datei aufrufen, die * {} enthält. –

Sie sagten es 'Seien Sie vorsichtig, wenn Sie es verwenden, also überschreiben Sie nicht einige andere Stile aus separaten CSS-Dateien. Deshalb ist es in diesem Fall genug, um für den Körper zu spezifizieren, um einen Konflikt zu vermeiden;) –

-1

Willkommen. Während Sie an diesem HTML arbeiten, ist es möglicherweise hilfreich für Sie, zu wissen, dass verschiedene E-Mail-Vorlagen von Websites wie Mailchimp und CampaignMonitor verfügbar sind. Die Vorlagen sind nützlich in dem Sinne, dass diese Organisationen viel harte Arbeit für Sie geleistet haben und sicherstellen, dass die Vorlagen in verschiedenen E-Mail-Clients funktionieren.

Das heißt, wenn Sie das CSS des Körpers festlegen, Null-Rand und Padding zu haben, dann kann jeder Inhaltsbereich eine Breite von 100% gegeben werden, um die gesamte Breite der Seite zu besetzen.

Weiter können diese Inhaltsbereiche in einem Master-Container eingeschlossen werden, der selbst eine Breite von 100% hat. Auf diese Weise können Sie die Breite Ihrer E-Mail später reduzieren, indem Sie einfach diesen Eigenschaftswert ändern. Die Inhaltsbereiche erben dann diese Breite.

Quelle

2017-11-06 11:56:48 sassquad

Danke für deine Antwort, @sassquad. Es hat mir sehr geholfen. Der Grund, warum ich mich entschieden habe, keine Seiten wie MailChimp zu verwenden, da ich selbst nach einer vollständig angepassten Vorlage suche. Teilweise für meinen Zweck, und um mir selbst einige grundlegende Kodierung beizubringen. –

Wie Kopf- und Fußzeile an die Ränder der Seite zu dehnen?

Antwort

Verwandte Themen