P
pitwheazle
New member
- Beiträge
- 3
- Punkte Reaktionen
- 0
Hallo Leute,
ich habe mich hier neu angemeldet, da ich Hilfe in CSS brauche. Ich bin Newbie und habe mich jetzt etwas in HTML und CSS eingearbeitet und bin am Erstellen eines Projektes zum Üben von Matheaufgaben. Das existiert schon als PC Projekt (https://medien.bildung.hessen.de/rechentrainer/index.html), ich will es jetzt mittels Django auch webbasiert erstellen. Die Schülerinnen und Schüler melden sich an und verlinken sich mit ihrer Lehrkraft. Diese kann ihre Arbeitsergebnisse in Form einer Tabelle einsehen. Die Schülerinnen und Schüler in Zeilen untereinander, die Aufgabenkategorien in Spalten nebeneinander. Das funktioniert soweit. Es werden aber irgendwann mal bis zu 35 Aufgabenkategorien, die nebeneinander dargestellt werden sollen und die Spalten sollen aus diesem Grunde nicht so breit sein. Die Beschriftung im Titel habe ich daher gedreht. Wenn ich das anzeigen lasse, ist dieser Titel aber nach links versetzt. Ich zeige das mal in einem Screenshot (Tabelle 1):
Wie man im Inspektor sehen kann, ist der Text "Ergänzen" ausgewählt, er steht aber links vom Rahmen.
Wenn ich kurz die Ansicht zoome, springt der Text an die richtige Stelle, die Spalten sind aber zu breit. Das bleibt auch so, wenn ich das Bild beliebig vergrößere oder verkleinere. Siehe hier (Tabelle 2):
Meine Idee wäre es, der Breite der Tabelle einen festen Wert zu geben. Dazu bin ich aber noch nicht fündig geworden.
Mein Template:
Mein Projekt wird zwar mittels Django erstellt, es handelt sich aber wohl um ein HTML CSS Problem. Denkt dran: Ich bin ein ziemlicher Newbie. (Wie postet man hier normalerweise Code?)
ich habe mich hier neu angemeldet, da ich Hilfe in CSS brauche. Ich bin Newbie und habe mich jetzt etwas in HTML und CSS eingearbeitet und bin am Erstellen eines Projektes zum Üben von Matheaufgaben. Das existiert schon als PC Projekt (https://medien.bildung.hessen.de/rechentrainer/index.html), ich will es jetzt mittels Django auch webbasiert erstellen. Die Schülerinnen und Schüler melden sich an und verlinken sich mit ihrer Lehrkraft. Diese kann ihre Arbeitsergebnisse in Form einer Tabelle einsehen. Die Schülerinnen und Schüler in Zeilen untereinander, die Aufgabenkategorien in Spalten nebeneinander. Das funktioniert soweit. Es werden aber irgendwann mal bis zu 35 Aufgabenkategorien, die nebeneinander dargestellt werden sollen und die Spalten sollen aus diesem Grunde nicht so breit sein. Die Beschriftung im Titel habe ich daher gedreht. Wenn ich das anzeigen lasse, ist dieser Titel aber nach links versetzt. Ich zeige das mal in einem Screenshot (Tabelle 1):
Wie man im Inspektor sehen kann, ist der Text "Ergänzen" ausgewählt, er steht aber links vom Rahmen.
Wenn ich kurz die Ansicht zoome, springt der Text an die richtige Stelle, die Spalten sind aber zu breit. Das bleibt auch so, wenn ich das Bild beliebig vergrößere oder verkleinere. Siehe hier (Tabelle 2):
Meine Idee wäre es, der Breite der Tabelle einen festen Wert zu geben. Dazu bin ich aber noch nicht fündig geworden.
Mein Template:
HTML:
<!DOCTYPE html>
{% load static %}
<html lang="de">
<head>
<title>Rechentrainer im Web</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'styles.css' %}">
<style>
table{
}
thead {line-height: 100px;
}
th {
text-align: center;
padding: 5px;
}
</style>
</head>
<header>
<div class="navbar">
<a href="{% url 'index' %}">⌂ Home</a>
<a>{{titel}}</a>
</div>
</header>
<body>
<table>
<thead>
<tr>
<th style="width: 200px;">Name</th>
<th style="width: 20px;">Zeit</th>
<th style="width: 25px;">Summe</th>
{%for kategorie in kategorien %}
<th style="width: 20px; writing-mode: vertical-rl; transform: rotate(180deg); vertical-align: top; {{kategorie.farbe}}">
{{kategorie.name|truncatewords:1}}
</th>
{%endfor%}
</tr>
</thead>
<tbody>
{% for schueler, dauer, aufgaben in aufgaben_der_schueler %}
<tr >
<td style="text-align: left";>
<a class="button" href="{% url 'mein_schueler' schueler.id %}">{{schueler.vorname}} {{schueler.nachname}} {{schueler.klasse}}</a></td>
<td>{{dauer}}</td>
{% for quote, anzahl in aufgaben %}
<td class="{{quote}}">{{anzahl}}</td>
{% endfor %}
</td>
</tr>
{% empty %}
<tr><td colspan="999"><strong>Es sind noch keine Schüler angemeldet.</strong></td></tr>
{% endfor %}
</tbody>
</table>
</body>
</html>