Allgemeine Probleme

[Franz]

Hallo!

ich habe mal ein Grundlayout erstellt, wie du es dir wohl vorstellst.

Soweit ich es beurteilen kann ist die Grundstruktur fast gleich. Eine Breitenangabe war beabsichtigt da der Inhalt auf große Bildschirme ziemlich verloren aussieht.

Dein HTML-Quelltext war in Ordung, ich habe nur HTML5-Container verwendet, da die auch die Lesbarkeit des Quelltextes erhöhen.

Freut mich zu hören. Du meinst wahrscheinlich "div-container-->main"? Macht das einen Unterschied? Bei Beispielen sieht man sehr oft <div id="contain">.

Und nochmal zur Erinnerung: Lass Höhenangaben (height) weg. Das geht schief. In der Breite sollen Webseiten nicht breiter als das Browserfenster werden, in der Höhe sollen sie sich automatisch dem Inhalt anpassen.

Das eigentlich macht es. Das Problem ist nur, daß der Inhalt bei einem kleineren Bildschirm aus dem Container hinaus läuft. Beim Mac Book Pro sieht man das besonders, beim iPhone gibt es wieder keine Probleme.

@media all { /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; }

Mit Deiner Erlaubnis habe ich mir diese Zeilen kopiert. Sollte das in allen Homepages bzw. Teilseiten stehen?

  * {
     box-sizing: border-box;
  }

Soweit ich jetzt verstanden habe, Sind die Rahmen, etc. in der Breitenangabe inkludiert?

  html {
     font-size: 120%;
  }

Wird das normal nicht im body geschrieben?

  main {
     overflow: hidden;
  }

Dieses Overflow habe ich nun auch bei meinem Container gemacht. Scrolling ist anscheinend standardmäßig da sich mit overflow: scroll kein Unterschied zeigt.

  main>* {
     border: 3px solid orange;
     float: left;
  }

Sollte Ordnungshalber doch main anstatt div verwendet werden? Gibt es da Unterschiede?

  nav {
     width: 320px;
     padding: 0.5rem;
  }

Da ist ein Unterschied. Bräuchte ich dann "#navrahmen" gar nicht?

  article {
     width: calc(100% - 320px);
     padding: 0.5rem;
  }

Bleibt sich das nicht gleich ob ich div oder article verwende da es sich ja um keinen abgeschlossenen Artikel sondern einen Gesamtinhalt? Artikel verwendet man ja nur wenn ein Inhalt unterteilt ist?

/* Vorlage zum Kopieren für Media-Query */ @media only screen and (max-width: 0px) { }

Eine Erklärung dazu finde ich nirgends. Auch nicht bei "http://wiki.selfhtml.org/wiki/CSS/Media_Queries". Diese Erklärungen sind für mich noch etwas unverständlich.

Gruß Franz