@@bleumi85
<caption><span>Januar</span><br><span>2016</span></caption>
Hier würde ich die span
s noch geschwätziger machen, was sie denn so in sich haben, z.B. mit Klassen:
<caption>
<span class="monat">Januar</span>
<span class="jahr">2016</span>
</caption>
Und schon ist man das unschöne br
-Element los; wenn gewünscht den Elementen display: block
verpassen.
<tbody> <tr> <td class="kal_kw">53</td>
Für Kopfzellen ist das th
-Element da. Nicht nur für Spaltenköpfe, sondern auch für Zeilenköpfe:
<tbody>
<tr>
<th>53</th>
Und schon ist man auch die Klasse kal_kw
los; wenn gewünscht kann man ja .kalender thead th
und .kalender tbody th
anders stylen.
<td class="tag_anderer">28</td> <td class="tag_anderer">29</td> <td class="tag_anderer">30</td> <td class="tag_anderer">31</td> <td class="tag_standard">1</td> <td class="tag_standard">2</td> <td class="tag_standard">3</td> <tr>
Die Klasse tag_anderer
für die Tage des vorigen und folgenden Monats macht durchaus Sinn; die Klasse tag_standard
für die Tage des aktuellen Monats macht keinen. Du stylst .kalender td
; Abweichungen gibst du für .kalender .tag_anderer
an.
Am Ende muss natürlich </tr>
stehen, im Dabblet ist’s aber richtig.
<td class="tag_anderer">28</td>
<td class="tag_anderer">29</td>
<td class="tag_anderer">30</td>
<td class="tag_anderer">31</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
Und mein zugehöriges CSS zum testen sieht bisher wie folgt aus:
body{ background:#333; text-align:center; } .kalender{ width:40em; height:40em; background:blue; }
Im Dabblet hast du für .kalender
auch noch display: inline
; was nicht wirklich Sinn macht. Irgendwas muss ja display: (inline-)table
haben; wenn es kein solches Element gibt, wird eine anonyme Box mit display: table
angelegt.
Du könntest stattdessen display: inline-table
setzen; so richtig sinnvoll ist das aber auch nicht. Besser du lässt das auf display: table
(gibst also gar nichts an, weil Default) und zentrierst die Tabelle per margin: auto
.
Dann willst du text-align: center
vielleicht auch nicht für body
angeben, sondern für .kalender
.
Wenn du .kalender
noch etwas border
gibst, geht das wohl in die von dir gewünschte Richtung, siehe Dabblet.
LLAP 🖖
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|