Ein graues Rechteck soll immer Bildschirm-breit dargestellt werden, ohne dass Skrollbalken erzeugt werden. Die Höhe soll immer gleich bleiben.
Wie wird das im Webdesigner 9 Premium gelöst?
Danke im Voraus für die Hilfe.
Hallo HouseCat,
Ein graues Rechteck soll immer Bildschirm-breit dargestellt werden,
Das kannst du ganz einfach gestalten, indem du dieses Rechteck auf die PageBackground-Ebene legst und die Breite selbst anpasst (s.u.) Eine automatische Anpassung über den WD ist nur möglich wenn das Rechteck in grau die ganze Seite abdecken soll. Wenn du eine Höhe definieren willst, ist das mit Bordmitteln so nicht möglich.
Wie groß dein Rechteck sein soll, damit es füllend angezeigt wird, bestimmst du selbst. Je nach dem wie breit die Bildschirme deiner User sind, würde ich die Breite in Pixeln wählen.
15 Zoll, 1024 x 768 Pixel, XGA. 17 Zoll, 1280 x 1024 Pixel, SXGA. 18 Zoll, 1280 x 1024 Pixel
Wenn deine User meistens mit Smartphones auf deiner Seite sind, dann darf das Rechteck natürlich auch kleiner sein um die Ladezeit nicht unnötig zu verlängern; oder du machst eine Browserweiche (weitere Infos unter Tutorials). Gruß Martina
Wenn Du das Rechteck im Hintergrund ansiedeln willst, kannst Du die vom WD auferlegten- und von marboe genannten Einschränkungen umgehen, indem Du ein paar Zeilen CSS Code in die Seite einfügst.
Damit kannst Du dafür sorgen, dass der Balken immer in einer definierten Höhe angezeigt wird, egal mit welcher Auflösung die Seite dargestellt wird. Gleichzeitig wird die Länge des Balkens automatisch an die Fensterbreite angepasst, er "klebt" also förmlich an den horizontalen Browserrändern...
Wie das geht, das habe ich in diesem Thread, in einem anderen Zusammenhang detailliert erklärt.
Für Deinen Fall müsste die Hintergrund Grafik (der Balken) z. B. 1024px lang- und 100px hoch sein. Wenn Du diese Grafik als "gbar.jpg" in ein zum Projekt passendes Hilfsverzeichnis legst, dann könnte der kpl. Code (CSS + HTML) so aussehen:
------------------------------
<style type="text/css">
<!--
img.bg {
min-height: 100px;
min-width: 100%;
width: 100%;
height: 100px;
position: fixed;
top: 25px;
left: 0px;
}
-->
</style>
<img src="index_htm_files/gbar.jpg" class="bg">
------------------------------
Den Code packst Du dann in den HTML Head der kpl Website:
Die im Code angepassten Parameter sind vermutlich selbst erklärend. Du kannst sie nach Belieben ändern. Dabei sind %-Werte, Pixel-Werte und Ausdrücke erlaubt.
Den Erfolg Deiner Experimente kannst Du jederzeit schon in der Vorschau testen.
Viel Erfolg
Vielen Dank für die super ausgearbeitete Anleitung - hat auch gleich so geklappt. Genau so etwas hatte ich gesucht. Vielen Dank.
Durch den HTML-Tag: position: fixed scrollt der Balken leider nicht mit. Wenn ich dies auf static oder relative setze, schließt der Balken nicht mehr direkt mit der Browser-Ecke ab. Gibts hier noch ein Tipp?
[...] Durch den HTML-Tag: position: fixed scrollt der Balken leider nicht mit. [...] Gibts hier noch ein Tipp? [...]
Aber ja...
Versuch's mal mit "absolute", dann klappt's
Wenn der Balken am oberen Browserrand zu sehen sein soll und beim vertikalen Scrollen der Seite nach oben "verschwinden" soll, dann sieht das im Code so aus...
------------------------------
<style type="text/css">
<!--
img.bg {
min-height: 100px;
min-width: 100%;
width: 100%;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
}
-->
</style>
<img src="index_htm_files/gbar.jpg" class="bg">
------------------------------
Die oben gelb markierten Werte sind entsprechend dem geänderten Szenario angepasst.
Viel Erfolg
Perfekt! Vielen Dank für die schnelle Unterstützung !!!! Hat mir sehr geholfen.