zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden A4-Briefpapier als Vorlage für Software mittels CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.07.2014, 11:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.07.2014
Beiträge: 5
Manfred befindet sich auf einem aufstrebenden Ast
Standard A4-Briefpapier als Vorlage für Software mittels CSS

Hallo Zusammen,

ich habe mich nun bereits geraume Zeit hier durch das tolle Forum gelesen; nun arbeite ich an einer Thematik, bei welcher ich etwas Hilfe bräuchte.

Vorweg: Was CSS an sich angeht ist mein Wissenstand vermutlich auf dem eines fortgeschrittenen Anfängers.

Wie im Titel bereits erwähnt möchte ich ein Briefpapier im Format A4 mittels CSS erstellen, welches als Vorlage für mein Rechnungstool dienen kann.

Inhaltlich wurde bereits alles vom Ersteller umgesetzt (style.css):

Code:
/* Simple CSS Reset and Print options
------------------------------------------*/


html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, table, ol, ul, dl, li, dt, dd {
	border: 0 none;
	font: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Template Page Layout
------------------------------------------*/


/* Main Body */
body {
	background: #fff;
	color: #000;
	font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height: 1.25em;
}

h1,
h2,
h3,
h4 {
	font-weight: bold;
	margin-bottom: 1.25em;
}

ul {
	margin-bottom: 1.25em;
}

li,
dt,
dd  {
	padding: 0.375em 0;
}

dt {
	font-weight: bold;
}

p + p {
	margin-top: 1.25em;
}

address {
	font-style: normal;
}

/* Basic Table Styling */
table {
	page-break-inside: auto;
	width: 100%;
}

tr {
	page-break-inside: avoid;
	page-break-after: auto;	
	border-bottom: 0.12em solid #bbb;
}

td,
th {
	padding: 0.375em 0;
	vertical-align: top;
}

td img,
th img {
	vertical-align: top;
}

th {
	color: black;
	font-weight: bold;
	text-align: left;
	padding-bottom: 1.25em;
}

/* Page Margins & Basic Stylings */
#page {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	font-size: 0.875em;
}

.content {
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 5%;
	padding-bottom: 5%;
	page-break-after: always;
}

h1,
h2 {
	font-size: 1.572em;
}

.order-branding,
.order-addresses,
.order-info,
.order-items,
.order-notes,
.order-thanks,
.order-colophon {
	margin-bottom: 3em;
}

.order-items {
	page-break-before: auto;
	page-break-after: auto;
}

/* Order Branding */
.order-branding .company-logo {
	margin-bottom: 1em;
}

/* Order Addresses */
.order-addresses {
	margin-bottom: 6em;
}

.order-addresses:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.billing-address {
	width: 50%;
	float: left;
}

.shipping-address {
	width: 50%;
	float: left;
}

/* Switch the addresses for invoices */
.invoice .billing-address {
	float: right;
}

/* Order Info */
.order-info ul {
	border-top: 0.24em solid black;
}

.order-info li {
	border-bottom: 0.12em solid #bbb;
}

.order-info li strong {
	min-width: 18%;
	display: inline-block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-bottom: 0;
}

/* Order Items */
.order-items {
	margin-bottom: 1em;
}

.order-items .head-name,
.order-items .product-name,
.order-items .total-name {
	width: 50%;
}

.order-items .head-quantity,
.order-items .product-quantity,
.order-items .total-quantity,
.order-items .head-price,
.order-items .product-price,
.order-items .total-price {
	width: 25%;
}

.order-items tbody .name {
	font-weight: bold;
}

.order-items p {
	display: inline;
}

.order-items small,
.order-items dt,
.order-items dd {
	font-size: 0.785em;
	font-weight: normal;
	line-height: 150%;
	padding: 0;
	margin: 0;
}

.order-items dt,
.order-items dd {
	display: block;
	float: left;
}

.order-items dt {
	clear: left;
	padding-right: 0.2em;
}

.order-items tfoot tr:last-child {
	font-weight: bold;
}

.order-items tfoot tr:last-child .total-price {
	font-size: 0.785em;
	font-weight: normal;
}

.order-items tfoot tr:last-child .total-price .amount:first-child {
	font-size: 1.273em;
	font-weight: bold;
}

.order-items tfoot tr:last-child {
	border-bottom: 0.24em solid black;
}

/* Order Notes */
.order-notes {
	font-size: 0.785em;
	line-height: 150%;
	margin-bottom: 6em;
}

.order-notes h4 {
	margin-bottom: 0;
}

/* Order Thanks */
.order-thanks {
	margin-left: 50%;
}

/* Order Colophon */
.order-colophon {
	font-size: 0.785em;
	line-height: 150%;
	margin-bottom: 0;
}

.colophon-policies {
	margin-bottom: 1.25em;
}


/* CSS Media Queries for Print
------------------------------------------*/


@media print {
	body {
		font-size: 8pt;
	}
}
Aber nun zu meinen Fragen:
  1. Ich habe eine jpg-Datei mit der Größe eines A4-Dokuments auf den Server geladen. Wie kann ich dieses nun im Hintergrund meines Briefpapiers einbinden?
  2. Wie kann ich das obere Viertel meines Briefpapiers leer lassen, sprich den gesamten oberen Bereich nach unten rutschen?

Besten Dank im Voraus.

Manfred
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.07.2014, 13:26
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Manfred Beitrag anzeigen
  1. Ich habe eine jpg-Datei mit der Größe eines A4-Dokuments auf den Server geladen. Wie kann ich dieses nun im Hintergrund meines Briefpapiers einbinden?
  2. Wie kann ich das obere Viertel meines Briefpapiers leer lassen, sprich den gesamten oberen Bereich nach unten rutschen?
zu 1
willst du das wirklich? Das kann man ja zum Glück bei den Druckereinstellungen deaktivieren. Du musst das bei html als Hintergrundbild angeben. Du kannst dazu % oder cm für die Grösse verwenden.

zu2
body {margin-top:25%}

Alternativ auch in cm.

Alle Einstellungen natürlich zu media print.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.07.2014, 14:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.07.2014
Beiträge: 5
Manfred befindet sich auf einem aufstrebenden Ast
Standard

Ja, das will ich wirklich. Das Ganze ist lediglich für mich bestimmt. Ich möchte Rechnungen einfach unkompliziert und v.a. automatisch über den im Mac implementierten pdf-Drucker via Befehl "Drucken" aus meiner Shop-Software ausgeben + dafür brauche ich das.

Danke dir für die Info, ich werde das gleich mal testen.
Mit Zitat antworten
  #4 (permalink)  
Alt 02.07.2014, 14:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.07.2014
Beiträge: 5
Manfred befindet sich auf einem aufstrebenden Ast
Standard

So, habe nun beides ausprobiert.

Punkt 2.: klappt wunderbar.

Punkt 1.: bekomme ich irgendwie nicht geregelt. Folgendes habe ich getestet, beide Varianten ohne Erfolg:

Code:
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, table, ol, ul, dl, li, dt, dd {
border: 0 none;
font: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
background-image: url ("http://www.meineseite.de/wp/wp-content/uploads/2014/06/meinbild.png");
}
und

Code:
@media print {
body {
font-size: 8pt;
margin-top: 14%;
background-image: url ("http://www.meineseite.de/wp/wp-content/uploads/2014/06/meinbild.png");
}
}
Eine Idee? Danke.
Mit Zitat antworten
  #5 (permalink)  
Alt 02.07.2014, 14:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Kein Leerzeichen zwischen url und ( ?
Mit Zitat antworten
  #6 (permalink)  
Alt 02.07.2014, 14:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.07.2014
Beiträge: 5
Manfred befindet sich auf einem aufstrebenden Ast
Standard

Gute Idee. Probiert, klappt trotzdem nicht.
Mit Zitat antworten
  #7 (permalink)  
Alt 02.07.2014, 15:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.07.2014
Beiträge: 5
Manfred befindet sich auf einem aufstrebenden Ast
Standard

Evtl. auch über einen hook in der functions.php möglich?

Hier am Beispiel "Ändern der Schriftart":

Code:
function my_serif_font_and_large_address() {
    ?>
        <style>
            #page {
                font-size: 1em;
                font-family: Georgia, serif;
            }
            
            .order-addresses address {
                font-size: 2.5em;
                line-height: 125%;
            }
        </style>
    <?php
}
add_action( 'wcdn_head', 'my_serif_font_and_large_address', 20 );
Wie müsste ich o.a. hook ändern, wenn ich anstatt der Schriftart nun mein Bild einbinden möchte?

Danke.
Mit Zitat antworten
Antwort

Stichwörter
briefpapier, css bilder, hintergrund

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Untermenü mittels CSS? K-S-K CSS 13 09.11.2010 05:05
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39
navileiste mittels css jan99 CSS 2 04.08.2005 13:32
Einfaches Menü mittels CSS BabbleBoy CSS 19 31.07.2005 22:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:46 Uhr.