Image-Width
0 0 0 
Detlef G.
0 Problem gelöst :-)
Image-Width
Glück auf!
Ich habe einen Banner (Größe 1527 x 120 Pixel), den ich wie folgt [1] in der Kopfzeile einer jeden Seite meiner Website einbinde:
<table border="0" width="100%">
<tr>
<td align="center">
<a href="../Hauptseiten/home.php">
<img src="../Bilder/Layout/banner.jpg" width="100%" border="0" />
</a>
</td>
</tr>
</table>
Bisher hatte ich immer einen kleineren Banner dessen Hintergrundfarbe auch die der Tabellenzelle [2] war. Somit ist es nicht aufgefallen, wenn dieser die Fensterbreite nicht komplett ausgefüllt hat.
Bei dem neuen Banner ist mir hierfür keine bessere Lösung eingefallen, als eine relative Breitenangabe zu nehmen, damit sich der Banner entsprechend der Fensterbreite verschmalert oder verbreitert[3].
Klappt im Firefox (2) wie geplant, aber im IE (5, 7) leider nicht. Im IE muss ich seitwärts scrollen.
Gibt es eine Möglichkeit, den Banner immer 100% der Fensterbreite erscheinen zu lassen? Also, dass dieser sich immer entsprechend der Fenstergröße verkleinert oder aber auch vergrößert?
Beste Grüße
zwerg Alex
[1] Verkürzte Darstellung des Quellcodes( hier komplett )
[2] Bitte keine Schelte für das Tabellenlayout
[3] Den damit verbundenen möglichen Qualitätsverlust bei der Grafik nehme ich bewusst in Kauf
-
Hmm, im IE7 funktioniert es soweit...
Setze mal den Doctype am Anfang des HTML Dokumentes, damit sollte es fast in jedem Browser gleich aussehen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Hast du vielleicht noch irgendwelche CSS Angaben in der Datei?
Grüße
-
Hallo Stefan,
danke für deine Antwort und entschuldigung für die späte Rückmeldung hierauf (bin glatt vorm Bildschirm eingepennt).
Setze mal den Doctype am Anfang des HTML Dokumentes, damit sollte es fast in jedem Browser gleich aussehen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Hab ich so gemacht, aber leider mit unveränderten Ergebnis.
Hast du vielleicht noch irgendwelche CSS Angaben in der Datei?
Hast du dir den Link angesehen? Ich hab eine externe CSS-Datei eingebunden. Weiß aber jetzt nicht genau, welche Angaben hier von Bedeutung sein könnten.
-
Okay, habe mir jetzt mal deinen Code genau angeschaut... und weis auch warum das so ist wie es ist ;-)
Der IE sieht die 100% die du im <img> angibst nicht als 100% seitenbreite an, sondern als 100% bildbreite... das heißt, wenn dein Image 1527 x 120 Pixel groß ist, dann zeigt der IE deinen Banner bei 100% auch als 1527px an!
Der Firefox dagegen sieht die 100% als 100% Seitenbreite an... wer macht es nun richtig, meiner Meinung nach dieses mal der IE, denn wenn ich die 100% innerhalb der Grafik angebe, dann soll die Grafik auch 1527px groß angezeigt werden.
Eventuell könntest du das umgehen, wenn du statt einem <IMG> ein <DIV> verwendest und bei diesem als background-image deinen Banner angibst.Es kann natürlich auch ein Problem sein, weil dein Grund-Layout auf Tabellen aufgebaut ist *argghhh*
Baue deine Seite mal komplett um.. basierend auf Layern (DIV) !!
Außerdem solltest du mal deine Seite durch den W3C Validator jagen... dann wirst du sehen, dass er dir etliche Fehler anzeigt!-
Glück auf!
Okay, habe mir jetzt mal deinen Code genau angeschaut... und weis auch warum das so ist wie es ist ;-)
Danke, dass du dir die Mühe gemacht hast, denn kompletten Code anzusehen.
Der IE sieht die 100% die du im <img> angibst nicht als 100% seitenbreite an, sondern als 100% bildbreite... das heißt, wenn dein Image 1527 x 120 Pixel groß ist, dann zeigt der IE deinen Banner bei 100% auch als 1527px an!
Der Firefox dagegen sieht die 100% als 100% Seitenbreite an... wer macht es nun richtig, meiner Meinung nach dieses mal der IE, denn wenn ich die 100% innerhalb der Grafik angebe, dann soll die Grafik auch 1527px groß angezeigt werden.Wenn ich das Kapitel in Selfhtml richtig verstanden hab, macht es Firefox richtig.
Es kann natürlich auch ein Problem sein, weil dein Grund-Layout auf Tabellen aufgebaut ist *argghhh*
Ja, deswegen die [1] im Ursprungsposting.
Baue deine Seite mal komplett um.. basierend auf Layern (DIV) !!
Außerdem solltest du mal deine Seite durch den W3C Validator jagen... dann wirst du sehen, dass er dir etliche Fehler anzeigt!Beides für die Zukunft geplant, aber aus zeitlichen Gründen bisher aufgeschoben.
Danke für deine Hilfe und freundliche Grüße
zwerg Alex
-
-
-
-
Hallo,
[2] Bitte keine Schelte für das Tabellenlayout
OK, dann gibt's die jetzt für das nicht-wohlgeformte XHTML ;-)
Du merkst die Fehler zwar nicht, weil du die Datei als text/html auslieferst (was derzeit noch sinnvoll ist), aber letztlich ist es trotzdem keine gute Idee XHTML anzugeben und so viele Fehler zu machen.Schreibe testweise mal folgendes an den Anfang deiner PHP-Datei:
header("content-Type: application/xhtml+xml; charset=ISO-8859-1");mfg. Daniel
-
Hallo zwerg
Gibt es eine Möglichkeit, den Banner immer 100% der Fensterbreite erscheinen zu lassen? Also, dass dieser sich immer entsprechend der Fenstergröße verkleinert oder aber auch vergrößert?
Browserskalierte Bilder sehen selten gut aus.
Ich würde den Banner als Hintergrundbild einbinden und dieses mittig positionieren. Dann behält er seine Größe und je nach Fenstergröße wird einfach ein Teil der Bilder rechts und links abgeschnitten oder bei sehr breiten Fenstern eben wiederholt.(Vielleicht auch nur den mittleren Teil als zentrierte img und die Bilder rechts und links als Hintergrund.)
Dazu wird es erforderlich sein, den Link zum Block zu machen und ihm eine entsprechende Höhe zu geben.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
Browserskalierte Bilder sehen selten gut aus.
Ich würde den Banner als Hintergrundbild einbinden und dieses mittig positionieren. Dann behält er seine Größe und je nach Fenstergröße wird einfach ein Teil der Bilder rechts und links abgeschnitten oder bei sehr breiten Fenstern eben wiederholt.Das hatte ich mal kurz so. Dabei hat mir dann nicht gefallen, dass die einzelnen im Banner zusammengefügten Bilder tlw. abgeschnitten wurden. Aber man kann wohl nicht alles haben :-/
(Vielleicht auch nur den mittleren Teil als zentrierte img und die Bilder rechts und links als Hintergrund.)
Hhmm, im Ergebnis müsste in etwa das gleiche rauskommen, oder?
Dazu wird es erforderlich sein, den Link zum Block zu machen und ihm eine entsprechende Höhe zu geben.
Der Link ist mir nicht soo wichtig. Aber danke, dass du auch das in deiner Antwort berücksichtigt hast.
Besten Danke und freundliche Grüße
zwerg Alex
-
Hallo Alex
Das hatte ich mal kurz so. Dabei hat mir dann nicht gefallen, dass die einzelnen im Banner zusammengefügten Bilder tlw. abgeschnitten wurden. Aber man kann wohl nicht alles haben :-/
Wenn ich mich richtig erinnere, dann verkleinert der IE Grafiken für die 100% Breite angegeben ist nicht, wenn die Tabelle zu schmal ist, sondern verbreitert dann die Tabelle. Zu schmale Grafigen werden aber gestreckt (was der Qualität nicht unbedingt förderlich ist).
Wenn du unbedingt die Grafik skalieren willst, könntest du noch versuchen, den Link zum Blockelement zu machen, diesem dann 100% Breite geben.
Hhmm, im Ergebnis müsste in etwa das gleiche rauskommen, oder?
Du würdest dann keinen leeren Link haben, wie bei einem reinen Hintergrundbild und du könntest steuern, ob die seitlichen Bilder am Seitenrand abgeschnitten werden, oder sich hinter den mittleren Teil schieben. Dabei wäre es bestimmt einen Versuch wert, diese nicht einfach nebeneinander zu stellen sondern so aussehen zu lassen, als ob sie sich teilweise überlappen.
Der Link ist mir nicht soo wichtig.
Ohne Link müsste dann natürlich die Tabellenzeile bzw. -zelle selbst die Höhe bekommen.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Vielen Dank für deine Antworten Detlef.
Ich werde mich mal daran setzen und versuchen deine Tipps umzusetzen.
Wünsche dir und allen anderen Forumsmitgliedern einen schönen Start in den Dienstag.
-
-
-
-
Glück auf nochmal,
ich habe das Problem dank eurer Hilfe nun für mich zufriedenstellend lösen können. Ich habe den Banner als Hintergrundbild wie folgt eingebunden:
<table>
<tr>
<td align="center" bgcolor="#214263" height="90px" style="background-image:url(../Bilder/Layout/banner.jpg); background-repeat:no-repeat; background-position:center center;">
</td>
</tr>Danke an alle, die sich mit meiner Frage beschäftigt haben. Insbesondere an Stefan und Detlef.
Freundliche Grüße
zwerg Alex