Beiträge von MrMurphy

    Es hat sich bewährt zunächst eine Lösung zu erstellen, die für schmale Bildschirme gedacht ist und danach die für breitere. Zudem werden dabei in der Regel viele vorhandene CSS-Vorgaben ausgenutzt. Nennt sich mobile-first.


    Ich habe den HTML-Quelltext noch mal überarbeitet, der sieht jetzt so aus:


    Das responsive CSS dazu dann



    Du musst natürlich dafür sorgen, dass keine anderen CSS-Angaben das Ergebnis falsch beeinflussen. Die leeren CSS-Angaben sind Platzhalter um zu zeigen, wie die Elemente beeinflusst werden können. Die Werte musst du noch deinen Vorstellungen anpassen.

    Nach den aktuellen HTML- und CSS-Regeln sehe ich zum Beispiel so eine Lösung:


    CSS:



    HTML:



    Die leeren CSS-Einträge zeigen, wie innerhalb der Klasse .card weitere HTML-Elemente angesprochen werden können, um unnötige Klassenangaben innerhalb des HTML-Quellcodes zu vermeiden. Dadurch wird der HTML-Quellcode zudem übersichtlicher.


    Falls andere CSS-Angaben mit reinspielen müssen die CSS-Angaben natürlich noch angepasst werden.


    Die Rechtschreibung und Grammatik habe ich mal so stehen gelassen, da die für die Frage keine Rolle spielen.

    Warum so kompliziert. In den eingelesenen Dateien steht doch 'eh html-Quelltext. Du kannst


    Code
    1. <div class="article">
    2. ...
    3. </div>

    doch direkt in die thema1.html schreiben,als erste und letzte Zeile. Wobei das div-Element wohl gerne ein article-Element wäre.


    Oder das öffnende div (article) als letzte Zeile in die navigtion.html und das schließende div (article) als erste Zeile in die sidebox.

    nori999 : Du hast offensichtlich deinen Eröffnungsbeitrag und Teile deiner anderen Beiträge gelöscht. Oder hatte ein Moderator lange Weile?


    Sowas wird in keinem Forum gerne gesehen, da die Antworten zu deinen Fragen teilweise sinnfrei in der Luft hängen, zum Beispiel Sempervivum mit "Im CSS aus Posting #33 steht:".


    Nachträglich solltest du deshalb nur Rechtschreibfehler korrigieren, aber keine Informationen löschen.

    In Wikipedia sind die Formeln als Bild eingefügt.


    Das liegt wohl auch daran, das laut Wikipedia


    Zitat

    Unter Mathematikern und anderen interessierten Benutzern gilt MathML für die manuelle Editierung als unhandlich, sodass nur Programme zur Generierung zum Einsatz kommen. Durch die Syntax lässt es sich nur schwer bzw. gar nicht durch CSS formatieren.

    Für Webseiten ist MathML damit eher nicht geeignet.


    Falls du dich damit beschäftigen willst findest du zum Einstieg ein paar Beispiele unter


    http://elsenaju.info/mathml/MathML-Beispiele.htm


    Mit der Browserunterstützung sieht es ganz mies aus:


    https://www.caniuse.com/?search=mathml


    MathML wird offensichtlich nur vom Firefox und vom Safari unterstützt. Von daher kann ich MathML nicht empfehlen.

    Dein Ansatz ist schon mal falsch. Die Bildschirmgröße hat nichts mit der Größe des Browserfensters zu tun. Außerdem ist das Browserfenster nicht unbedingt mittig auf dem Bildschirm plaziert.


    Wie Sempervivum bereits schrieb ist das Zentrieren mit CSS (Flexbox oder CSS-Grid) zudem deutlich einfacher und erfordert keine Berechnungen.

    Besserwisserei: XHTML4 hat es nie gegeben und wird es nicht geben.


    Die Abwärtskompatibilität ergibt sich aus der Geschichte. Tim Berners-Lee hat HTML in der Schweiz am CERN ersonnen. Die Weiterentwicklung hat dann das W3C übernommen,welches dazu gegründet wurde. Dort konnte Jeder mitmachen. Das ging bis zu XHTML1.


    Die sind dann vor etwa 10 Jahren abgedreht und wollten XHTML2 so entwickeln, dass eine Webseite bei Fehlern nicht mehr angezeigt werden würde. Damit würden über 99% aller Webseiten nicht mehr angezeigt werden. Zum Beispiel auch deine, da sie nicht den Regeln entspricht und damit Fehler enthält.


    Das haben die Browserhersteller nicht mitgemacht, die WHATWG gegründet und HTML5 entwickelt. Als einziger bedeutender Browserhersteller ist MicroSoft nicht beigetreten, erstellt seine Browser aber trotzdem nach den Regeln der WHATWG. Das W3C hat trotzdem noch ein paar Jahre XHTML2 weiterenwickelt und war damit aus dem Spiel. Irgendwann ist das W3C dann auch auf HTML5 umgeschwenkt, hat aber nichts mehr zu melden. Was sollen die auch bestimmen, wenn die Browserhersteller sie ignorieren?


    Wenn behauptet wird, dass HTML vom W3C weiterentwickelt wird, oder zusammen vom W3C und der WHATWG, ist das falsch. Was in den Browsern umgesetzt wird entscheidet alleine die WHATWG. Was nicht heißt, dass es keinen Informationsaustausch zwischen den beiden Verbänden gibt. So arbeiten auch HTML-Entwickler in beiden Verbänden mit.


    Ein Grundsatz der WHATWG ist, dass die Browser unbegrenzt abwärtskompatibel sein sollen. Und dass die Browser versuchen sollen, auch fehlerhafte Seiten, soweit irgend möglich, darzustellen. Mit allen Nachteilen, so dass auch heutzutage unsinnige und unnötige Eigenschaften immer noch unterstützt werden. Deshalb wird selbst in aktuellen Browsern noch immer die allererste Website der Welt korrekt dargestellt. Für HTML4 gibt es also kein "Ablaufdatum".

    Die Mitarbeiter von W3 haben das nicht verstanden. Das war wie geschrieben von mir nur ein Hinweis, falls du das korrekt lernen willst.


    Mein Beitrag ist weder polemisch noch süffisant gemeint, sondern sachlich. Es tut mir leid und ist schade, falls das bei dir falsch angekommen ist.


    Einfach erklären lässt es sich nicht, die Grundlagen von HTML und CSS, speziell auch des aktuellen, füllen ganze Bücher.


    Um eine Alternative aufzuzeigen muss man die Webseite mit dem aktuellen Inhalt kennen. Beim HTML haben seit HTML5 alle Elemente eine sogenannte semantische Bedeutung. Das dient der Benutzerfreundlichkeit und der Barrierefreiheit. Ohne Inhalt lassen sich deshalb keine korrekten Webseiten erstellen.


    Ich kann dir gerne Fehler und falsches Anwenden von HTML und CSS in deinem Beispiel zeigen. Das mache ich aber nur nach Wunsch, nicht um der Besserwisserei wegen. Das wird auch ein längerer Beitrag werden und auch nur für deinen Füllinhalt.

    Zitat

    Die Frage, warum nicht alles mit class gemacht wird ist berechtigt – die Antwort ist, dass es nicht von gutem Stil zeugt und es geschickter ist, wenn man auf einen Blick sieht, was einmalige Bereiche sind. Weiterhin haben id-Bereiche mehr Gewicht.

    Ja, das ist die seit Jahrzehnten verbreitete Meinung - und falsch. Da man dagegen nicht ankommt weise ich nur darauf hin. Damit haben selbst alte Hasen Schwierigkeiten.


    Da beides funktioniert musst du selbst entscheiden ob du CSS den Regeln nach anwenden willst oder nicht.


    Zitat

    Wenn ich die Höhenangabe bei #header weglasse wird nichts angezeigt.

    Dein #header hat keinen Inhalt, den kannst du also auch komplett weglassen. Auch wenn du es wahrscheinlich nicht verstehst: Eine Grundregel von Webseiten ist, das Hintergrundbilder kein Inhalt sind.


    Zitat
    Die Kopfnavigation muss exakt 53P groß sein.

    Nein.

    Dir fliegen deine height-Angaben um die Ohren.


    In einem Responsive Design, welches du offensichtlich erreichen willst, haben height-Angaben nichts verloren.


    Die Höhe einer Webseite und ihrerer Inhalte hängt von ihrem Inhalt ab. Die erforderliche Höhe bestimmen die Browser dann selbst. heigt-Angaben sollten also nur ausnahmesweise und nur dann verwendet werden, wenn der Inhalt es erfordert.


    Hintergrundbilder sind kein Inhalt, damit haben height-Angaben im CSS für sie nichts verloren. Deine height-Angaben sind alle überflüssig.


    Zudem solltest du dich mit Klassen (class, .) und ID-Elementen (id, #) beschäftigen, deren Sinn hast du noch nicht verstanden. ID-Elemente dürfen auf jeder Webseite im body-Bereich nur einmal vorkommen. Mit einer Wichtigkeit oder Ähnlichem haben class und id nichts zu tun. Für das CSS solltest du nur class verwenden.


    Um den Footer auf die Schnelle nach unten zu bekommen kannst du das "height: 100%;" im #hauptcontainer" löschen.


    Bei Prozent-Angaben im CSS solltest du wissen, worauf sie sich beziehen. Durch das "height: 100%" wird der #hauptcontainer so hoch wie das jeweilige Browserfenster, der Inhalt des HTML erfordert aber mehr Höhe.

    Das geht einfach mit Flexbox (display: flex). Ich gehe davon aus, dass sich der Header und die graue Content-Box direkt im body-Bereich befinden. Zum Beispiel:

    Code
    1. body {
    2. display: flex;
    3. flex-direction: column;
    4. }
    5. .graue-content-box {
    6. margin-top: -200px;
    7. }


    Die -200px musst du natürlich deinen Wünschen anpassen.

    Mit Gimp können die Exif-Informationen wohl nicht direkt bearbeitet werden. Allerdings merkt Gimp offensichtlich, dass die Exif-Infos nicht dem Standard entsprechen und fragt beim Öffnen der Bilder entsprechend nach. Allerdings hat Gimp die Eigenart, Bilder in seinem eigenen Format speichern zu wollen. Zur Korrektur kannst du deshalb folgendermaßen vorgehen:


    Zunächst kopierst du die betreffenden Bilder in ein Verzeichnis.


    Dann öffnest du Gimp, markierst alle Bilder und ziehst somit alle Bilder mit der Maus in Gimp.


    Gimp fragt jetzt für jedes einzelne Bild nach ob es rotiert werden soll. Das bestätigst du jeweils mit einem Klick auf den Button "Rotieren".


    Jetzt werden die Bilder korrekt (also um 90 Grad gedreht) angezeigt. Für jedes Bild gibt es einen Reiter.


    Nun rufst du jedes Bild auf, gehst in der Menüleiste auf "Bild - Transformation - Um 90° drehen". Ich musste die Bilder gegen den Uhrzeigersinn drehen, das solltest du dann aber sehen, zumal der Ergebnis direkt angezeigt wird.


    Jetzt drückst du die Tastenkombination "Shift+Strg+e", um das Bild zu exportieren, da Gimp das Bild ansonsten in seinem Format speichern will.


    Es erscheint ein Fenster, in dem der Dateiname mit der Endung "jpg" vorgegeben sein sollte. Das kannst du dann einfach mit der Enter-Taste bestätigen.


    Danach erscheint ein zweites Fenster mit einer Überschreibwarnung. Auch hier kannst du einfach Enter drücken.


    Jetzt erscheint ein drittes Fenster mit dem markierten Button "Exportieren" Auch hier einfach Enter drücken.


    Oder zusammengefasst: Shift-Strg+e, danach dreimal Enter drücken.


    Dann kannst du das nächste Bild aufrufen und genau so drehen.


    Zum Schluß kannst du die Bilder schließen. Dazu klicke ich auf das Schließen-X von Gimp. Mit jedem Klick wird das aktive Bild geschlossen und zuletzt Gimp selbst.

    Für statische Seiten, wenn also keine Datenbank, Anmeldung oder ähnliches erforderlich ist, kannst du PHP verwenden. Dafür reichen zwei, drei einfache Befehle. Mit PHP-Codeblöcken, die im Internet zu finden sind, kannst du zudem kleine Gimmicks in deine Webseite einbauen.


    Die meisten Provider bieten PHP heute meist automatisch mit an, zu Hause gibt es dafür Freeware.

    Zitat

    oder entspricht es nicht der Etikette

    Das entspricht nicht den HTML-Regeln.


    Um Webseiten zu gestalten ist es wichtig die Regeln einzuhalten. Durch korrekte HTML-Seiten wissen zum Beispiel die Browser wie sie die Seiten darstellen sollen. Und die Webseiten können vom CSS gezielt beeinflußt werden.


    Für Anfänger gibt es dabei ein "Problem": Webbrowser sind sehr fehlertolerant und versuchen auch jeden noch so falschen HTML-Code sinnvoll anzuzeigen. Anfänger ziehen daraus gerne den falschen Schluß, sie hätten eine korrekte Webseite erstellt.


    Zudem benutzen Anfänger zum Testen häufig nur einen, ihren Lieblingsbrowser. In anderen Browsern kann die fehlerhafte Webseite hingegen komplett anders angezeigt werden, nicht wie gewünscht, da die ihre eigenen Fehlerroutinen haben.


    Wenn Webseiten in einem Browser (vermeintlich) richtig und in einem anderen falsch angezeigt werden, liegt das bereits seit über 10 Jahren in der Regel am fehlerhaften Quellcode und nicht an einzelnen Browsern. Die großen Unterschiede, die es wirklich mal gab, sind Geschichte,


    Wenn mehr Inhalt hinzukommt funktioniert die Webseite dann plötzlich nicht mehr. Dann können wir häufig nur den Rat geben: Erst mal abreißen und nach den aktuellen HTML-Regeln neu machen.


    Das ist dann keine Faulheit, Besserwisserei oder Überheblichkeit von uns, sondern schlicht erforderlich, um die Webseite überhaupt gezielt gestalten zu können.

    Um dir wirklich helfen zu können haben wir im Endeffekt zu wenig Informationen von dir.


    So wissen wir nicht welche Informationen die Seite wirklich füllen sollen. Deine Blindtexte sind absolut nichtssagend.


    Auch wenn es dir weh tun wird: In über 15 Jahre meiner Forumhilfe habe ich wahrscheinlich über 1.000 Fragen zum Tabellenlayout beantwortet. Dabei ist mir noch nicht einmal eine Tabelle mit Tabellendaten untergekommen. Ein Grundproblem dabei: Tabellenelemente sind im HTML nur für Tabellendaten gedacht. Deshalb sagt meine Erfahrung: Auch du verwendest HTML-Tabellen falsch und machst dir damit selbst unnötige Probleme. So wie du es dir vorstellst wird die Seite deshalb nicht funktionieren. Da Tabellen in der Praxis so gut wie nie angebracht sind werden sie in vielen aktuellen Lehrbüchern auch nicht mehr behandelt.


    Zu deinem Problem: Die mittlere Spalte hat so weit ich sehe eine Breite von 40px. Die soll sie auch unabhängig von der Fensterbreite beibehalten.


    Deshalb musst du die Breite der linken und rechten Spalte berechnen lassen. Um unterschiedliche Einheiten berechnen zu können gibt es in CSS "calc".


    Die linke Spalte hat eine Breite von 50% minus 20px. In CSS wird das folgendermaßen berechnet:


    Code
    1. flex-basis: calc(50% - 20px);


    oder

    Code
    1. width: calc(50% - 20px);


    Da die Tabelle breiter werden kann sollte die rechte Spalte in ihrer Breite nicht fest bestimmt werden

    Code
    1. min-width: calc(50% - 20px);

    Oder wie die linke Spalte mit flex-basis und der Möglichkeit über flex-grow die Spaltenbreite über den Browser bestimmen zu lassen.

    Offcanvas heißt, dass die Navigation nur zum Navigieren eingeblendet wird, wahrscheinlich per JavaScript, und danach direkt wieder verschwindet.


    Für deine Darstellungswünsche benötigst du HTML und CSS. Da ich weder dein Hintergrundbild noch deine Lösung für die Navigation kenne habe ich eine einfache Seite ohne Inhalt erstellt, in die du deine Navigation einfach einbinden kannst. Gleiches gilt für dein Hintergrundbild, welches ich durch eine Hintergrundfarbe ersetzt habe.


    Ja, man kann mit HTML und CSS so eine Ansicht erstellen. Dazu muss man aber tricksen und das hat mit HTML nichts zu tun, da die dann unnötigen Elemente im HTML-Quelltext nicht den HTML-Regeln entsprechen.


    Wenn in der Praxis so eine Darstellung gewünscht ist wird mittels einer SVG-Grafik (das G in SVG heißt schon Grafik, aber mit dem zusätzlichen Wort wird die Aussage klarer) erstellt und als Hintergrundgrafik eingefügt.