S
Sempervivum
Guest
Hallo,
ich habe hier ein Javascript, das ein kleines Quiz generiert. Das Problem, das ich habe, betrifft jedoch CSS.
Vereinfacht auf das wesentliche sieht es so aus:
Ich hoffe, man kann das HTML und CSS erkennen trotz Javascript Mein Problem ist, dass ich es nicht schaffe, die einzelnen Fragen oben auszurichten. Nach allem was ich weiß, müsste das mit mit style="display: table-cell; vertical-align: top" für das umgebende Element gehen. Ich habe versucht, den span-Elementen eine feste Höhe zu geben, aber dann bleibt die Oberkante wo sie ist und das Element vergrößert sich unten.
Eine Lösung mit Divs mit fester Höhe und float:left habe ich schon, aber ich hätte lieber das "display: inline-block;", womit sich das Element so schön an den Inhalt anpasst.
Viele Grüße - Ulrich
ich habe hier ein Javascript, das ein kleines Quiz generiert. Das Problem, das ich habe, betrifft jedoch CSS.
Code:
<script type="text/javascript">
<!--
function renderQuiz2() {
document.writeln('<div id="seite" style="display: table-cell; vertical-align: top">');
for(i=0;i<questions.length;i++) {
document.writeln('<span style="display: inline-block;">');
document.writeln('<br><img src="' + images[i] + '" style="border:0" alt="" /><br>');
document.writeln('<span class="question" style="margin-top: 0; padding-top: 0;">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></span><br>');
for(j=0;j<choices[i].length;j++) {
document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />');
}
document.writeln('</span>');
}
document.writeln('</div><br>');
document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>');
}
renderQuiz2();
//-->
</script>
Code:
function renderQuiz2() {
document.writeln('<div id="seite" style="display: table-cell; vertical-align: top">');
for(i=0;i<questions.length;i++) {
document.writeln('<span style="display: inline-block;">');
// hier eine Quizfrage mit variabler Höhe und variabler Breite
document.writeln('</span>');
}
document.writeln('</div>');
}
renderQuiz2();
Eine Lösung mit Divs mit fester Höhe und float:left habe ich schon, aber ich hätte lieber das "display: inline-block;", womit sich das Element so schön an den Inhalt anpasst.
Viele Grüße - Ulrich