Ask a Question

Position des Fortschrittsbalkens verschieben

0 votes
in SoSci Survey (dt.) by s135653 (125 points)

Hallo,

ich würde liebend gerne das Layout "SoSci Survey Shutter". Das einzig störende ist, dass der Fortschrittsbalken unten rechts angezeigt wird. Gibt es eine möglichkeit ihn nach oben rechts zu verschieben? Habe dafür keine Anleitung gefunden.
Hier der HTML Vorlage von Shutter:
welche Zeile gibt die Position an? Oder wie kann ich sie hinzufügen?

div.s2t-progress {
	width: 280px;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1 1 280px;
	-ms-flex: 1 1 280px;
	flex: 1 1 280px;
	margin: 0 0 0 20px
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2; 
}

Danke und viele Grüße

1 Answer

0 votes
by SoSci Survey (328k points)

Um den Fortschrittsbalken an das andere Ende des Layouts zu verschieben, müssten Sie im Layout unter "HTML-Vorlage des Layouts" den Platzhalter %progress% an eine geeignete Stelle im Layout verschieben.

Details gerne auf Nachfrage, dann sehe ich in das Layout, was dort noch angepasst werden müsste.

by s135653 (125 points)
Wo ist denn die geeignete Stelle? Bei mir hat es bisher nicht funktioniert. Konnte ihn nur nach links schieben oder komplett verschwinden lassen :D
Das ist der orginal code von shutter:
Es wäre fantastisch, wenn Sie mir sagen können was genau geändert werden muss.
Danke & Viele Grüße, Clara



<!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 { background-color: #EEEEEE; padding-bottom: 24px; line-height: 1.5em; padding: 10px; }
div.s2t-logo img { max-width: 100%; box-sizing: border-box; }
div.s2t-logo { text-align: center }
div.s2t-logo img:first-child { margin-bottom: 30px; padding: 0 40px 10px 40px; border-bottom: 2px solid #CCCCCC }
div.questionary { background-color: white; border: 1px solid %color.4%; min-width: 320px; max-width: %width%; padding: 20px; margin: 0 auto; }
hr { height: 2px; background-color: transparent; border: 0 none; border-bottom: 2px solid #CCCCCC; margin: 40px 0 }
a { text-decoration: none; }
h1 { text-align: center; font-weight: normal; font-size: 24px }
h2 { text-align: center; font-weight: normal; font-size: 18px }

div.s2t-footer {
    display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
}
div.s2t-progress {
    width: 280px;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 280px;
    -ms-flex: 1 1 280px;
    flex: 1 1 280px;
    margin: 0 0 0 20px
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
div.s2t-imprint {
    width: 520px;
    -webkit-box-flex: 9;
    -moz-box-flex: 9;
    -webkit-flex: 9 1 520px;
    -ms-flex: 9 1 520px;
    flex: 9 1 520px;
    max-width: 100%;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

@media (max-width: 560px) {
  div.s2t-footer { display: block }
  div.s2t-progress { margin: 0 0 16px 0 }
  div.s2t-logo img:first-child { padding: 0 20px 10px 20px; }
}
@media (max-width: 480px) {
  body { padding: 0; }
  div.questionary { padding: 10px; }
  div.s2t-logo img:first-child { padding: 0 0 10px 0; }
}

div.trouble { background-color: %color.4%; border-left: 16px solid %color.2% }
div.head.selscale { background-color: %color.3%; color: %color.1% }
div.head { background-color: transparent; color: %color.1% }
table.question td.anchor,
div.question div.anchor,
table.question th,
table.question th.subheading { background-color: transparent; color: %color.1% }
table.question th { background-color: %color.3%; padding: 0 }
table.question th.opener { vertical-align: bottom }
input.button { font-size: 1em }
div.example { font-size: 13.5px; line-height: 1.2em; padding-right: 10% }

table.question th.opener,
table.question td.opener,
table.question div.opener,
div.question div.opener {
    padding: 10px 5px 0px;
}

div.s2items div.s2subheading {
  background-color: %color.3%;
}
div.s2items div.s2subheading div.s2label {
  font-weight: bold;
}

div.chapter h1 { background-color: %color.4%; color: white; font-weight: bold; text-align: center; padding: 0.2em 16px; font-size: 38px; line-height: 1em; margin-bottom: 0em }
div.chapter > div { background-color: %color.3%; text-align: center; padding: 10px 16px 10px 16px }
div.chapter > div > p:first-child { margin-top: 0 }
div.chapter > div > p:last-child { margin-bottom: 0 }

.s2iSelection.cards { margin-top: 1em }

table.question tr.hover td,
div.s2items div.s2item > div,
div.s2items.narrow div.s2item,
div.s2items.slim div.s2item {
  border-top: 1px solid %color.4%;
  border-bottom: 1px solid %color.4%;
}
div.s2items div.s2item.s2anchor > div,
div.s2items div.s2item.s2heading > div,
div.s2items.narrow div.s2item > div,
div.s2items.slim div.s2item > div,
div.s2items.narrow div.s2item.s2anchor,
div.s2items.slim div.s2item.s2anchor,
div.s2items.narrow div.s2item.s2heading,
div.s2items.slim div.s2item.s2heading {
  border-top: 0 none;
  border-bottom: 0 none;
}

</style>
</head>
<body>
<div class="questionary">
<div class="s2t-logo">%logo%</div>

%questionnaire%

<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed">
<colgroup>
  <col width="*">
  <col width="*">
  <col width="*">
</colgroup>
<tr>
  <td style="text-align: left">%button.back%</td>
  <td style="text-align: center; font-size: 75%">%button.break%</td>
  <td style="text-align: right">%button.next%</td>
</tr>
</table>
<div style="margin-top: 8px; font-size: 80%">%button.leave%</div>

<hr style="margin: 40px 0 10px 0">

<div class="s2t-footer">
  <div class="s2t-progress" style="padding-top: 2px">%progress%</div>
  <div class="s2t-imprint">%imprint%</div>
</div>

</div>
</body>
</html>
by SoSci Survey (328k points)
In der folgenden Variante wäre das Logo direkt unter dem Logo, ebenfalls zentriert:

<!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 { background-color: #EEEEEE; padding-bottom: 24px; line-height: 1.5em; padding: 10px; }
div.s2t-logo img { max-width: 100%; box-sizing: border-box; }
div.s2t-logo { text-align: center }
div.s2t-logo img:first-child { margin-bottom: 0px; padding: 0 40px 10px 40px; border-bottom: 2px solid #CCCCCC }
div.questionary { background-color: white; border: 1px solid %color.4%; min-width: 320px; max-width: %width%; padding: 20px; margin: 0 auto; }
hr { height: 2px; background-color: transparent; border: 0 none; border-bottom: 2px solid #CCCCCC; margin: 40px 0 }
a { text-decoration: none; }
h1 { text-align: center; font-weight: normal; font-size: 24px }
h2 { text-align: center; font-weight: normal; font-size: 18px }

div.s2t-footer {
    display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
}
div.s2t-progress {
    width: 280px;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 280px;
    -ms-flex: 1 1 280px;
    flex: 1 1 280px;
    margin: 0 auto 40px auto;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
div.s2t-imprint {
    width: 520px;
    -webkit-box-flex: 9;
    -moz-box-flex: 9;
    -webkit-flex: 9 1 520px;
    -ms-flex: 9 1 520px;
    flex: 9 1 520px;
    max-width: 100%;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

@media (max-width: 560px) {
  div.s2t-footer { display: block }
  div.s2t-progress { margin: 0 0 16px 0 }
  div.s2t-logo img:first-child { padding: 0 20px 10px 20px; }
}
@media (max-width: 480px) {
  body { padding: 0; }
  div.questionary { padding: 10px; }
  div.s2t-logo img:first-child { padding: 0 0 10px 0; }
}

div.trouble { background-color: %color.4%; border-left: 16px solid %color.2% }
div.head.selscale { background-color: %color.3%; color: %color.1% }
div.head { background-color: transparent; color: %color.1% }
table.question td.anchor,
div.question div.anchor,
table.question th,
table.question th.subheading { background-color: transparent; color: %color.1% }
table.question th { background-color: %color.3%; padding: 0 }
table.question th.opener { vertical-align: bottom }
input.button { font-size: 1em }
div.example { font-size: 13.5px; line-height: 1.2em; padding-right: 10% }

table.question th.opener,
table.question td.opener,
table.question div.opener,
div.question div.opener {
    padding: 10px 5px 0px;
}

div.s2items div.s2subheading {
  background-color: %color.3%;
}
div.s2items div.s2subheading div.s2label {
  font-weight: bold;
}

div.chapter h1 { background-color: %color.4%; color: white; font-weight: bold; text-align: center; padding: 0.2em 16px; font-size: 38px; line-height: 1em; margin-bottom: 0em }
div.chapter > div { background-color: %color.3%; text-align: center; padding: 10px 16px 10px 16px }
div.chapter > div > p:first-child { margin-top: 0 }
div.chapter > div > p:last-child { margin-bottom: 0 }

.s2iSelection.cards { margin-top: 1em }

table.question tr.hover td,
div.s2items div.s2item > div,
div.s2items.narrow div.s2item,
div.s2items.slim div.s2item {
  border-top: 1px solid %color.4%;
  border-bottom: 1px solid %color.4%;
}
div.s2items div.s2item.s2anchor > div,
div.s2items div.s2item.s2heading > div,
div.s2items.narrow div.s2item > div,
div.s2items.slim div.s2item > div,
div.s2items.narrow div.s2item.s2anchor,
div.s2items.slim div.s2item.s2anchor,
div.s2items.narrow div.s2item.s2heading,
div.s2items.slim div.s2item.s2heading {
  border-top: 0 none;
  border-bottom: 0 none;
}

</style>
</head>
<body>
<div class="questionary">
<div class="s2t-logo">%logo%</div>
<div class="s2t-progress" style="padding-top: 2px">%progress%</div>

%questionnaire%

<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed">
<colgroup>
  <col width="*">
  <col width="*">
  <col width="*">
</colgroup>
<tr>
  <td style="text-align: left">%button.back%</td>
  <td style="text-align: center; font-size: 75%">%button.break%</td>
  <td style="text-align: right">%button.next%</td>
</tr>
</table>
<div style="margin-top: 8px; font-size: 80%">%button.leave%</div>

<hr style="margin: 40px 0 10px 0">

<div class="s2t-footer">
  <div class="s2t-imprint">%imprint%</div>
</div>

</div>
</body>
</html>
by s135653 (125 points)
Okay, vielen Dank :) Ursprünglich wollte ich den Balken ja aber rechts. Ist das auch möglich? Ansonsten kann ich den mittigen verwenden.
by SoSci Survey (328k points)
Sie können das Logo mittels CSS `float: left; width: 50%;` auch nach links setzen und den Bereich mit dem Fortschrittsbalken mittels `width: 50%;` entsprechend nach rechts setzen. Alternantiv können Sie anstelle der beiden Zeilen auch eine Tabellen-Konstruktion verwenden. Da stehen Ihnen alle Gestaltungsmöglichkeiten offen.

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

Categories

Snow Theme by Q2A Market
Powered by Question2Answer
...