0 votes
in SoSci Survey (dt.) by s078257 (140 points)
edited by s078257

Hallo liebes Team,

ich bin am anpassen des HTML-Codes, ich arbeit mit der Vorlage SoSci Survey Green. Die Farben konnte ich prima ändern, nun möchte noch das Logo, was im Moment links ist, bitte nach rechts setzen. Der komplette Balken soll bitt nach rechts.

Ich habe lediglich Grundlagen Kenntnisse was HTLM angeht. Leider stoße ich hier an meine Grenzen.

Ich freue mich über Ihre Hilfe.

Besten Dank im voraus.

1 Answer

0 votes
by SoSci Survey (302k points)

In der HTML-Vorlage des Layouts finden Sie zwei Blöcke mit den CSS-Klassen "s2t-left" und "s2t-content". Diese Blöcke (die jeweils mehrere Zeilen umfassen) tauschen Sie bitte einfach. Das sieht dann so aus:

<div class="s2t-outer">
  <div class="s2t-content">
    %questionnaire%
    <div>%button.submit%</div>
    <div class="s2t-controls">%button.control%</div>
    <div class="s2t-imprint">
      %imprint%
    </div>
  </div>
  <div class="s2t-left">
    <div class="s2t-logo">%logo%</div>
    %progress%
  </div>
</div>

Vorsicht, das "left" nicht einfach ändern, das ist nur eine Bezeichnung, die willkürlich gewählt wurde und zu den CSS-Definitionen weiter oben passen muss.

Man könnte auch über das Flexbox-Attribut "order" gehen, aber ich glaube, das Austauschen ist die einfachte Lösung.

by s078257 (140 points)
Können Sie mir bitte etwas genauer sagen, was ich genau, wo löschen muss.
Ich habe es getestet, leider ist dann immer die Anzeige doppelt und es fehlt etwas.

Ich würde mich freuen, wenn Sie mir helfen können.
Besten Dank im voraus.
by SoSci Survey (302k points)
Bitte identifizieren Sie in der HTML-Vorlage mal das Tag

<div class="s2t-outer">

und das zugehörige schließende Tag ganz unten. Der Teil dazwischen (der genauso lang ist bzw. war die der Code oben) ist zu ersetzen. Wenn Sie nicht mehr sicher sind, was da vorher war, können Sie einfach das "green" Layout nochmal importieren (dann haben Sie zwei davon) und den HTML-Code von dort kopieren.
by s078257 (140 points)
Ganz herlichen Dank. Mit nur 2 Klicks hat es nun geklappt. Ich habe die Anweisung einfach flasch verstanden.

Vielen Dank und weiter so.
by s078257 (140 points)
Entschuldigung, ich muss nochmal mitteilen, dass die letzte Seite nun verschoben ist. Hier ist das Logo am Ende.

Und nicht wie gewünscht an der Seite.
by SoSci Survey (302k points)
Ein Problem auf der letzten Seite kann ich im Modifizierten Layout nicht replizieren. Ich kann gerne nochmal den kompletten HTML-Code posten (s. unten) und wenn das nichts hilft, müsste ich Sie bitten, dass Sie einen Pretest-Link zur vorletzten Fragebogen-Seite posten.

<!DOCTYPE html>
<html>
<head>
%head%
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body { margin: 0px; padding: 0px }
div.s2t-outer {
    max-width: %width%; margin: 16px auto; box-sizing: border-box;
    display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    border: 2px solid %color.4%; vertical-align: top;
}
div.s2t-left {
  width: 200px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 0 200px;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  background-color: #EEEEEE; max-width: 240px;
  border-right: 1px solid %color.4%; padding: 24px 10px; box-sizing: border-box;
}
div.s2t-content {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  min-width: 320px;
  background-color: #FFFFFF;
  padding: 24px 30px;
  box-sizing: border-box;
}
div.s2t-logo img { max-width: 100%; margin-bottom: 32px; }
div.s2t-imprint { margin-top: 32px; text-align: center }
div.s2t-controls { text-align: center; }
div.s2t-controls input,
div.s2t-controls button { margin-bottom: 0.3em }

td.extended table.question th { background-color: transparent; }
td.extended div.trouble { background-color: transparent; }

@media (max-width: %width-200%) {
  div.s2t-outer { display: block; margin: 0 auto; }
  div.s2t-left {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    border-right: 0 none;
    border-bottom: 1px solid %color.4%;
    padding: 1em 30px;
  }
  div.s2t-logo img {
    max-height: 4em;
    margin: 0 3em 0 0;
  }
  div.progressbar {
    width: 100%;
    max-width: 320px;
    margin: 0 0 0 auto;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
  }
  div.s2t-content {
    padding: 20px 16px;
  }
}

h1 { font-size: 18px }
h1:first-child { margin-top: 0 }
a { text-decoration: none }

@media print {
    div.s2t-outer { display: block }
    div.s2t-left { display: none }
}
</style>
</head>
<body>
%form.open%
<div class="s2t-outer">
  <div class="s2t-content">
    %questionnaire%
    <div>%button.submit%</div>
    <div class="s2t-controls">%button.control%</div>
    <div class="s2t-imprint">
      %imprint%
    </div>
  </div>
  <div class="s2t-left">
    <div class="s2t-logo">%logo%</div>
    %progress%
  </div>
</div>

%form.close%
</body>
</html>
by s078257 (140 points)
Jetzt habe ich es hinbekommen, herzlichen Dank.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...