Header einbinden?

[bodyman72]

Hallo alle zusammen.

Hab meinen Template so eingerichtet, das er sich von der Breite her immer auf den Browser des Besuchers einstellt.

Doch jetzt meine Frage:

Meine Header-Grafik hat eine Grafik von 1024 X 154 Pixel.

Wie muss ich die Grafik erstellen, dass sie auf alle Bildschirmauflösungen passt und sich nicht verzerrt oder muss ich an der Index.html was ändern? Komm echt nicht weiter.

Wäre nett, wenn Ihr mir helfen könntet?

Hier mal meine Index.html

{config_load file="$language/lang_$language.conf" section="index"}


<table width="100%"  border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">

      <tr>

			<table width="100%" border="0" cellspacing="0" cellpadding="0">

				<tr>

					<td width="100%</h5>"><img src="{$tpl_path}header/header.gif" "100% /></td>




							</tr>

						</table>

					</td>

				</tr>

			</table>

	  </td>

	</tr>

	<tr>

		<td width="100%" height="18" background="{$tpl_path}header/obj_02.gif">

			<table width="685" border="0" cellspacing="0" cellpadding="0">

				<tr>

					<td width="151"><img src="header/transparent.gif" height="3" width="151" /></td>

					<td width="89"><a href="{php}$_HTTP_SERVER{/php}"><img src="{$tpl_path}buttons/{php}print_r($_SESSION['language']){/php}/home.gif" height="29" width="89" /></a></td>

					<td width="89"><a href="shop_content.php?coID=4"><img src="{$tpl_path}buttons/{php}print_r($_SESSION['language']){/php}/about_us.gif" height="29" width="89" border="0" /></a></td>

					<td width="89"><a href="shop_content.php?coID=7"><img src="{$tpl_path}buttons/{php}print_r($_SESSION['language']){/php}/contact.gif" height="29" width="89" border="0" /></a></td>

					<td width="89"><a href="{$account}"><img src="{$tpl_path}buttons/{php}print_r($_SESSION['language']){/php}/account.gif" height="29" width="89" border="0" /></a></td>

					<td width="89"><a href="{$checkout}"><img src="{$tpl_path}buttons/{php}print_r($_SESSION['language']){/php}/checkout.gif" height="29" width="89" border="0" /></a></td>

					<td width="89"><a href="products_new.php"><img src="{$tpl_path}buttons/{php}print_r($_SESSION['language']){/php}/whatsnew.gif" height="29" width="89" border="0" /></a></td>


				</tr>

			</table>

		</td>

	</tr>

	<tr>

		<td style="border-bottom: 1px solid; border-color:#000000" width="100%" height="18" background="{$tpl_path}header/obj_05.gif"></td>

	</tr>

	<tr class="headerNavigation">

		<td width="100%">

			<table width="100%" cellspacing="0" cellpadding="0">

				<tr>

					<td> » {$navtrail}</td>

					<td align="right" width="300">{if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}<a href="{$logoff}"><font color="#696969">{#link_logoff#}</font></a> | {php} } {/php}{/if}{if $account}<a href="{$account}"><font color="#696969">{#link_account#}</font></a> | {/if}<a href="{$cart}"><font color="#696969">{#link_cart#}</font></a> | <a href="{$checkout}"><font color="#696969">{#link_checkout#} </font> </a></td>

				</tr>

			</table>

		</td>

	</tr>

</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">[/PHP]

[supervisior]

Du kannst acuh Deiner Grafik eine 100% Darstellung geben, aber es verhält sich dann entweder proportional in der Länge und Breite oder wenn die Höhe fix ist, dann verzehrt es sich zwangsläufig in der Breite. Bei einer Grafik geht das nicht anders, es sei denn man trickst ein wenig, aber das geht auch nicht bei allen Grafiken.

[bodyman72]

Hallo Supervisor.

Das ist eine gute Lösung.

Wie muss der Code denn Lauten, wenn ich die Grafik in höhe und Breite zu 100% anzeigen will?

So sieht der Code momentan aus?

<table width="100%" border="0" cellspacing="0" cellpadding="0">

                <tr>

                    <td width="100%</h5>"><img src="{$tpl_path}header/header.gif" "100% /></td>




                            </tr>

                        </table>

                    </td>

                </tr>

            </table> [/PHP]

[supervisior]

Das funktioniert nur theoretisch, bzw. ist für die Praxis ungeignet. Das Bild verändert sich ja proportional. Wenn Du Dir die Seite dann mit einer 1600er Auflösung ansiehst, dann ist die Headergrafik plötzlich 5 x so hoch. Lass mal die Grafik sehen, dann kann ich Dir in etwa sagen, ob man hier etwas tricksen kann.

[bodyman72]

Schau mal auf http://www.sun-tan.de

Dort kannst Du alles sehen. Hätte den Header gerne so, das er sich wie schon gesagt auf den Browser des jeweiligen Besucher einstellt.

[supervisior]

Investiere ein paar Euros in eine ansprechende Header Grafik. Diese spricht weder an, noch eignet sich diese für eine 100% Darstellung.

[Rovert]

also sun-tan passt nicht auf ein 1280er Breite Bildschrim und überigens ist es schlecht.

Was du willst muss anders gelöst werden.

Der Headergrafik muss in eine Tabelle sein die 100% ist und z.B. 5 Zellen hat.

Von links nach rechts dann so:

Grafik Teil 1

kein Grafik aber Einfarbige Hintergrund

Grafik Teil 2

kein Grafik aber Einfarbige Hintergrund

Grafik Teil 3

Natürlich mussen die Grafiken entsprechend gemacht werden, dass es an die 3 Teile nahtlos übergeht.

Supervisor hat aber recht. Lass es mal richtig machen von jemanden der etwas davon versteht, dann sieht es entsprechend gut aus in gegensatz zu den Schrott von sun-tan.

T

[supervisior]

Um der guten Erklärung von qRovert noch mehr Verständnis zu geben. Die erste und letzte Spalte sind fix, sprich müssen eine feste Größe haben. der mittlere Teil davon verhält sich dynamisch zur Seitenbreite, wobei der Inhalt der mittleren Spalte etwas sein muss, was sich horizontal vervielfältigen lassen muss, ohne dass sich an der Optik etwas ändert. Also keine Bilder oder Verläufe.

[bodyman72]

So, hab mir das ganze jetzt mal durch den Kopf gehen lassen. Daher kann ich Euch nur beipflichten.

Könnt Ihr mir eine Firma im Netz empfehlen, die auf solche Aufgaben im Netz spezilisiert ist?

[supervisior]

Meld Dich mal per PM