nicht angemeldet
Problem mit grid
Gunnar BittersmannHi(gh)!
Bei dem Versuch, ein Inhaltsverzeichnis (effektiv zweispaltig) mit grid zu layouten, ist etwas schief gegangen - Zellen in derselben Zeile werden vertikal versetzt statt auf gleicher Höhe dargestellt (siehe Link). Ferner erscheint die über die ganze Breite des Grids gehende Doppelzelle der Klasse "line" ohne unteren schwarzen Rand.
Das CSS-Stylesheet sieht so aus:
.c { text-align:center }
.i { font-style:italic }
.b { font-weight:bold }
.ic { font-style:italic; text-align:center }
.small { font-size:16px }
.large { font-size:24px }
h1 { font-size:30px }
h2 { font-size:24px }
div.page { margin-left:20%; width:60%; margin-right:20% }
div.container { display:grid; grid-template-columns:75% 25%; grid-template-rows:auto }
div.chapters { grid-column-start:1; grid-column-end:2; padding-right:5px; text-align:center }
div.pagenumbers { grid-column-start:2; grid-column-end:3; padding-right:5px; text-align:right }
div.line { grid-column-start:1; grid-column-end:3; padding-right:5px; border-bottom:black 2px }
das HTML-Skript:
<html>
<head>
<title>Rüdiger MOBEL: Heimteilchenbeschleuniger mit und ohne Zillertalbahn - Seite 8</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="heimteilchenbeschleuniger.css" type="text/css">
</head>
<body>
<div class="page">
<div class="container">
<div class="chapters">
<h1>Inhalt</h1>
</div>
<div class="pagenumbers">
Seite
</div>
<div class="chapters">
<h2>Einführung</h2>
</div>
<div class="pagenumbers">
11
</div>
<div class="line">
</div>
<div class="chapters">
Die Welt vor der Erfindung<br>
des Heimteilchenbeschleunigers
</div>
</div>
<p class="c">
<a href="heimteilchenbeschleuniger_007.html">[ Vorherige Seite ]</a> <a href="heimteilchenbeschleuniger_009.html">[ Nächste Seite ]</a>
</p>
</div>
</body>
</html>
Was habe ich falsch gemacht?
Bis bald im Khyberspace!
Yadgar
-
@@Yadgar
Bei dem Versuch, ein Inhaltsverzeichnis (effektiv zweispaltig) mit grid zu layouten, ist etwas schief gegangen - Zellen in derselben Zeile werden vertikal versetzt statt auf gleicher Höhe dargestellt (siehe Link).
Das Entwicklerwerkzeug deines Browsers zeigt dir, dass dem nicht so ist. Und es zeigt dir, dass Überschriften Abstände haben.
Was habe ich falsch gemacht?
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Naja, vielleicht wird aus mir irgendwann auch noch mal ein richtiger Mensch... bis dahin ist [ZENSIERT] [ZENSIERT] [ZENSIERT] [ZENSIERT] [ZENSIERT] [ZENSIERT] [ZENSIERT]!
Uärgl!
-
-
@@Yadgar
.c { text-align:center } .i { font-style:italic } .b { font-weight:bold } .ic { font-style:italic; text-align:center } .small { font-size:16px } .large { font-size:24px }Was habe ich falsch gemacht?
Such dir was aus:
- Du verwendest Inline-Styles.
- Du gibst die Darstellung im HTML an anstatt im CSS.
- Du verwendest präsentationsbezogene Klassen.
Im Übrigen ist die Klasse
icsinnfrei. Du könntest den betreffenden Elementen auch die Klasseniundcgeben.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hi(gh)!
- Du verwendest Inline-Styles.
Hä? Erklär das mal für Normal-Trottel wie mich!
- Du gibst die Darstellung im HTML an anstatt im CSS.
Hä? Erklär das mal für Normal-Trottel wie mich!
- Du verwendest präsentationsbezogene Klassen.
Hä? Erklär das mal für Normal-Trottel wie mich!
Im Übrigen ist die Klasse
icsinnfrei. Du könntest den betreffenden Elementen auch die Klasseniundcgeben.Nö. Zwei Klassen für ein Element geht bei mir nicht. Wenn ich <p class="i" class="c"> notiere wird nur die erste Klassenzuweisung übernommen - aber ich bin ja auch nur ein unkewler Normal-Trottel...
LLAP 🖖
Boah, was bist du kewl!
Bis bald im Khyberspace!
Yadgar
-
<Ingrid> Hi(gh)!
Nö. Zwei Klassen für ein Element geht bei mir nicht. Wenn ich <p class="i" class="c"> notiere wird nur die erste Klassenzuweisung übernommen - aber ich bin ja auch nur ein unkewler Normal-Trottel...
O.k., ich habe mich zwischendurch selbst schlau gemacht: man muss innerhalb der Anführungszeichen die Klassenbezeichner mit Leerzeichen trennen, dann funktioniert es! Wieder was gelernt!
Bis bald im Khyberspace!
Yadgar </Ingrid>
-
@@Yadgar
O.k., ich habe mich zwischendurch selbst schlau gemacht: man muss innerhalb der Anführungszeichen die Klassenbezeichner mit Leerzeichen trennen, dann funktioniert es! Wieder was gelernt!
An dem Punkt war ich vor Kurzem auch mal.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
@@Yadgar
[3×] Hä? Erklär das mal für Normal-Trottel wie mich!
V.h.n.v.:
- Du verwendest präsentationsbezogene Klassen.
Die Klasse
csagt nichts über die Art der jeweiligen Elemente/Inhalte aus, sondern allein, dass die Darstellung zentriert erfolgen soll. Eine rein präsentationsbezogene Klasse.Die Klasse
isagt nichts über die Art der jeweiligen Elemente/Inhalte aus, sondern allein, dass die Darstellung kursiv erfolgen soll. Eine rein präsentationsbezogene Klasse.Die Klasse
bsagt nichts über die Art der jeweiligen Elemente/Inhalte aus, sondern allein, dass die Darstellung fett erfolgen soll. Eine rein präsentationsbezogene Klasse.- Du gibst die Darstellung im HTML an anstatt im CSS.
Die Art der Darstellung (zentriert, kursiv, fett) steht im HTML. Wenn du die Darstellung ändern willst, musst du das HTML ändern anstatt das Stylesheet. Schlecht.
- Du verwendest Inline-Styles.
class="c"ist genauso Inline-Stylestyle="text-align: center". Die Art der Darstellung sollte nicht im HTML angegeben werden.Das Markup könnte so aussehen:
<nav id="paging"> <a href="heimteilchenbeschleuniger_007.html">Vorherige Seite</a> <a href="heimteilchenbeschleuniger_009.html">Nächste Seite</a> </nav>Die eckigen Klammern haben auch nichts im HTML zu suchen. (Was sollte ein Screenreader vorlesen?)
Gestylt:
#paging { text-align: center } #paging a::before { content: "[\a0 " } #paging a::after { content: "\a0 ]" }(
\a0ist das Escape für U+00A0 no-break space.)LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
@@Gunnar Bittersmann
Das Markup könnte so aussehen:
<nav id="paging"> <a href="heimteilchenbeschleuniger_007.html">Vorherige Seite</a> <a href="heimteilchenbeschleuniger_009.html">Nächste Seite</a> </nav>Mit Angabe der Beziehung:
<nav id="paging"> <a rel="prev" href="heimteilchenbeschleuniger_007.html">Vorherige Seite</a> <a rel="next" href="heimteilchenbeschleuniger_009.html">Nächste Seite</a> </nav>Die Verwendung des
nav-Elements ist überdenkenswert.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory