[gelöst] Header.tpl Logo zentrieren

[Schapfy]

Hallo ich bekomme es nicht hin, das Logo in der Rechnung würde ich gerne zentrieren, anbei mein Code:

 

#######################

<table style="width: 100%">
<tr>
 <td style="width: 50%">
  {if $logo_path}
   <img src="{$logo_path}" style="width:{$width_logo}px; height:{$height_logo}px;" />
  {/if}
 </td>
</tr>
</table>

############################

Edited March 31, 2015 by Schapfy (see edit history)

[ecl77]

Hallo,

 

der komplette Code der Header.tpl lautet aber:

<table style="width: 100%">
<tr>
	<td style="width: 50%">
		{if $logo_path}
			<img src="{$logo_path}" style="width:{$width_logo}px; height:{$height_logo}px;" />
		{/if}
	</td>
	<td style="width: 50%; text-align: right;">
		<table style="width: 100%">
			<tr>
				<td style="font-weight: bold; font-size: 14pt; color: #444; width: 100%">{$shop_name|escape:'html':'UTF-8'}</td>
			</tr>
			<tr>
				<td style="font-size: 14pt; color: #9E9F9E">{$date|escape:'html':'UTF-8'}</td>
			</tr>
			<tr>
				<td style="font-size: 14pt; color: #9E9F9E">{$title|escape:'html':'UTF-8'}</td>
			</tr>
		</table>
	</td>
</tr>
</table>

Das ist eine Tabelle, die sich über die ganze Breite der Seite zieht (<table style="width: 100%"></table>), aus einer Zeile (<tr></tr>) und zwei Spalten (<td>1. Spalte</td><td>2. Spalte</td>), die sich die komplette Breite der Tabelle (und somit auch der Seite) 50 zu 50 teilen (<td style="width: 50%">). In der linken Spalte befindet sich das Logo und in der rechten Spalte Shopname, Datum und Rechnungsnummer.

 

Wenn du also nun das Logo über die komplette Breite der Seite (bzw. Tabelle) zentrieren willst, müsstest du die rechte Spalte in eine zweite Zeile setzen, was aber eine Überlappung mit nachfolgenden Elementen bedeuten würde (die aber dadurch aufgehoben wird, dass ich die rechte Spalte auf 100% setzen und sie rechtsbündig ist):

<table style="width: 100%">
<tr>
	<td style="width: 100%; text-align: center;">
		{if $logo_path}
			<img src="{$logo_path}" style="width:{$width_logo}px; height:{$height_logo}px;" />
		{/if}
	</td>
</tr>
<tr>
	<td style="width: 100%; text-align: right;">
		<table style="width: 100%">
			<tr>
				<td style="font-weight: bold; font-size: 14pt; color: #444; width: 100%">{$shop_name|escape:'html':'UTF-8'}</td>
			</tr>
			<tr>
				<td style="font-size: 14pt; color: #9E9F9E">{$date|escape:'html':'UTF-8'}</td>
			</tr>
			<tr>
				<td style="font-size: 14pt; color: #9E9F9E">{$title|escape:'html':'UTF-8'}</td>
			</tr>
		</table>
	</td>
</tr>
</table>

Ich hoffe, es ist das, was du suchst

 

Vielleicht möchtest du aber auch nur das Logo zentrieren und die rechte Spalte mit Shopname, Datum und Rechnungsnummer an der Stelle behalten, dass wäre dann so:

<table style="width: 100%">
<tr>
	<td style="width: 70%; text-align: right;">
		{if $logo_path}
			<img src="{$logo_path}" style="width:{$width_logo}px; height:{$height_logo}px;" />
		{/if}
	</td>
	<td style="width: 30%; text-align: right;">
		<table style="width: 100%">
			<tr>
				<td style="font-weight: bold; font-size: 14pt; color: #444; width: 100%">{$shop_name|escape:'html':'UTF-8'}</td>
			</tr>
			<tr>
				<td style="font-size: 14pt; color: #9E9F9E">{$date|escape:'html':'UTF-8'}</td>
			</tr>
			<tr>
				<td style="font-size: 14pt; color: #9E9F9E">{$title|escape:'html':'UTF-8'}</td>
			</tr>
		</table>
	</td>
</tr>
</table>

Musst du mal durchprobieren, was du möchtest

 

Viele Grüße

ecl77

[Schapfy]

Hallo, perfekt das passt die Rechnungsnummer habe ich auskommentiert weil diese in der Invoice angedruckt wird.