Dynamische Ausrichtung/Größe von Objekten

Marvin_G schrieb am 26.05.2016 um 17:43 Uhr

Hallo allerseits,
ich habe eine Frage und zwar:

Wie kann man ein Rechteck im WebDesigner so ausrichten, dass es egal welche Bildschirmgröße man hat immer gleich dargestellt ist. Sodass sich das Element bei einem kleinen Bildschirm verkleinert und einem großen Bildschirm vergrößert, die mobile Version sich jedoch nicht verändert.

Ich habe bereits nach "CSS-Schnipsel" gesucht und ausprobiert, jedoch hatte es leider nie funktioniert.

Beispiel:

Vielen Dank im Voraus

Details:
Software: Magix WebDesigner 11 Premium
Betriebssystem: Windows 8.1

Kommentare

BeRo schrieb am 27.05.2016 um 09:58 Uhr

Was Du suchst, gehört zum klassischen responsive Design, das nur mit einem echten HTML Editor realisiert werden kann.
Mit dem WebDesigner geht es nicht, weil er ein WYSIWYG Editor ist, der den HTML Code automatisch erzeugt, nachdem Du das Layout durch manuelle Anordnung einzelner Objekte fertiggestellt hast.

Du kannst allenfalls mit JS/CSS/HTML Codeschnipseln den vom WD vorgegebenen HTML Code ergänzen/verändern und damit für einzelne Objekte Ergebnisse erreichen, die an "echtes" responsive Design herankommen.
Solche Manipulationen versagen aber immer dann, wenn andere Objekte auf der veränderten Seite von den Größenänderungen betroffen sind, da die sich, wie vom WD vorgegeben, immer statisch verhalten.

Wie das aussehen kann, das kannst Du leicht selbst sehen, wenn Du den u. a. Code in den HTML Body einer Seite einfügst, die außer einem 360px hohen Kopfbereich- und einem 120px Footer leer ist.

-----------------------------------------------
<div class="embed-container" id="Box">
<iframe width="560" height="315" src=" frameborder="0" allowfullscreen>
</iframe>
</div>

<style type="text/css">
#Box {
      top:370px; z-index:999; } 
    .embed-container {
      position: relative;
      padding-bottom: 56.25%; /* ratio 16x9 */
      height: 0;
      overflow: hidden;
      width: 100%;
      height: auto;
    }
    .embed-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    /* ratio 4x3 */
    .embed-container.ratio4x3 {
      padding-bottom: 75%;
    }

  </style>
--------------------------------------------

Mit dem Code wird ein YT Video eingebunden, das sich an die Größe des Fensters anpasst, mit den oben erklärten Nachteilen...
Wenn Du anstelle des o. a. Videos eine Grafik einbindest, z. B. ein Rechteck, werden die Nachteile noch deutlicher.

Fazit: Es geht nicht wirklich...

Es sei denn, Du möchtest nur je einen Balken im Kopf- und im Fußbereich anlegen, der sich automatisch an die Browser-Fensterbreite anpasst.
Das kannst Du ganz einfach mit den Möglichkeiten erreichen die der WD anbietet.

Viel Erfolg

 

Zuletzt geändert von BeRo am 27.05.2016, 10:03, 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... 🤓