Größe meiner Webseite automatisch anpassen

Kaese-Brot schrieb am 06.11.2014 um 01:04 Uhr

Hallo zusammen,

ich übe gerade ein wenig mit dem Web Designer 9 um nach und nach meine Website zu erstellen. Für meine Startseite wünsche ich mir einen Effekt, den mittlerweile ja viele Seiten nutzen.

Ich möchte auf meiner Startseite ein großformatiges Bild einsetzen, welches sich immer automatisch auf die Bildschrimgröße anpasst. In der Mitte des Bildes wird es ein Feld mit Link zur Main-Site geben wo Enter o.Ä. steht. Wäre natürlich super, wenn sich dieses Feld ebenfalls mit anpassen würde.

Da ich echt keine Ahnung von html, CSS, oder Java habe, wäre meine Frage, ob ich das Projekt auch im Web Designer realisieren kann.

In der Datei habe ich die Seite schon erstellt und das Bild so darauf gelegt, dass es den Arbeitsbereich komplett ausfüllt. Wie gehts dann weiter?

Grüße

Rudi

Kommentare

BeRo schrieb am 06.11.2014 um 12:13 Uhr

[...] Ich möchte [...] ein großformatiges Bild einsetzen, welches sich immer automatisch auf die Bildschrimgröße anpasst [...]

Dazu bietet der WD10 prem. eine drag & drop Lösung an. Aber auch mit dem WD9 ist das zu realisieren, wenn Du das Verfahren benutzt, das ich z. B. hier ausführlich beschrieben habe.

[...] In der Mitte des Bildes wird es ein Feld [...] geben [...]. Wäre natürlich super, wenn sich dieses Feld ebenfalls mit anpassen würde. [...]

Die autom. Größenanpassung ist nur möglich, wenn die Grafik auf dem Hintergrundbild angelegt wird (s. o.) Allerdings funktioniert dann kein Link...

Du könntest natürlich das Eingabefeld aus 2 Ebenen zusammenbauen. Die unterste Ebene enthält dann die Grafik, die Du in das Hintergrundbild einbauen kannst und die oberste Ebene bekommt den Link. Dabei kann die verlinkte Ebene durchaus ein Text sein, z. B. "ENTER". Der Text wächst dann zwar nicht mit der Bildschirmgröße, aber er funktioniert als Link.

Lies Dir mal den oben verlinkten Thread durch. Ich bin sicher, dass Du Dein Problem danach in den Griff bekommst...

Viel Erfolg

Zuletzt geändert von BeRo am 06.11.2014, 12:13, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Kaese-Brot schrieb am 09.11.2014 um 13:25 Uhr

Hi, sorry für die späte Antwort und Danke für die Antwort. Ich habe mittlerweile auf den Web Designer 10 geupdatet.

Wie sieht denn dort das drag&drop Verfahren aus?

Grüße

BeRo schrieb am 09.11.2014 um 18:32 Uhr

Ich habe [...] den Web Designer 10 [...] Wie sieht denn dort das drag&drop Verfahren aus? [...]

Du ziehst einfach das gewünschte Bild mit der Maus in den Arbeitsbereich Hintergrund (Pasteboard backgorund) und stellst ein, dass das Bild den Hintergrund komplett ausfüllen soll.

That's all

Die Details kannst Du u. a. hier nachlesen.

Viel Erfolg

Zuletzt geändert von BeRo am 09.11.2014, 18:32, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Kaese-Brot schrieb am 13.11.2014 um 13:23 Uhr

Hat alles geklappt. Nur tut sich mir eine weitere Frage auf. Ich möchte ein Objekt dort platzieren, welches den Link für die eigentliche Seite enthält. Lässt es sich (evtl mittels CSS Code) so einrichten, dass es immer genau in der Mitte des Bildschirmes platziert wird?

 

Grüße und Danke

BeRo schrieb am 13.11.2014 um 21:41 Uhr

[...] Ich möchte ein Objekt dort platzieren [...]

Das sollte kein Problem sein, aber wo ist "dort"

Das Fixieren eines Objekts an einem beliebigen Platz im Browser Fenster haben wir schon so oft exerziert, dass Du die Antwort auf Deine diesbezügliche Frage leicht selbst geben könntest.

Abhängig davon, ob dieses Objekt noch besondere Fähigkeiten haben muss, kann die Methode der Fixierung eine andere sein. Mehr Details dazu, wenn Du Dein aktuelles Problem genauer geschildert hast.

Also, auf ein Neues...

Zuletzt geändert von BeRo am 13.11.2014, 21:41, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Kaese-Brot schrieb am 13.11.2014 um 22:23 Uhr

Blöde ausgedrückt. Mit dort meinte ich eigentlich nur über dem Hintergrundbild. Hat ja problemlos funtkioniet, dass es sich in der Größe anpasst. Jetzt habe ich ein Objekt in der Mitte gesetzt, nur ändert sich die Mitte ja auch, je nach Bildschirmgröße.

Daher war die Frage, wie ein Objekt (erstmal egal auf welcher Ebene) so bearbeitet werden kann, dass es sich immer genau mittig im Fenster positioniert.

Ich hoffe ich hab mein anliegen klarer ausgedrückt

abacaxi3000 schrieb am 14.11.2014 um 18:57 Uhr

Sowas ähnliches habe ich ebenfalls noch geplant, aber nicht umgesetzt. Würde mich da über einen Tipp ebenfalls freuen!

BeRo schrieb am 14.11.2014 um 23:38 Uhr

Das ist relativ einfach umzusetzen, wenn du z. B. das !FixedTab Tweak benutzt.

Den vorhandenen HTML Code im Body des Platzhalters erweiterst Du um einen Eintrag und schon klappt's.

-----------------------
</div></a></div></div>
<div style="position:fixed; top:50%;">
<div><a><div>
-----------------------

Der im Code gelb markierte Eintrag wurde geändert von "top:0px" auf "top:50%". Das ist (fast) das ganze Geheimnis.

Damit das betroffene Objekt auch horizontal in der Mitte steht, muss es bei der Anlage nur in der Mitte der Seite angeordnet werden.

Wird z. B. eine NavBar auf diese Art zentriert, kann das Ergebnis so aussehen.

Wie so oft, gilt auch hier: "Kein Licht ohne Schatten"

Die horizontale Zentrierung entspricht in ihrem Verhalten der Seitendarstellung. Das heißt, dass Objekt wird nach rechts wandern und u. U. aus dem Browserfenster hinausgedrückt, wenn das Fenster schmaler wird als die eingestellte Seitenbreite.

IMHO kann man mit diesem Effekt leben, zumal ja die ganze Seite davon betroffen ist...

Also gerne viel Erfolg beim Nachbau.

Zuletzt geändert von BeRo am 14.11.2014, 23:38, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

abacaxi3000 schrieb am 15.11.2014 um 02:55 Uhr

Habe das gerade mal probiert. Das Objekt bei mir ist ein .png Bild. Wenn ich das anwähle, unter Webeigenschaften/Platzhalter im Body den Code eingebe, erscheint das Bild zwar noch im Arbeitsmodus, aber nicht mehr in Vorschau??

BeRo schrieb am 15.11.2014 um 13:58 Uhr

[...] ein .png Bild. Wenn ich das anwähle, unter Webeigenschaften/Platzhalter im Body den Code eingebe [...]

Das Bild darf keinen Code als Platzhalter bekommen. Klar, dass es dann nicht mehr angezeigt wird, es ist ja jetzt nur noch ein Platzhalter...

Der Platzhalter, dessen HTML Code verändert werden muss, ist der Platzhalter, der von dem !FixedTab Tweak angelegt wird. beliebig viele Objekte (auch Dein PNG Bild) können in der !FixedTab Ebene abgelegt werden. Die da abgelegten Objekte unterliegen den im HTML Code des Platzhalters gemachten Vorgaben. Das gilt natürlich auch für die vertikale Zentrierung...

Probier's nochmal.

Viel Erfolg

Zuletzt geändert von BeRo am 15.11.2014, 13:58, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

abacaxi3000 schrieb am 15.11.2014 um 15:02 Uhr

Ok, wieder was gelernt. So funktioniert es auch, aber noch immer nicht ganz korrekt. Das Bild mit dem Link wandert so eher uns untere Drittel der Seite und nicht in die Mitte?

BeRo schrieb am 15.11.2014 um 16:09 Uhr

[...] Das Bild mit dem Link wandert so eher uns untere Drittel der Seite [...]

Das kann nur passieren, wenn Du das Bild schon im Editorfenster unterhalb der NULL Position angeordnet hast.

Die Funktion nimmt die Position des Objekts, das vertikal zentriert werden soll, als Nullpunkt und addiert dazu die Hälfte der Bildschirmhöhe. Liegt dieser Nullpunkt in der vertikalen Mitte der Seite, wird das Bild nach dem Aufruf der Funktion  an den unteren Rand geschoben...

Also, verschiebe das Bild im Editor an den oberen Rand der Seite und in die horizontale Mitte der Seite und Ruhe ist.

Problem gelöst?

Zuletzt geändert von BeRo am 15.11.2014, 16:09, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

abacaxi3000 schrieb am 15.11.2014 um 17:20 Uhr

Jo, das war's. Ich weiß gar nicht wie oft ich schon danke gesagt habe! Wird langsam schon inflationär! ;)