nicht angemeldet
JürgenB
Tabellenkalk
Tabellenkalk
Der Martin
Gunnar Bittersmann
Gunnar Bittersmann
Rolf B
Rolf B
Gunnar Bittersmann
Ich habe ein Bootstrap 4 Template mit meinen bescheidenen Möglichkeiten bearbeiten und ein Problem mit der Tabelle im Modal
Das html
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Biografie: Farid Ben Yahia</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<table class="table table-borderless">
<tbody>
<tr>
<td>1951</td>
<td>geboren in Gabès, Tunesien</td>
</tr>
<tr>
<td>1965</td>
<td>erste Ausstellung der Werke in Tunesien</td>
</tr>
<tr>
<td>1972 – 1978</td>
<td>Studium Politische Wirtschaftswissenschaften in Paris</td>
</tr>
<tr>
<td>Seit 1975</td>
<td>Regelmäßige nationale und internationale Ausstellungen seiner Werke. (Paris, Sens, Bordeaux, Cannes, Marseille, Florenz, Drammen, Oslo, Gabès, Sidi-Bou-Said, Tunis, und Bühl, Bischofsheim, Hamburg, Frankfurt, Rüsselsheim, Groß-Umstadt, Darmstadt, Duisburg, Köln, Bad-Honnef, Michelstadt, Seeheim-Jugenheim, Mainz, Rödermark, Wiesbaden, Zwickau und Reinheim).
</td>
</tr>
<tr>
<td>Technik:</td>
<td>Sein Werk umfasst hauptsächlich Malerei auf Leinwand und Papier in
verschiedenen Techniken und Stilrichtungen, findet Ausdruck aber auch
in Serigraphien, Skulpturen und Keramiken.</td>
</tr>
<tr>
<td>Themen:</td>
<td>Farid Ben Yahia ist in seinem Hauptwerk ein ‚engagierter’ Künstler, der
auf soziale, wirtschaftliche und zwischenmenschliche Themen
aufmerksam macht.</td>
</tr>
</tbody>
</table>
<p></p>
<tr>
<td><b>Seine Bilder sind in verschiedenen Museen, in öffentlichen Gebäuden und bei internationalen Privatsammlern (Niederlande, Norwegen, Frankreich, Tunesien, Deutschland) zu finden.</b></td></tr>
<p></p>
<br>
<!-- <div class="modal hr"></div> !-->
<br>
<h6>Ausstellungsdaten in chronologischer Reihenfolge:</h6>
<table class="table table-borderless">
<tbody>
<tr>
<td>2022</td>
<td>März: Online-Kollektiv-Ausstellung zum Tag der Druckkunst. <br>
<a href=" https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/" target="_blank" title="">https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/</a></td>
</tr>
<tr>
<td>2022</td>
<td>Feb.-März: Kollektivausstellung anlässlich des internationalen Wettbewerbs - <br> 45. Kunstpreisausstellung der Sparkasse Karlsruhe (wegen COVID19 nur Online). <br>
<a href="https://sparkassenstiftungen-ka.de/kulturstiftung/45-kunstpreis-2022/" target="_blank" title="">https://sparkassenstiftungen-ka.de/kulturstiftung/45-kunstpreis-2022/</a></td>
</tr>
<tr>
<td>2021</td>
<td>Nov/Dez.: Jahresausstellung der Mitglieder des BBK in der 'Paulskirche', Frankfurt</td>
</tr>
<tr>
<td>2021</td>
<td>Einzelausstellung in der 'Remisengalerie des Schlosses Philippsruh', Hanau – <br>
ausgefallen wegen COVID19</td>
</tr>
<tr>
<td>2020</td>
<td>Beteiligung im Online-Katalog des BBK Frankfurt- anstelle der wegen COVID19 ausgefallenen Jahresausstellung der Mitglieder des BBK in der 'Paulskirche'<br>
<a href="http://katalog.bbk-frankfurt.de/portfolio/farid-ben-yahia/" target="_blank" title="">http://katalog.bbk-frankfurt.de/portfolio/farid-ben-yahia/</a></td>
</tr>
<tr>
<td>2020</td>
<td>Bunter Aufbruch – Online-Gemeinschaftsausstellung <br>
verschoben (Kein bunter Aufbruch COVID19 in Sicht)</td>
</tr>
<tr>
<td>2020</td>
<td>April – Amnesty International- Ausstellung der Sektion Konstanz anlässlich ihres 50 jährigen Bestehens – <br>
ausgefallen wegen COVID19-Lockdown</td>
</tr>
<td></td>
<td>- - - - - - - - <b>Ab MÄRZ 2020 - - - - - - - -COVID 19 LOCKDOWN </b> - - - - - -</td>
<tr>
<td>2020</td>
<td>Einzelausstellung (Retrospektive) in der 'Galerie des BBK-Frankfurt' <br> Titel: Schlagzeilen – Dokumente in Farbe (23 großformatige Ölbilder /Feb. 2020)</td>
</tr>
<tr>
<td>2019</td>
<td>Kollektivausstellung in der 'Galerie des BBK-Frankfurt' – ‚Die Neuen 2018‘ <br>
Kollektivausstellung in der 'Galerie des BBK-Frankfurt' – ‚Zivilcourage‘<br>
Jahresausstellung der Mitglieder des BBK in der 'Paulskirche', Frankfurt</td>
</tr>
<tr>
<td>2018</td>
<td>Ausstellungsteilnahme anlässlich des internationalen Wettbewerbs - <br> 41. Kunstpreis der Sparkasse Karlsruhe, in Karlsruhe<br>
Aufnahme als Mitglied des BBK Frankfurt<br>
Die Gestaltung des Covers des 1. Kunstbandes (Band 126) des ‚ev. Zentrums der Verkündigung der EKHN’ mit dem nach seinerm Entwurf gestaltetem Parament, Frankfurt</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Schließen</button>
</div>
</div>
</div>
das css
/* Modal */
.modal-content {
background-color: #989898;
color: #fff;
}
.modal-header {
background-color: midnightblue;
}
.modal-title {
color: #fff;
font-size: 20px;
font-weight: 400;
}
.modal td:first-child {
white-space: nowrap;
font-weight: bold;
}
.modal h6 {
color: #fff;
margin-left: 10px;
font-weight: bold;
}
.modal p {
margin-left: 30px;
}
.modal hr {
height: 1px;
width: 90%;
text-align: center;
position: relative;
background: #e6e6e6;
}
Ich bekomme die Tabelle einfach nicht richtig responsive hin .table-responive hat auch nichts gebracht.
Hilfe wüsste ich sehr zu schätzen.
Hallo,
kennst du schon https://wiki.selfhtml.org/wiki/HTML/Tabellen/Responsive_Gestaltung
Gruß
Jürgen
Das hatte ich noch nicht gesehen. Werde ich mir heute Abend genauer anschauen.
Was mich bei meinem Projekt wundert ist, dass die erste Tabelle super angezeigt wird die zweite aber nicht.
da unter da unter Profil unten der Button Biografie. Bei Produkte habe ich noch gar keine Ahnung wie ich das resposive hinbekommen soll?
Danke für den Link. Für weitere Anregungen und Hilfe wäre ich sehr dankbar.
habe das css für sehr schmale layouts verwendet da geht im 1. Teil der Tabelle super. am im 2.Teil ist es Essig.
und unten
Ich Makiere mal im Code wo das css nicht mehr greift
Quelltext hier<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Biografie: Farid Ben Yahia</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<table class="table table-borderless">
<tbody>
<td>Seit 1980</td>
<td>Lebt und arbeitet Farid als freischaffender Künstler in Deutschland.</td>
</tr>
<tr>
<td>Seit 1996</td>
<td>Eingebürgerter deutscher Staatsangehöriger</td>
</tr>
<tr>
<td>2003</td>
<td>1. Preis in Malerei ‚Cannes-Azur 2003’ (M.C.A.)</td>
</tr>
</table>
<p></p>
<tr>
<td><b>Seine Bilder sind in verschiedenen Museen, in öffentlichen Gebäuden und bei internationalen Privatsammlern (Niederlande, Norwegen, Frankreich, Tunesien, Deutschland) zu finden.</b></td></tr>
<p></p>
<br>
<div class="modal hr"></div>
<br>
Hier greift das css nicht mehr-------------------------------------
<h6>Ausstellungsdaten in chronologischer Reihenfolge:</h6>
<table class="table table-borderless">
<tbody>
<tr>
<td>2022</td>
<td>März: Online-Kollektiv-Ausstellung zum Tag der Druckkunst. <br>
<a href=" https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/" target="_blank" title="">https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/</a></td>
</tr>
<tr>
<td>2022</td>
<td>Feb.-März: Kollektivausstellung anlässlich des internationalen Wettbewerbs - <br> 45. Kunstpreisausstellung der Sparkasse Karlsruhe (wegen COVID19 nur Online). <br>
<a href="https://sparkassenstiftungen-ka.de/kulturstiftung/45-kunstpreis-2022/" target="_blank" title="">https://sparkassenstiftungen-ka.de/kulturstiftung/45-kunstpreis-2022/</a></td>
</tr>
<tr>
<td>2021</td>
<td>Nov/Dez.: Jahresausstellung der Mitglieder des BBK in der 'Paulskirche', Frankfurt</td>
</tr>
<tr>
<td>2021</td>
<td>Einzelausstellung in der 'Remisengalerie des Schlosses Philippsruh', Hanau – <br>
ausgefallen wegen COVID19</td>
</tr>
<tr>
<td>2020</td>
<td>Beteiligung im Online-Katalog des BBK Frankfurt- anstelle der wegen COVID19 ausgefallenen Jahresausstellung der Mitglieder des BBK in der 'Paulskirche'<br>
<a href="http://katalog.bbk-frankfurt.de/portfolio/farid-ben-yahia/" target="_blank" title="">http://katalog.bbk-frankfurt.de/portfolio/farid-ben-yahia/</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Schließen</button>
</div>
</div>
</div>
Ich bin echt ratlos??
Hab das mal auf eine Subdomain geladen damit ich die orignalseite nicht zerschieße
Hallo,
Ich bin echt ratlos??
Dein HTML ist nicht valide. Prüfe es mit einem Validator, da werden dir die Fehler gezeigt.
In diesem Fall hast du beispielsweise die erste Tabelle beendet und öffnest in den leeren Raum eine neue Zeile. Achte auf richtige Verschachtelung.
Gruß
Kalk
Hallo,
Dein HTML ist nicht valide. Prüfe es mit einem Validator, da werden dir die Fehler gezeigt.
In diesem Fall hast du beispielsweise die erste Tabelle beendet und öffnest in den leeren Raum eine neue Zeile. Achte auf richtige Verschachtelung.
Gruß
Kalk
das du mir das näher an Hand eines Beispiels erklären? Dann könnte ich es vielleicht nachvollziehen.
Hallo,
das du mir das näher an Hand eines Beispiels erklären? Dann könnte ich es vielleicht nachvollziehen.
Was soll ich näher erklären? Verschachtelung: Es kommt auf die richtige Reihenfolge von außen nach innen an. Wenn du nur Socken anziehst bekommst du draußen nasse Füße, wenn du nur Schuhe anziehst kriegste Blasen, ziehst du die Socken über die Schuhe, werden die Socken dreckig…
Für weitere Erklärungen existiert das Wiki: z.B. Validator
Gruß
Kalk
Hallo Kalk,
Verschachtelung: Es kommt auf die richtige Reihenfolge...
Du hast die Schuhschachtel vergessen; nur so wird ein Schuh daraus.
Gruß, Martl
Hallo,
Was soll ich näher erklären? Verschachtelung: Es kommt auf die richtige Reihenfolge von außen nach innen an. Wenn du nur Socken anziehst bekommst du draußen nasse Füße, wenn du nur Schuhe anziehst kriegste Blasen, ziehst du die Socken über die Schuhe, werden die Socken dreckig…
Für weitere Erklärungen existiert das Wiki: z.B. Validator
Gruß
Kalk
Im Wiki steht es so
<h1>einfache Tabelle</h1>
<table>
<tr>
<th>Berlin</th>
<th>Hamburg</th>
<th>München</th>
</tr>
<tr>
<td>Miljöh</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr>
<tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
Abgesehen von der Überschrift und 3. Zelle sieht mein code genauso aus. In der 1. Tabelle geht es ja auch. Will jetzt nicht auf meinem alter oder rudimentäre englischkenntnisse herumreiten. Aber wenn du mir nicht verraten willst wo ich falsch verschachtelt habe, muss ich wohl auf weitere Hilfe warten. Dachte immer das wäre der Sinn eines Forums.
Hallo,
Aber wenn du mir nicht verraten willst wo ich falsch verschachtelt habe, muss ich wohl auf weitere Hilfe warten. Dachte immer das wäre der Sinn eines Forums.
Ich schrieb:
In diesem Fall hast du beispielsweise die erste Tabelle beendet und öffnest in den leeren Raum eine neue Zeile.
Dieser Fehler ist also zwischen erster und zweiter Tabelle zu finden. Weitere Hilfe ist z.B. der erwähnte und verlinkte Validator.
Gruß
Kalk
Hallo Emess,
Aber wenn du mir nicht verraten willst wo ich falsch verschachtelt habe, muss ich wohl auf weitere Hilfe warten. Dachte immer das wäre der Sinn eines Forums.
Der Sinn DIESES Forums ist Hilfe zur Selbsthilfe. Der Sinn einer Frage ist übrigens auch, das Problem klar zu beschreiben, das ist nicht ganz so einfach bei Dir. Das von Dir gepostete HTML ist im Bereich Profil, hinter dem Biografie-Button? Diese Suche hättest Du uns ersparen können.
Der von Tabellenkalk benannte Schachtelungsfehler existiert - du hast ein tr Element außerhalb einer Table (siehe "Seine Bilder sind in ..."). Der W3C Validator dürfte Dir das gnadenlos um die Ohren hauen - deine Schachtelung stimmt an einigen Stellen nicht.
Was ist Schachtelung? Guck mal hier, vielleicht wird es dann klarer. Stell Dir die HTML Elemente wie Schachteln (oder Kisten) vor. Eine große Schachtel enthält mehrere kleinere. Die kleinen Schachteln enthalten noch kleinere Schachteln. Alles steckt ineinander, es ist "verschachtelt". Aber eine kleine Schachtel hat nur zwei Möglichkeiten: Sie ist in einer großen Schachtel drin, oder nicht. Deswegen ist sowas falsch:
<table>
<tr>
</table>
</tr>
Die Verschachtelung passt nicht.
Und dann gibt es Schachteln, die dürfen nicht allein sein. Ein <tr> Element muss immer in einem <table> Element enthalten sein. Sonst stimmt die Schachtelung für das tr Element nicht. Das ist bei dem tr der Fall, von dem Tabellenkalk sprach.
Das ist aber alles - meine ich - kein Grund für dein Problem, weil der Browser das tr und td sieht, keine table dazu hat und sie achselzuckend wegwirft.
Das Problem ist aus meiner Sicht, dass die Links, die Du in der 2. Tabelle verwendest, die Tabellenzellen in die Breite ziehen. Der Linktext ist die URL, d.h. Text ohne Weißraum darin, darum macht der Browser von sich aus erst bei dem "-" einen Zeilenumbruch. Und weil es trotz aller Bootstrap-Tricks immer noch eine Table ist, wird die Tabellenzelle an den Inhalt angepasst. Auch ein overflow:hidden wird ignoriert - hast Du ja schon in Zeile 434 ausprobiert.
Du kannst aber in die URL an passenden Stellen auch eine "Sollbruchstelle" einfügen, mit dem <wbr> Element. Nicht im href-Attribut, aber im Linktext. Ich würde das hinter den / Zeichen tun:
https://www.meinkunstgarten.de/<wbr>ausstellungen/<wbr>tag-der-druckkunst-2022/
Eine andere Möglichkeit wäre, in dem max-width:45em @media-Block für a Elemente einen Zwangsumbruch festzulegen. Mit word-wrap:break-all bricht er gnadenlos um und die Tabelle geht nicht mehr in die Breite. Das sieht natürlich nicht so toll aus. <wbr> ist schicker, aber auch etwas mehr Arbeit.
Die beste Möglichkeit wäre, die Layout-Tabelle korrekt als Description List zu setzen (dl Element). Was Du da hast, sind nicht unbedingt tabellarische Daten. Aber das macht natürlich noch etwas mehr Arbeit.
Rolf
@@Rolf B
Das Problem ist aus meiner Sicht, dass die Links, die Du in der 2. Tabelle verwendest, die Tabellenzellen in die Breite ziehen. Der Linktext ist die URL, d.h. Text ohne Weißraum darin, darum macht der Browser von sich aus erst bei dem "-" einen Zeilenumbruch.
Du hast das Problem wohl richtig erkannt …
Du kannst aber in die URL an passenden Stellen auch eine "Sollbruchstelle" einfügen, mit dem <wbr> Element. Nicht im href-Attribut, aber im Linktext.
… aber nicht die Lösung. URLs als Linktext braucht kein Mensch.
URLs sind für Maschinen. Für Menschen sollten es aussagekräftige Linktexte sein.
Und die Texte sind ja schon da. Sie wollen nur genutzt werden. Nicht
<td>
März: Online-Kollektiv-Ausstellung zum Tag der Druckkunst. <br>
<a href=" https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/" target="_blank" title="">
https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/
</a>
</td>
und auch nicht
<a href=" https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/" target="_blank" title="">
https://www.meinkunstgarten.de/<wbr>ausstellungen/<wbr>tag-der-druckkunst-2022/
</a>
sondern
<td>
<a href=" https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/" target="_blank">
März: Online-Kollektiv-Ausstellung zum Tag der Druckkunst.
</a>
</td>
Und schon hat sich das Layout-Problem erledigt, da in Texten kaum elendig lange Wörter vorkommen. (Es sei denn, man legt’s drauf an: Teil 1, Teil 2.) Und dann gibt’s ja automatische Silbentrennung.
Das überflüssige title-Attribut hab ich gleich mal entsorgt. Das target="_blank"-Attribut sollte auch noch entsorgt werden. Links sollten nicht im neuen Tab/Fenster geöffnet werden. Ob ein Nutzer einen Link im neuen Tabs öffnen möchte, kann sie selbst entscheiden und das ggfs. tun. Wie Jakob Nielsen sagt: “Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks.”
Die beste Möglichkeit wäre, die Layout-Tabelle korrekt als Description List zu setzen (dl Element). Was Du da hast, sind nicht unbedingt tabellarische Daten.
Key-Value-Paare kann man schon als tabellarische Daten ansehen. Wobei die Kopfzellen (die Jahreszahlen) dann als <th> ausgezeichnet werden sollten, nicht als <td>.
<dl> passt natürlich auch, vielleicht sogar besser. Aber <table> ist nicht gänzlich falsch. Es ist keine Layout-Tabelle.
🖖 Живіть довго і процвітайте
Hallo Gunnar,
URLs als Linktext braucht kein Mensch.
Das ist deine Sicht der Dinge und man kann es als Empfehlung sehen.
Die letzte Entscheidung, wie der Link dargestellt wird - ob nur Text oder Text + URL - möchte ich aber dem Autor überlassen. Darum habe ich ihm gesagt, wie er das konkrete Problem mit der Breitenexpansion lösen kann.
Ob's eine Layouttabelle ist oder nicht, ja, kann man drüber streiten. Es ist ein Grenzfall. Das wollte ich mit dem "nicht unbedingt" zum Ausdruck bringen, das konnte man missverstehen.
Rolf
@@Rolf B
URLs als Linktext braucht kein Mensch.
Das ist deine Sicht der Dinge und man kann es als Empfehlung sehen.
Die letzte Entscheidung, wie der Link dargestellt wird - ob nur Text oder Text + URL - möchte ich aber dem Autor überlassen.
Warum sollte das ein Webentwickler besser wissen als jemand, der sich schon jahrelang mit UX befasst?
Und natürlich ist das eine Empfehlung. Eine dringliche. Aber man Autoren nicht zwingen, das Richtige zu tun.
Darum habe ich ihm gesagt, wie er das konkrete Problem mit der Breitenexpansion lösen kann.
Ich auch. Die Verwendung menschenlesbarer Linktexte löst auch das Problem mit der Breitenexpansion – neben etlichen anderen.
Screenreader-Nutzer navigieren u.U. von Link zu Link. Was hilft es denen, wenn sie statt eines vernünftigen Linktexts immer nur URLs vorgelesen bekommen und nicht die zugehörigen Texte?
🖖 Живіть довго і процвітайте
Hallo,
Wie Jakob Nielsen sagt: “Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks.”
besonders, wenn sich die genervte Hausfrau dann drohend aufrichtet, die Arme verschränkt und sagt: "Jetzt bin ich aber mal gespannt, wie Sie die Sauerei wieder wegmachen wollen. Hier auf dem Land haben wir nämlich keinen Strom."
Ja, heutzutage gibt es Akku-Staubsauger. Sehr viele sogar. Aber in der Hoch-Zeit der von Tür zu Tür ziehenden Handelsvertreter (das dürfte so in den 70er Jahren gewesen sein) hat davon noch niemand zu träumen gewagt.
In der Zeit wurden ja auch gerade die Staubsaugervertreter gern mit dem Spruch persifliert: "Ich würde Ihnen gern meinen Kobold vorführen."
Einen schönen Tag noch
Martin
Moin,
Ja, heutzutage gibt es Akku-Staubsauger. Sehr viele sogar. Aber in der Hoch-Zeit der von Tür zu Tür ziehenden Handelsvertreter (das dürfte so in den 70er Jahren gewesen sein) hat davon noch niemand zu träumen gewagt.
In der Zeit wurden ja auch gerade die Staubsaugervertreter gern mit dem Spruch persifliert: "Ich würde Ihnen gern meinen Kobold vorführen."
Dabei wissen wir doch, dass nichts über den Saug-Blaser Heinzelmann geht:
Es saugt und bläst der Heinzelmann, wo Mutti sonst nur saugen kann.
Die Kobolde sind dafür immerhin Gegenstand einer medizinischen Dissertation.
Darauf einen schönen Rotwein, „abgezapt und verkorkst von Pahlgruber & Söhne“!
Viele Grüße
Robert
Hallo Robert,
In der Zeit wurden ja auch gerade die Staubsaugervertreter gern mit dem Spruch persifliert: "Ich würde Ihnen gern meinen Kobold vorführen."
Dabei wissen wir doch, dass nichts über den Saug-Blaser Heinzelmann geht:
Es saugt und bläst der Heinzelmann, wo Mutti sonst nur saugen kann.
genau, unvergessen bzw. unvergesslich!
Die Kobolde sind dafür immerhin Gegenstand einer medizinischen Dissertation.
Ups. 😱
Darauf einen schönen Rotwein, „abgezapt und verkorkst von Pahlgruber & Söhne“!
Ebenso unvergessen auch der Trulleberg vom Möbelverkäufer Winkelmann.
Ich meine, das ist eine Szene in Ödipussi.
Einen schönen Tag noch
Martin
Hallo,
Es kommt auf die richtige Reihenfolge von außen nach innen an. Wenn du nur Socken anziehst bekommst du draußen nasse Füße, wenn du nur Schuhe anziehst kriegste Blasen, ziehst du die Socken über die Schuhe, werden die Socken dreckig…
ganz zu schweigen von der richtigen Reihenfolge beim Wieder-Ausziehen: Wenn du erst die Socken, dann die Schuhe anziehst, ist zunächst alles in Ordnung. Wenn du aber dann versuchst, erst die Socken wieder auszuziehen, geht das vermutlich schief.
Einen schönen Tag noch
Martin
@@Emess
Du hast da schon vieles richtig gemacht. Ein <button> zum Öffnen des Menüs, und auch völlig richtig innerhalb von <nav>. Und aria-expanded schaltet richtig um. Und der Button hat auch eine zugängliche Beschriftung – diese sollte aber nicht englisch "Toggle navigation" sein, sondern ins Deutsche übersetzt werden.
Dem Schließen-Button fehlt aber die zugängliche Beschriftung; × ist keine.
Als Tastatur-Nutzer sollte man auch erwarten dürfen, dass sich das Menü per Escape-Taste schließen lässt. Das solltest du noch einbauen.
Und auch, dass sich das Menü entweder automatisch schließt, wenn man per Tab-Taste rausnavigiert, oder dass man per Tab-Taste gar nicht aus dem Menü rauskommt, sondern nur über den Schließen-Button oder Escape-Taste.
Die Seite wäre per Tastur navigierbar – wenn man denn sehen würde, wo man sich gerade befindet. Das verhinderst du aber mit
a:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
outline-offset: none;
}
Weg damit! Aktuelle Browser machen bei Mausbedienung keine Rahmen mehr um fokussierte Elemente; den Rahmen muss man nicht per CSS wegmachen. Für Tastatur-Nutzer ist er hingegen zwingend erforderlich. Er darf nicht entfernt werden, sondern sollte im Gegenteil mit der Pseudoklasse :focus-visible besonders gut vom Hintergrund abgesetzt werden.
Ach ja, Hintergrund. Dunkelgraue Schrift auf Schwarz ist ebensowenig eine gute Idee wie Weiß auf Grau. Der Color contrast checker hilft dir dabei, den Farbkontrast genügend groß zu machen. 4.5 : 1 sollte er für Fließtext mindestens sein.
🖖 Живіть довго і процвітайте
@@Emess
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300" rel="stylesheet" type="text/css">
Zur Problematik des Einbindens von Google-Fonts hatten wir letztens einen Thread. 🧵 Besser: Google-Fonts selbst hosten.
Zur Problematik von Open Sans siehe Pimp My Type.
🖖 Живіть довго і процвітайте
Also erst mal Danke für die vielen Hinweise. Emess ist nur mein Nickname tatsächlich bin ich Michael und 60 Jahre alt. HTML und CSS habe ich mir mehr oder weniger selbst erschlossen. Ich würde nicht so weit gehen zu sagen ich könnte HTML programmieren. Aber ein fertiges Template kann ich schon ganz gut bearbeiten bzw. verändern. Muss den gesamten Thread noch mal durchlesen. doch vielleicht kann mir jemand sagen was an der folgenden Tabelle falsch ist.
<table class="table table-borderless">
<tbody>
<tr>
<td>datum</td>
<td>text1</td>
</tr>
<tr>
<td>datum</td>
<td>text2</td>
</tr>
</tbody>
</table>
<p></p>
<b>text fett.</b>
<p></p>
<br>
<br>
<h6>Überschrift</h6>
<table class="table table-borderless">
<tbody>
<tr>
<td>datum</td>
<td>text <br>
<a href=" link" target="_blank" title="">text zum link</a></td>
</tr>
<tr>
<td>2022</td>
<td>txt <br>
noch mehr text <br>
<a href="link" target="_blank" title="">text zum link</a></td>
</tr>
</tbody>
</table>
Hallo Emess,
lol - da hab ich Dich wohl mit Farid durcheinandergeworfen und deinen Hinweis auf Englischkenntnisse irgendwie falsch als „nicht perfekte Sprachkenntniss Deutsch“ gespeichert. Blöd von mir.
Das HTML der Tabellen sieht prinzipiell nicht falsch aus. Wenn Du diese Tabelle jetzt zeigst, um auf das Breitenproblem in FBYs Biographie Bezug zu nehmen, dann guck erstmal was ich um 17:23 geschrieben habe. Die Table ist nicht das Problem, sondern der Inhalt - das wird da beschrieben.
Rolf
Habe den Linktext gekürzt und dann klappt es. Wieso? Hat was mit der länge des Linktextes zu tun. Aber was?
Danke Rolf für den Hinweis Michael
Hallo Emess,
wie ich schrieb - das Table-Element ist hartnäckig, was Breite angeht. Ist der Inhalt einer Zelle breiter als die Zelle Platz hat, wird die Table geweitet. Egal was Du im CSS anstellst.
Man kann tricksen, mit div Kapseln und viel Trara, aber besser ist es, einen Umbruch zu ermöglichen.
Rolf
@@Emess
Ich würde nicht so weit gehen zu sagen ich könnte HTML programmieren. Aber ein fertiges Template kann ich schon ganz gut bearbeiten bzw. verändern.
Ah, dann waren die vielen guten Sachen gar nicht von dir, sondern du hattest das Glück, eine gute Vorlage zu verwenden? Glückwunsch, das gelingt nicht vielen. Es gibt zu viel Schlechtes im Web zu finden.
doch vielleicht kann mir jemand sagen was an der folgenden Tabelle falsch ist.
Der Validator wurde doch schon genannt? Wenn du diesen nimmst, ist bei Check by: text input schon das HTML-Grundgerüst im Eingabefeld. Da musst du nur deinen Tabellencode zwischen <body> und </body> (also anstatt <p></p>) einsetzen.
Der Validator hat nichts zu meckern. (Hm, ich hätte gedacht, er würde das Leerzeichen in href=" link" beanstanden.) Das heißt, das HTML hat keine Syntaxfehler.
Aber andere:
<tr> <td>datum</td> <td>text1</td> </tr>
Wie gesagt, die Kopfzellen sollten th sein:
<tr>
<th>datum</th>
<td>text1</td>
</tr>
<p></p> <b>text fett.</b> <p></p>
Zwei leere p-Elemente und ein b, das frei im Raum hängt? Du meintest sicher
<p>
<b>text fett.</b>
</p>
Wobei: b? Wenn etwas hervorgehoben werden soll (nicht nur visuell, sondern inhaltlich), dann wäre strong angebracht.
<br> <br>
„Henry! Da war so ein Geräusch.“
Weg damit; Abstände per CSS.
<h6>Überschrift</h6>
h6 stimmt sicher nicht. Du darfst die Überschiften h1…h6 nicht nach der gewünschten Schriftgröße auswählen. Die müssen streng hierarchisch vergeben werden: Die Seitenüberschrift (nur einmal pro Seite!) ist h1; Überschriften von Anschnitten h2; Überschriften von deren Unterabschnitten h3 usw.
Wobei es „usw.“ kaum geben sollte. Wenn man zu viele Hierarchie-Ebenen auf einer Seite hat, macht man vermutlich bei der Struktur des Inhalts was falsch.
<tbody>
In der anderen Tabelle hattest du keine <tbody>-/</tbody>-Tags. Die Tags sind auch optional; das tbody-Element ist trotzdem im DOM vorhanden. Um da keine Verwirrungen aufkommen zu lassen, ist es wohl besser, das einheitlich zu handhaben. Ich empfehle, die Tags im Code zu haben.
🖖 Живіть довго і процвітайте
Danke das merk ich mir mal. gibt es einen Validator der die Fehler in deutsch ausgibt. Das würde sehr helfen.
Ich schau mir jetzt erst mal die Anstalt auf ZDF an.
Hallo,
In der anderen Tabelle hattest du keine
<body>-/</body>-Tags. Die Tags sind auch optional;
Ich will jetzt nicht behaupten, dass du Unrecht hättest, aber vermutlich meinst du die <tbody>-tags...
Gruß
Kalk
@@Tabellenkalk
In der anderen Tabelle hattest du keine
<body>-/</body>-Tags. Die Tags sind auch optional;Ich will jetzt nicht behaupten, dass du Unrecht hättest, aber vermutlich meinst du die <tbody>-tags...
Ja, wir haben beide recht. 😜
Um Emess nicht zu verwirren, korrigiere ich das mal.
🖖 Живіть довго і процвітайте