Noch nicht viel geschrieben
Guten Morgen an alle,
ich wollte mir schon immer mal einen Newsletter bauen. Kurze Hand habe ich das Programm Sendblaster gekauft. Da sich in dieser Version schon vorgefertigte Layouts befinden, die ich aber nicht haben möchte, wollte ich mir halt 2 Standard Layouts erstellen und diese dann im Programm einfügen.
Das 1 Layout soll eine feste Größe von 600 x 800 px haben
Also dachte ich mir Dreamweaver an den Start und ich erstelle mir ein vordefiniertes Layout mit Header, Main und footer als Div Elemente.
1 Spalte elastisch, zentriert, Kopf und Fußzeile
Das war ja kein Ding aber wenn ich jetzt die Background-images einfüge und es mir in der Vorschau anschaue habe ich zwischen Header und Main so an die 10 bis 15 px einen weißen Streifen. Ich sitze hier schon seid einigen Stunde daher meine bitte an Euch ob ihr mir in dieser Kleinigkeit helfen würdet.
Hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
padding: 0;
text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
color: #000000;
}
/* Tipps für elastische Layouts:
1. Da die Gesamtgröße elastischer Layouts von der Standardschriftgröße des Benutzers abhängt, sind diese Layouts weniger berechenbar. Bei korrekter Verwendung haben sie außerdem für Personen, die größere Schriften benötigen, einen höheren Nutzwert, weil die Zeilenlänge proportional bleibt.
2. Die Größe der divs in diesem Layout basiert auf der Originalschriftgröße (100%) im Body-Element. Wenn Sie die Textgröße durch eine Einstellung wie font-size: 80% im Body-Element oder im #container global verringern, wird das gesamte Layout proportional verkleinert. Sie sollten die Breiten der verschiedenen divs vergrößern, um hierfür einen Ausgleich zu schaffen.
3. Wenn Sie in den einzelnen divs unterschiedliche Werte für die Schriftgröße angegeben, anstatt die Schriftgröße im Design global zu ändern (z. B. wenn #sidebar1 die Schriftgröße 70% zugewiesen wird und #mainContent die Größe 85%), so wird die Gesamtgröße der einzelnen divs proportional geändert. Sie sollten anhand der endgültig gewählten Schriftgröße entsprechende Anpassungen vornehmen.
*/
.oneColElsCtrHdr #container {
width: 600px; /* Mit dieser Breite wird ein Container erstellt, der in ein 800 Pixel breites Browserfenster passt, sofern für den Text die Standardschriftgröße des Browsers übernommen wird. */
background: #FFFFFF;
margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
border: 1px solid #000000;
text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
}
.oneColElsCtrHdr #header {
background: #DDDDDD;
padding: 0 40px 0 20px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
height: 150px;
background-color: #000;
}
.oneColElsCtrHdr #header h1 {
margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
}
.oneColElsCtrHdr #mainContent {
background: #FFFFFF;
height: 600px;
background-color: #0F0;
}
.oneColElsCtrHdr #footer {
padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
background:#DDDDDD;
height: 48px;
}
.oneColElsCtrHdr #footer p {
margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
padding: 10px 0;
}
-->
</style></head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<h1> </h1>
<!-- end #header --></div>
<div id="mainContent">
<p>Wieso ist da der weiße Balken zu sehen zwischen header und main??</p>
<p>Wenn ich Vorschau mache. Bitte um Hilfe</p>
<p> </p>
<p> </p>
</div>
<div id="footer">
<p>Test
<!-- end #footer -->
</p>
</div>
<!-- end #container --></div>
</body>
</html>
Um weitere Newsletter zu erstellen hätte ich so ja schon ein fertiges Layout wo ich ja nur noch jeweils die neu gestalteten Bilder einladen müsste.
Ich danke jetzt schon allen die mir in dieser Angelegenhheit helfen.
THX
ich wollte mir schon immer mal einen Newsletter bauen. Kurze Hand habe ich das Programm Sendblaster gekauft. Da sich in dieser Version schon vorgefertigte Layouts befinden, die ich aber nicht haben möchte, wollte ich mir halt 2 Standard Layouts erstellen und diese dann im Programm einfügen.
Das 1 Layout soll eine feste Größe von 600 x 800 px haben
Also dachte ich mir Dreamweaver an den Start und ich erstelle mir ein vordefiniertes Layout mit Header, Main und footer als Div Elemente.
1 Spalte elastisch, zentriert, Kopf und Fußzeile
Das war ja kein Ding aber wenn ich jetzt die Background-images einfüge und es mir in der Vorschau anschaue habe ich zwischen Header und Main so an die 10 bis 15 px einen weißen Streifen. Ich sitze hier schon seid einigen Stunde daher meine bitte an Euch ob ihr mir in dieser Kleinigkeit helfen würdet.
Hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
padding: 0;
text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
color: #000000;
}
/* Tipps für elastische Layouts:
1. Da die Gesamtgröße elastischer Layouts von der Standardschriftgröße des Benutzers abhängt, sind diese Layouts weniger berechenbar. Bei korrekter Verwendung haben sie außerdem für Personen, die größere Schriften benötigen, einen höheren Nutzwert, weil die Zeilenlänge proportional bleibt.
2. Die Größe der divs in diesem Layout basiert auf der Originalschriftgröße (100%) im Body-Element. Wenn Sie die Textgröße durch eine Einstellung wie font-size: 80% im Body-Element oder im #container global verringern, wird das gesamte Layout proportional verkleinert. Sie sollten die Breiten der verschiedenen divs vergrößern, um hierfür einen Ausgleich zu schaffen.
3. Wenn Sie in den einzelnen divs unterschiedliche Werte für die Schriftgröße angegeben, anstatt die Schriftgröße im Design global zu ändern (z. B. wenn #sidebar1 die Schriftgröße 70% zugewiesen wird und #mainContent die Größe 85%), so wird die Gesamtgröße der einzelnen divs proportional geändert. Sie sollten anhand der endgültig gewählten Schriftgröße entsprechende Anpassungen vornehmen.
*/
.oneColElsCtrHdr #container {
width: 600px; /* Mit dieser Breite wird ein Container erstellt, der in ein 800 Pixel breites Browserfenster passt, sofern für den Text die Standardschriftgröße des Browsers übernommen wird. */
background: #FFFFFF;
margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
border: 1px solid #000000;
text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
}
.oneColElsCtrHdr #header {
background: #DDDDDD;
padding: 0 40px 0 20px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
height: 150px;
background-color: #000;
}
.oneColElsCtrHdr #header h1 {
margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
}
.oneColElsCtrHdr #mainContent {
background: #FFFFFF;
height: 600px;
background-color: #0F0;
}
.oneColElsCtrHdr #footer {
padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
background:#DDDDDD;
height: 48px;
}
.oneColElsCtrHdr #footer p {
margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
padding: 10px 0;
}
-->
</style></head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<h1> </h1>
<!-- end #header --></div>
<div id="mainContent">
<p>Wieso ist da der weiße Balken zu sehen zwischen header und main??</p>
<p>Wenn ich Vorschau mache. Bitte um Hilfe</p>
<p> </p>
<p> </p>
</div>
<div id="footer">
<p>Test
<!-- end #footer -->
</p>
</div>
<!-- end #container --></div>
</body>
</html>
Um weitere Newsletter zu erstellen hätte ich so ja schon ein fertiges Layout wo ich ja nur noch jeweils die neu gestalteten Bilder einladen müsste.
Ich danke jetzt schon allen die mir in dieser Angelegenhheit helfen.
THX
