Beiträge von MrMurphy

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 Entwicklung von HTML und CSS wird veröffentlicht. Also sollte direkt an der Quelle nachgelesen werden.

HTML von der WHATWG:

https://whatwg.org/

CSS vom W3C:

https://www.w3.org/Style/CSS/

Zu empfehlen sind auch die Bücher von Peter Müller seit 2013:

https://www.amazon.de/kindle-dbs/ent…tSelectorHeader

Für Anfänger speziell: Flexible Boxes

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:

body {
   display: flex;
   flex-direction: column;
}
.graue-content-box {
   margin-top: -200px;
}

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:

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

oder

width: calc(50% - 20px);

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

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.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      body {
         background-color: teal;
         margin: 0;
      }
      main {
         background-color: white;
         width: 60%;
         min-height: 100vh;
         margin: 0 auto;
      }
   </style>
</head>
<body>
   <main>
   </main>
</body>
</html>

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.

Beim CSS des li noch "text-align: right;" hinzufügen und Abstände (padding, margin) bei Bedarf anpassen.

Das der Quelltext Fehler und problematische Angaben enthält lasse ich außen vor, da du danach nicht fragtest.

Mit CSS durchlesen ist dein Problem nicht nachvollziehbar und schon gar keine direkte Lösung machbar.

Grundsätzlich fällt auf: Viele float- und position-Angaben, dafür weder media-, Flexbox- noch CSS-Grid-Angaben.

Das CSS beziehungsweise das Wissen des Seitenerstellers stammt aus der Zeit vor dem Aufkommen von Tablets und Smartphones. Das CSS ist veraltet und damit nicht für Anpassungen an unterschiedliche Bildschirmgrößen gedacht.

Falls du ein responsive Layout verwenden willst wird wahrscheinlich nur Abreißen und komplett neu machen sinnvoll sein.

Das p-Element ist ein (zumindest früher so genanntes) Blockelement. Blockelemente stehen von Haus aus immer untereinander.

Wenn bei dir zwei Blockelemente nebeneinander stehen geschieht dies durch CSS-Angaben. Das können in deinem Fall nur solche sein, die du uns vorenthältst.

Eventuell hat auch dein Browser ein Problem, das ist aber eher unwahrscheinlich.

Wenn du innerhalb eines Absatzes (= p-Element) Wörter / Sätze anders formatieren willst ist dafür das span-Element gedacht.

Also zu dem HTML

<p id="text_12">Warum ich Fotografiere <span>April 2020</span></p>

folgendes CSS

#text_12 { 
   color: #ff6633;
   font-family: Verdana;
   font-size: 12pt;
}
#text_12 span { 
   color: #ce9800;
   font-family: Verdana;
   font-size: 10pt;
}

Wobei für das span-Element die family-Angabe auch entfallen kann, also

#text_12 { 
   color: #ff6633;
   font-family: Verdana;
   font-size: 12pt;
}
#text_12 span { 
   color: #ce9800;
   font-size: 10pt;
}

Die li-Elemente von ol- und ul-Listen sind für gleichartige / gleichwertige Einträge gedacht. Nicht für Informationen und Beschreibungen dazu.

Dafür gibt es (übrigens bereits auf der allerersten Webseite der Welt) das dl-Element. Da der Einsatz des dl-Elements zu Zeiten von HTML4 häufig (auch damals schon) falsch gelehrt wurde, ist die vielfältige Verwendung in den HTML5-Regeln ausdrücklich klargestellt worden.

Für so eine Auflistung ist das dl-Element mit seinen Kindelementen dt und dd gedacht, eine ul-Liste ist nach den HTML-Regeln falsch.

Zu dem HTML

<dl class="red-triangle">
   <dt>Automatic Built-In Die-Cutting</dt>
   <dd>You never need to order custom die-cut media again. Just print and cut labels on your own, with one printer!</dd>
   <dt>Best Print Quality</dt>
   <dd>Produce professional-quality labels up to 4800 dpi.</dd>
   <dt>Software included</dt>
   <dd>eady for importing images and cutting a variety of label shapes.</dd>
   <dt>Wide Variety of Substrates</dt>
   <dd>Gloss or matte paper, polyester or even magnetic media is available. You can also easily change from dye to pigment ink.</dd>
</dl>

zum Beispiel das CSS

.red-triangle {
   margin: 0.5rem 1rem 0.5rem 1rem;
}
.red-triangle dt {
   font-weight: bold;
   margin: 0rem 0rem 0rem 0rem;
}
.red-triangle dt::before {
   content: "\25B6";
   color: #d4007b;
   margin-top: 0.5rem;
   margin-right: 0.5rem;
}
.red-triangle dt:nth-of-type(1n+2) {
   margin: 1rem 0rem 0rem 0rem;
}
.red-triangle dd {
   margin: 0rem 0rem 0rem 1.4rem;
}

Abstände, Größen und so weiter müssen natürlich noch deinen Vorstellungen und deiner Seite angepasst werden.

Siehe auch

https://www.html.de/

Bist du sicher dass die Datei die Endung .html oder .htm hat? Editoren fügen manchmal "eigene" (vorgegebene) Endungen an.

Direkter Text im body funktioniert zwar, ist aber sachlich falsch und schlechter Stil. Text sollte immer in den dafür vorgesehenen Elementen stehen, zum Beispiel dem p-Element, also

˂body˃
<p>Das ist der Text meiner ersten Internetseite</p>
˂/body˃

Nachtrag:

Jetzt wird es doch komplizierter:

Eigentlich sollte dein Quelltext auch ohne das p-Element korrekt angezeigt werden.

Ich habe den kopiert und er wird in meinem Browser ähnlich wie bei dir angezeigt.

Das deutet auf eine falsche Zeichencodierung deines Editors hin. Ältere Editoren können kein UTF-8.

Welchen Editor in welcher Version benutzt du?

Auf so einen Fehler weist auch Firefox hin wenn die Seite untersucht wird:

Die Zeichenkodierung des HTML-Dokuments wurde nicht deklariert. Das Dokument wird in manchen Browser-Konfigurationen mit verstümmeltem Text dargestellt, wenn das Dokument Zeichen außerhalb des US-ASCII-Bereichs enthält. Die Zeichenkodierung der Seite muss im Dokument oder Transferprotokoll deklariert werden.

Füg mal ein paar Umlaute (äöü ...) in deinen Text ein. Die sollten im Browser sehr seltsam angezeigt werden.

Füge im CSS folgendes ein:

a {
   text-decoration: none;
   outline: none;
}

Damit sollten alle Browser abgedeckt sein.