header mittig und der auflösung angepasst darstellen?

[steffi]

hi

ich bin dabei eine hp zu basteln. als header habe ich ein jpg bild namens site_logo.jpg.

nun gibt es das problem, dass je nach bildschirmauflösung des betrachters das bild zu klein oder zu groß dargestellt wird.

es muss doch möglich sein, dass so zu schreiben, dass das bild je nach anzeige angepasst wird.

1. mittig
und
2.flexible größe (wenn nicht problemlos möglich, dann nur 1.)

{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>
        <td><img src="{$tpl_path}img/top_logo.jpg" alt="{$store_name}" /></td>
      </tr>
      <tr>
        <td style="border-top: 1px solid; border-bottom: 1px solid; border-color: #C5C5C5;"><table width="100%"  border="0" cellpadding="2" cellspacing="0">
          <tr>
            <td class="main">{$navtrail}</td>
            <td align="right" class="main">{if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}<a href="{$logoff}">{#link_logoff#}</a> | {php} } {/php}{/if}{if $account}<a href="{$account}">{#link_account#}</a> | {/if}<a href="{$cart}">{#link_cart#}</a> | <a href="{$checkout}">{#link_checkout#}</a></td>
          </tr>
        </table></td>

es wäre klasse, wenn mir dabei jemand helfen könnte...

 

[jahlives]

Kannst du mal einen Screenshot posten? Flexible Grösse bei Bildern würde ich persönlich über css (background-image) machen. Dann passt sich die Bildgrösse an den Container an, dem das Bild zugeordnet ist.
Wieso ziehst du eigentlich zwei tables auf? tables für Layoutzwecke ist relativ verpöhnt Das geht heute am besten via css (div und span sind deine Freunde)

 

[steffi]

Kannst du mal einen Screenshot posten? Flexible Grösse bei Bildern würde ich persönlich über css (background-image) machen. Dann passt sich die Bildgrösse an den Container an, dem das Bild zugeordnet ist.
Wieso ziehst du eigentlich zwei tables auf? tables für Layoutzwecke ist relativ verpöhnt Das geht heute am besten via css (div und span sind deine Freunde)

hi

screenshot geht zur zeit nicht. der header (das bild) ist noch nicht fertig. dafür ist dann der platzhalter "top_logo.jpg" eingesetzt. aber ein beispiel kannst du dir ansehen: gelöscht.xy dort ist die problematik die selbe...

warum ich zwei tables aufziehe? keine ahnung. ist so vorgegeben. ich habe lediglich den auszug der index.html
hier eingefügt.....

ein

 

[jahlives]

die Grafik ist im Original ja 1400 und etwas Pixel breit. Die Tabelle ist mit 100% angeben, also so breit wie der Bildschirm. Die maximale Breite des Bildes wird mit 100% der Tabelle festgelegt. Also stauchen die Browser das Bild wenn die Auflösung kleiner ist als die Breite des Bildes oder sie vergrössern es bei Breiten grösser als die Bildbreite. Ich würde das Bild kleines machen (schmaler z.B. 800px) Zusätzlich solltest du das Bild als background-image Eigenschaft einem div mit festgelegter Pixelbreite zuweisen. Dann richtet sich die Breite das Bildes nach der breite des divs (welcher ja mit Pixel Breite definiert ist). So lassen die Browser das Bild genau so wie es ist.

 

[steffi]

hi

wenn ich das bild auf 800 pixel in der breite verkleinere, dann habe ich auf meinen rechneren rechts einen großen, rand. da wird nichts gestreckt o.ä. das bild wird einfach linksbündig in 800px angezeigt.

das strecken oder wenigstens zentrieren ist ja das, was ich möchte....

 

[jahlives]

Also Zentrieren ist doch überhaupt kein Problem. div mit fixer Breite und margin-left und margin-right auto. Und alle Browser bis auf den IE zentrieren das sauber. Der IE braucht dazu leider einen zusätzlichen div container mit align center.

 

[steffi]

hi

ich habe es mit deinem entwurf mal versucht. das haut leider nicht hin. schon rein von der optik sind das zwei verschiedene paar schuhe.

kannst du mir sagen, wie ich meinen oben angehängten auszug -- insbesondere die zeile mit dem top_logo.jpg-- abändern muss?

<td><img src="{$tpl_path}img/top_logo.jpg" alt="{$store_name}" /></td>

wenn ich dort die zeile einfüge die ich von deinem musterbild entnommen habe, dann läuft nix mehr. (obwohl ich die daten angepasst habe)

</head><body><div style="font-size:30px;color:yellow;background-image:url(img/top_logo.jpg);height:124px;width:800px;margin-left:auto;margin-right:auto;"></div></body></html>

 

[jahlives]

hi

ich habe es mit deinem entwurf mal versucht. das haut leider nicht hin. schon rein von der optik sind das zwei verschiedene paar schuhe.

kannst du mir sagen, wie ich meinen oben angehängten auszug -- insbesondere die zeile mit dem top_logo.jpg-- abändern muss?



wenn ich dort die zeile einfüge die ich von deinem musterbild entnommen habe, dann läuft nix mehr. (obwohl ich die daten angepasst habe)

Du kannst meinen Code nicht einfach 1:1 in deinen einfügen. Ich habe ja ein komplettes html Konstrukt geschrieben und das legt sich mit dem bereits vorhandenen html bei deinem Code an.
Du musst dich entscheiden ob du mit Tabellen weitermachen willst oder ob du den Code komplett überarbeitest und die Tabellen rausnimmst.
Hast du mal probiert ob du die beiden Tabellen mittig ausrichten kannst? Dann wäre das Header Bild auch mittig.
Soll denn der gesamte Inhalt der Seite breiter werden als die 800 px vom Header Bild?
Wenn ja dann müsstest du die innere Tabelle mittig setzten und die äussere auf 100% belassen.
Um bei den Tabellen zu bleiben, würde ich mal folgendes probieren

[COLOR=#000000][COLOR=#007700]<[/COLOR][COLOR=#0000bb]table width[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"100%"  [/COLOR][COLOR=#0000bb]border[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"0" [/COLOR][COLOR=#0000bb]cellspacing[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"0" [/COLOR][COLOR=#0000bb]cellpadding[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"0"[/COLOR][COLOR=#007700]> 
  <[/COLOR][COLOR=#0000bb]tr[/COLOR][COLOR=#007700]> 
    <[/COLOR][COLOR=#0000bb]td[/COLOR][COLOR=#007700]><[/COLOR][COLOR=#0000bb]table align="center" width[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"800px" [/COLOR][COLOR=#0000bb]border[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"0" [/COLOR][COLOR=#0000bb]cellspacing[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"0" [/COLOR][COLOR=#0000bb]cellpadding[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"0"[/COLOR][COLOR=#007700]> 
      <[/COLOR][COLOR=#0000bb]tr[/COLOR][COLOR=#007700]> 
        <[/COLOR][COLOR=#0000bb]td[/COLOR][COLOR=#007700]><[/COLOR][COLOR=#0000bb]img src[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"[/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000bb]$tpl_path[/COLOR][COLOR=#007700]}[/COLOR][COLOR=#dd0000]img/top_logo.jpg" [/COLOR][COLOR=#0000bb]alt[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"[/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000bb]$store_name[/COLOR][COLOR=#007700]}[/COLOR][COLOR=#dd0000]" [/COLOR][COLOR=#007700]/></[/COLOR][COLOR=#0000bb]td[/COLOR][COLOR=#007700]> 
      </[/COLOR][COLOR=#0000bb]tr[/COLOR][COLOR=#007700]>[/COLOR][/COLOR]

Also der inneren Tabelle die Breite des Header Bildes vorgeben und dann die Tabelle mittig (align=center) an der äusseren Tabelle auszurichten

 

[steffi]

hi

danke für deine hilfe. es klappt noch nicht. das bild ist mit deinem code auch linksbündig -- wie vorher auch.

die gesamte seite ist breiter als das bild. das bild habe ich auf 800px verkleinert.

 

[jahlives]

hi

danke für deine hilfe. es klappt noch nicht. das bild ist mit deinem code auch linksbündig -- wie vorher auch.

die gesamte seite ist breiter als das bild. das bild habe ich auf 800px verkleinert.

Du hast Post

 

[Tagger]

<td><img src="{$tpl_path}img/top_logo.jpg" alt="{$store_name}" /></td>

Wenn ich mir den Teil des Quellcodes so ansehe, scheint das Ganze aus einem Template zu stammen und wird demzufolge noch irgendwo eingebunden. Wenn die äußere Tabelle jetzt auf 100% Breite steht, ist die Frage wieviel sind 100%? Setze doch mal für die äußere Tabelle den Border auf "1", dann siehst du, wieviel Platz die tatsächlich einnimmt.