Anpassung an verschiedenen Bildschirmen

MrMurphy · 13 Mai 2017

Hallo

1. Wie passt man die Seite an verschiedenen Auflösungen an?

Wie schon geschrieben mit Media Queries.

wie rechne ich jetzt alles um?

und

hab ich einiges an Zeit gebraucht, da ich ständig ausprobieren musste

Du musst überhaupt nichts umrechnen. Dein bisheriges Vorgehen hat bislang wenig mit HTML und CSS zu tun. Du musst die Seite also komplett neu erstellen und dabei gleichzeitig weniger Vorgaben machen. Das Rechnen soll dann zu einem großen Teil der Browser übernehmen.

Da du die Grundlagen von HTML und CSS nie gelernt hast sind dein Lösungen viel zu kompliziert. So nach dem Motto für ein Bildschirmfoto ein Foto mit der Kamera machen, das Foto auszudrucken und mit einem Scanner digital zu speichern.

Durch dein fehlendes Wissen ist es auch schwierig dir das richtige Vorgehen zu erklären.

Falsche Anwendung des Befehls "float:right;

Ja. Du verwendest den float-Befehl zunächst in einem unzulässigen Zusammenhang und dann auch noch sachlich falsch.

Der float-Befehl ist nur dafür gedacht Text andere Container (meist Bilder) umfließen zu lassen. Bevor es die Flexbox-Anweisungd gab wurde der float-Befehl auch für das Layout mißbraucht. Die Zeiten sind aber lange vorbei.

wird mit einer kleinen Lücke

Ein Beispiel für dein fehlendes Grundlagenwissen. Bei iFrames handelt es sich um Inline-Block-Elemente. Inline-Block-Elemente haben immer einen Zwangsabstand nach rechts und nach unten. Durch die daneben stehenden iFrames wird der Abstand nach rechts sichtbar.

Das dritte Video wird zwar neben das zweite gestellt, aber es fehlt die Lücken zwischen den beiden Videos.

Das liegt an der float-Anweisung. Dadurch sind die beiden iFrames nicht mehr Inline-Block-Elemente sondern float-Elemente. Float-Elemente verhalten sich größtenteils wie Block-Elmente und haben zum Beispiel keinen Außenabstand und deshalb auch keine sichtbaren Lücken. Der muss mittels CSS mit der margin-Anweisung hinzugefügt werden.

Als weitere Auswirkung werden Float-Elemente aus dem Textfluss genommen, die sie umgebenden Elemente können deshalb nicht mehr auf sie reagieren.

Wie erzeuge ich die Lücken? Und wie könnte ich diese Lücke sogar vergrößern?

Beides, indem du statt Float Flexbox verwendest und dann die Abstände gegebenenfalls mit der margin-Anweisung nachjustierst.

Das ist mir zunächst auch nicht wirklich wichtig.

Das ist falsch. Ein aktueller regelgerechter Quellcode ist die Grundlage jeder Website. Dazu muss bei dir der gesamte Quellcode neu erstellt werden. Du verwendest zum Beispiel Elemente, die seit 17 Jahren nicht mehr verwendet werden sollen. Andere Elemente verwendest du nicht in ihrem dafür vorgesehenen Zusammenhang. Mit ein paar Korrekturen ist es nicht getan.

Einen Teil deiner Fehler zeigt zum Beispiel ein Validator direkt an. Analog zu Texten prüft der nur die Rechtschreibung, aber nicht die Grammatik.

https://validator.w3.org/nu/?doc=http://boratb.bplaced.net/index24.html

Wobei ich bereits den fehlenden Doctype hinzugefügt habe.

kurz erklären, wie man das richtig macht.

Da dir offensichtlich alle Grundlagen fehlen reichen kurze Erklärungen nicht aus. Das für ein Forum zu zeitaufwändig.

Wenn ich es richtig verstanden habe, hat man unterschiedliche CSS-Dateien oder in einer CSS-Datei definiert,

Richtig.

bei welchem Gerät welcher Teil ausgeführt werden soll

Komplett falsch. Das CSS richtet sich nach dem Inhalt der Website, aber in keinster Weise nach dem Ausgabegerät. CSS an Geräte anzupassen hat sich bereits vor Jahren als Sackgasse erwiesen. Das funktioniert schlicht nicht.

Für die Erstellung von Websites reicht es deshalb vollkommen aus das Browserfenster des Desktop-Browsers schmal zu ziehen.

Sinnvoll kann es sein um die Funktionen von Touchscreens nachzuvollziehen. Die kennen bekanntlich keine hover-Effekte. Die Zeiten von hover-Effekten sind vorbei, auch wenn viele Webseitenersteller das immer noch nicht einsehen mögen.

Wie teste ich das auf meinem Handy, wenn ich die Seite noch nicht Online stellen möchte?

An sinnvollsten und einfachsten mit Webspace bei einem kostenlosen Provider wie

http://www.bplaced.net/

Die Anmeldung dauert in der Regel keine 15 Minuten. Für spätere Projekte stehen dir auch PHP und Datenbanken zu Verfügung, die du aber wohl noch lange nicht brauchen wirst.

Dabei entfallen die Nachteile von Seiten wie codepen und jsfiddle. Ich würde auch keinem Anfänger XAMPP für einen Zugriff von außen empfehlen. Zumal die Einrichtung dafür äußerst kompliziert ist und du bisher ausschließlich HTML und CSS verwendest. Das ist ungefähr so als würde dir für den Wochenendeinkauf ein 38-Tonner-LKW empfohlen werden. Das geht zwar, die Nachteile sind aber viel größer als die Vorteile.

Wie ich sehe, ist es wirklich sehr viel Arbeit. Habt ihr Tipps, wie ich das bestmöglich hinkriege ohne zu verzweifeln?

Richtig erkannt. Deshalb besser bplaced.net.

Ich habe mal ein Beispiel mit aktuellem HTML und CSS erstellt, welches deinen Vorstellungen recht nahe kommen sollte:

http://boratb.bplaced.net/index23.html

Gruss

MrMurphy

Tabula_Rasa · 13 Mai 2017

Hallo Murphy

vielen Dank für deine ausführliche Antwort.

Wie lange hast du für den Quelltext gebraucht und wie hast du die Seite angepasst, dass sie auch am Handy besuchbar ist? In den meisten Videos sah ich, dass man für jede Breite und Höhe neuen CSS Code produzieren muss, was bei dir nicht zu sehen ist

MrMurphy · 13 Mai 2017

Hallo

In den meisten Videos sah ich, dass man für jede Breite und Höhe neuen CSS Code produzieren muss,

Die meisten Videos sind leider entweder veraltet oder ihre Informationen sind unsinnig oder falsch.

was bei dir nicht zu sehen ist

Ich habe auch noch gar nichts angepasst. Das ist einfach nur normales aktuelles HTML und CSS. Für Feinheiten kann das CSS noch zusätzlich angepasst werden.

Wie lange hast du für den Quelltext gebraucht

15 Minuten.

Ich habe ein kleines Grundlayout, welches ich immer verwende.

Dort habe ich deinen Text und die iFrames hineinkopiert und mit den dafür vorgesehenen Elementen versehen. Dabei habe ich auch gleich veraltete Angaben wie frameborder gelöscht. Das ist schlichte Handwerksarbeit.

Code:

   <nav id="navigation" class="navigation">
      <a href="">Home</a>
      <a href="">ZweiteSeite</a>
      <a href="">DritteSeite</a>
      <a href="">VierteSeite</a>
   </nav>
   <main id="content" class="content">
      <h2>Last Released (space-between)</h2>
      <section class="lastreleased01">
         <iframe width="263" height="157" src="youtubelink"></iframe>
         <iframe width="263" height="157" src="youtubelink"></iframe>
         <iframe width="263" height="157" src="youtubelink"></iframe>
      </section>
      <h2>Best of the Week</h2>
      <section>
         <video src="video.mp4" width="260" height="160" controls="controls" preload>
            <p>Ihr Browser kann dieses Video nicht wiedergeben.</p>
            <p>Dieser Film zeigt eine Demonstration des video-Elements. Sie können ihn unter <a href="#">Link-Addresse</a> abrufen.</p>
         </video>
      </section>
   </main>

Und dann habe ich noch etwas CSS hinzugefügt um dein Aussehen zu erhalten. Da ist auch nichts spezielles dabei:

Code:

   /*Basiseinstellungen*/
   @media all {
      h1 {
         color: white;
      }
      h2 {
         color: white;
      }
      p {
         color: white;
      }
      a {
         color: white;
      }
   }

   /*Grundlayout*/
   @media all {
      html {
         background-color: grey;
      }
      body {
         background-color: black;
         max-width: 1050px;
         margin: 0rem auto 2rem auto;
      }
   }

   /*.navigation*/
   @media all {
      .navigation {
         display: flex;
         flex-wrap: wrap;
      }
      .navigation a {
         background-color: royalblue;
         padding: 0.5rem 0.8rem;
         margin: 0rem 0rem 0.5rem 0rem;
      }
      .navigation a:nth-last-child(1n+2) {
         margin-right: 0.5rem;
      }
   }

   /*.content*/
   @media all {
      .content {
      }
      .content h2 {
         background-color: royalblue;
         text-align: center;
         margin-top: 4rem;
      }
      .content section {
         background-color: royalblue;
         padding: 1.5rem 0.25rem 1.5rem 0.25rem;
         margin-top: 0.5rem;
      }
      .content .lastreleased {
         display: flex;
         flex-wrap: wrap;
      }
      .content .lastreleased01 {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      .content iframe {
         margin: 0.5rem 0.25rem 0.5rem 0.25rem;
      }
   }

dass sie auch am Handy besuchbar ist?

Du folgst immer noch unsinnigen Vorstellungen. Deshalb noch mal: Websites werden ihrem Inhalt angepasst, nicht den möglichen Ausgabegeräten, die mittels CSS überhaupt nicht erkannt werden können.

Gruss

MrMurphy

Tabula_Rasa · 13 Mai 2017

Das habe ich aber überall gesehen und es ergab auch Sinn für mich. Ich meine, ab welcher Pixel Breite und Höhe, welcher CSS-Code bzw. Teil des Codes verwendet werden soll. Das hat auch in den meisten Videos so geklappt. Deshalb verstehe ich nicht ganz, warum das falsch sein sollte...

MrMurphy · 13 Mai 2017

Hallo

Und wie soll ein Handy / Smartphone vom CSS erkannt werden?

ab welcher Pixel Breite und Höhe, welcher CSS-Code bzw. Teil des Codes verwendet werden soll

Genau. Und dafür nimmt man die Fensterbreite und schaut, wann an welchem Teil des Inhalts etwas angepasst werden muss. Ob Handy, Smartphone, Tablet, Desktop oder andere Geräte mit Bildschirm ist dabei vollkommen egal.

An meinem Beispiel kannst du bereits erkennen, dass aktuelles und korrekt verwendetes HTML und CSS bereits von sich aus sehr flexibel sind. Und zwar ohne irgendwelche großartigen Berechnungen.

Anfänger wollen gerne ähnlich wie bei Textverarbeitungen oder Grafikprogrammen die volle Kontrolle behalten. Das ist bei Webseiten aber falsch und führt zu eigentlich überhaupt nicht vorhandenen Problemen.

So wie bei deinem ersten Versuch. Du hast unheimlich viel Zeit verschwendet um im Endeffekt Probleme zu schaffen, die es überhaupt nicht gibt und suchst dann für diese Nichtprobleme Lösungen.

Gruss

MrMurphy

Tabula_Rasa · 13 Mai 2017

Das meinte ich ja mit "Wie hast du es geschafft, dass sie auch auf dem Handy besuchbar, ohne dass das Layout völlig hinüber ist" :). Hab mich dann falsch ausgedrückt.

Könntest Du mir dein Grundlayout zeigen? Ohne etwas anzupassen und in 15 Minuten wäre fantastisch, wenn ich das könnte. Werde da wahrscheinlich noch etwas Zeit für brauchen. Erstmal studier ich etwas dein Code und versuch zu verstehen.

Danke für Deine Hilfe!

Tronjer · 13 Mai 2017

Tabula_Rasa schrieb:
Könntest Du mir dein Grundlayout zeigen? Ohne etwas anzupassen und in 15 Minuten wäre fantastisch, wenn ich das könnte.

Ist gar nicht so schwer. Für responsive Darstellung gibt es CSS Frameworks mit Grid-Layouts.
http://getbootstrap.com

Tabula_Rasa · 13 Mai 2017

Ich schau mal rein! Danke für diese Information!

SpiceLab · 13 Mai 2017

Tronjer schrieb:
Ist gar nicht so schwer. Für responsive Darstellung gibt es CSS Frameworks mit Grid-Layouts.
http://getbootstrap.com

Mit der Empfehlung habe ich mich hier diesmal bewusst aus diversen Gründen zurückgehalten

Weil...

Tabula_Rasa schrieb:
Ich bin ein Anfänger und habe dementsprechend nicht viel Ahnung.

Erstmal ordentlich das Handwerkszeug lernen, die Basics inne haben, bevor die schicken Frameworks Einzug halten, ohne so richtig zu wissen/verstehen, was da im Hintergrund auf CSS-/JS-Ebene eigentlich alles abgeht.

Aber in der Tat, dem Profi / versierten Anwender sind sie im praktischen Tagesgeschäft ein Segen - Amen!

MrMurphy · 14 Mai 2017

Hallo

Ohne etwas anzupassen und in 15 Minuten wäre fantastisch, wenn ich das könnte.

Das geht natürlich nur mit etwas Grundlagenwissen, ist aber keine Hexerei. Grade das aktuelle HTML5 ist für einen schlanken und damit leicht zu erstellenden und zu pflegenden Quelltext ausgelegt.

Könntest Du mir dein Grundlayout zeigen?

Gerne. Ich zeige dir am Besten wie sich das mehr oder weniger entwickelt hat.

Zunächst:

Die HTML-Datei ist in der Zeichencodierung "UTF-8 ohne BOM" abgespeichert. Obwohl das sicht seit über 10 Jahren als Quasi-Standard bewährt hat finden sich immer wieder mal Dateien in anderen Zeichenkodierungen. Du solltest darauf achten das dein Browser das auch unterstützt.

Weiterhin gehe ich nach dem Motto vor etwas mehr Quelltext zu schreiben, da nicht benötigter Quelltext dann einfach gelöscht werden kann.

Die Inhalte müssen natürlich angepasst werden, zum Beispiel das title-Element oder der Inhalt von description. Für Testdateien ist so ein Inhalt nicht entscheidend.

Zunächst habe ich ein absolutes Minimallayout erstellt, das in über 99,99% aller Webseiten passt:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title> 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>

Dem füge ich ein paar Container hinzu die auch in fast allen Webseiten vorkommen. Wenn die vorhanden sind können die ganz einfach verschoben werden, was wieder unnötige Tipparbeit spart. Und nicht vergessen: Überflüssige Container können ruckzuck gelöscht werden.

Die id und class haben alle ihren Sinn, auch wenn der sich nicht jedem erschließt. Wenn die nicht benötigt werden: Löschen oder durch eigene Angaben ersetzen geht ruckzuck.

Das sieht das so aus

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title> 02</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <header id="pageheader" class="pageheader">
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
   </footer>
</body>
</html>

Dann füge ich etwas CSS hinzu, welches sich als Grundlage bewährt hat. Auch dabei ist die Schreibweise bewußt gewählt. Die padding- und margin-Angaben können natürlich häufig zusammengefasst werden. Wenn die aber bereits vier Werte enthalten können die sehr schnell angepasst werden, da nur die Zahlen geändert werden müssen. Und ich kann die ganzen Zeilen sehr schnell kopieren und an anderen Stellen verwenden = Zeitersparnis.

Das sieht dann so aus:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title> 03</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         min-width: 0;
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      a {
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
   </footer>
</body>
</html>

Weiter im nächsten Beitrag...

Gruss

MrMurphy

Hallo

... weiter

Jetzt folgen noch zwei grundsätzliche Erweiterungen, die nicht unbedingt notwendig sind, sondern meinen persönlichen Vorlieben entsprechen. Zunächst füge ich einige Google-Schriften hinzu, die mir besser als die Standardschriften gefallen:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title> 04</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         min-width: 0;
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      a {
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
   </footer>
</body>
</html>

Und zum Schluß noch einige Kommentare und "Platzhalter", die ich immer wieder verwende, zum Beispiel für Media Queries. Die brauche ich dann bei Bedarf nur noch kopieren. Das ist dann mein kompletter Quelltext, den ich als Grundlage verwende:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title> 05</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      a {
         /*darkblue*/
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         /*text-align: bottom;*/
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Listen dl*/
   @media all {
      dl {
         margin: 0.5rem 0;
      }
      dt,
      dd {
         margin: 0;
      }
      dt {
         font-weight: bold;
      }
      dd {
         margin-bottom: 1rem;
      }
   }

   /*Spezielle Einstellungen*/
   @media all {
   }

   /*Vorlagen zum Kopieren*/
   /*Flexbox für IE*/
         /*-ms-flex-preferred-size: calc(50% - 1rem);*/
   /*Gesamtes CSS*/
   @media all {
   }
   /*Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }

   </style>
   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
</head>
<body>
   <header id="pageheader" class="pageheader">
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
   </footer>
</body>
</html>

Damit habe ich eine klar strukturierte Grundlage, mit der ich alle Webseiten beginne.

Für Testdateien ist es von Vorteil wenn sich das CSS im head-Bereich befindet, dann muss zum Beispiel nur eine Datei auf den Testaccount kopiert werden, wenn die Datei veröffentlicht werden soll. Bei Bedarf kann das CSS einfach in eine extra Datei kopiert und abgespeichert werden.

Bei Testdateien für Forenfragen schreibe ich dann noch nach Möglichkeit in den header, worum es überhaupt geht und in den footer einen Link zu der Frage.

Wenn wie in deinem Fall ein relativ kurzer HTML-Quelltext vorhanden ist dauert die Übernahme keine 5 Minuten.

Für das CSS brauche ich dann noch 10 Minuten, wobei ich natürlich viel Erfahrung habe und weiß, welches CSS für welche Darstellung sinnvoll ist. Deshalb verlaufe ich mich da nur selten.

Gruss

MrMurphy

Hallo

In einer anderen Frage hat jemand sich jemand ähnlich wie du in seinem CSS verlaufen.

Wenn du meine beiden Beispiele in meiner Antwort im Browser aufrufst und den Quelltext anschaust wirst du mein Grundlayout erkennen. Auch die Angaben im header und im footer.

Für die gesamte Lösung habe ich in dem Fall grade mal 10 Minuten benötigt. Mit richtig verwendeten HTML und CSS ist die wiederum sehr übersichtlich und erfordert nur wenig CSS:

https://www.html.de/threads/formulare-richtig-anordnen.57413/https://www.html.de/threads/formulare-richtig-anordnen.57413/

Gruss

MrMurphy

MrMurphy · 14 Mai 2017

Hallo

Ich kann meinen zusammengefügen Beitrag leider nicht mehr bearbeiten.

Deshalb hier eine Korrektur, heute morgen war es wohl zu spät alle Fehler zu erkennen:

Statt

Obwohl das sicht seit über 10 Jahren als Quasi-Standard bewährt hat finden sich immer wieder mal Dateien in anderen Zeichenkodierungen. Du solltest darauf achten das dein Browser das auch unterstützt.

sollte es

Obwohl das sich seit über 10 Jahren als Quasi-Standard bewährt hat finden sich immer wieder mal Dateien in anderen Zeichenkodierungen. Du solltest darauf achten das dein Editor das auch unterstützt.

heißen. Die Browser haben damit schon lange kein Problem mehr.

Gruss

MrMurphy

Tabula_Rasa · 17 Mai 2017

Bin nun aus dem Krankenhaus und habe Zeit, eure Antworten durchzulesen! Vielen Dank für Eure Hilfe!

Tabula_Rasa · 18 Mai 2017

Guten Abend,

bin nochmal alles durchgegangen. Ich verstehe folgende Tags nicht ganz:

1. Wozu ist der aside-Tag da? Ich habe mir zwar im Internet einiges durchgelesen, aber vorstellen kann ich mir nichts drunter.

2..navigation a:nth-last-child(1n+2) - Ich hab nicht ganz verstanden, was das zu bedeuten hat.

Interessehalber:

3. Wie kriege ich unter bzw. über den Videos ein Titel hin? Für Bilder gibt es ja figure- und figcaption-Tags. Wie sieht es bei Videos aus?

4. Wie kriege ich es hin, die Videos immer noch nebeneinander zu haben auch bei kleineren Auflösungen, ohne dass ein Video unter das andere gestellt wird, also dass man halt seitlich scrollen muss, um das Video nächste Video zu sehen?

Vorgehen:

Ich möchte zwei Ziele erreichen:

5. Ich möchte, dass der Besucher weiß auf welcher Seite er sich befindet. Dafür habe ich mir gedacht, dass ich den Hintergrund der Navi-Leiste der entsprechenden Seite ändere. Dieses Vorhaben wollte ich im entsprechenden Code realisieren mit :nth-child{background-color: *farbe*}. Ist das so in Ordnung?

6. Ich möchte Videos bei Geräten mit kleineren Formaten max. 2 aneinanderreihen. Um das zu realisieren, wollte ich eigentlich nur die Breite anpassen, also: 900 px stehen zu Verfügung, d.h. also dass ein Video max 450 px breit sein darf. Das stell ich dann halt in diesem Code ein:
@media only screen and (max-width: 900px) {
}
Die Frage ist hierbei nur, ob man die Videobreite im CSS-Code einstellen kann. Da man das sicherlich kann, ist die Frage, wie man das schafft.

Vielen Dank!

Ich wünsche Euch noch eine gute Nacht!

MrMurphy · 19 Mai 2017

Hallo

Wozu ist der aside-Tag da?

Das aside-Element enthält Informationen, die nicht direkt zum Hauptinhalt gehören, aber für die Besucher interessant sein können. Wenn der Hauptinhalt zum Beispiel einen bestimmten Heizlüfter beschreibt könnten im aside-Element Informationen zum Erfinder stehen. Und / oder Werbung. Und / oder weitere Links, die nicht zur Hauptnavigation gehören. ...

Siehe auch

https://developer.mozilla.org/de/docs/Web/HTML/Element/aside

oder

https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/aside

Code:

.navigation a:nth-last-child(1n+2)

Damit werden in .naviagtion alle a-Elemente ausser dem letzten angesprochen. In meiner Beispielseite bekommen alle a-Elemente außer dem letzten einen rechten Rand.

So werden Umwege vermieden, die früher dafür notwendig waren, zum Beispiel das Verwenden von Klassen oder zunächst eine CSS-Anweisung vergeben, die dann wieder aufgehoben wird.

Wie kriege ich unter bzw. über den Videos ein Titel hin?

Dafür gibt es keine speziellen Elemente. Also ganz klassisch mit einem umgebenden passenden Element (section, article, div) und eine Überschrift.

Wie kriege ich es hin, die Videos immer noch nebeneinander zu haben auch bei kleineren Auflösungen

Mal abgesehen davon, dass solche Lösungen von den meisten Besuchern nicht erwünscht sind, hängt das von deinem Quelltext und deinem CSS ab.

In meinem Beispiel muss dazu das flex-wrap entfernt werden. Je nach Wunsch brauchen die iFrames dann noch ein "flex-shrink: 0;" damit sie nicht kleiner werden können.

Wahrscheinlich sind dann noch ein paar kleine Anpassungen notwendig.

5. Ich möchte, dass der Besucher weiß auf welcher Seite er sich befindet. Dafür habe ich mir gedacht, dass ich den Hintergrund der Navi-Leiste der entsprechenden Seite ändere. Dieses Vorhaben wollte ich im entsprechenden Code realisieren mit :nth-child{background-color: *farbe*}. Ist das so in Ordnung?

Das hört sich für mich unsinnig an. Damit tobst du eher deine Fantasien aus als den Besuchern zu helfen. Überschriften sind dafür viel eindeutiger und hilfreicher. Zum Beispiel im header oder zu Beginn des main-Elements. Im Gegensatz zu Farben enthalten die auch keine Barrieren.

Zur 6. Frage bin ich überfordert, deshalb schreibe ich dazu nichts konkretes. Die hört sich aber wieder nach einem Problem an, dass du dir schaffst, obwohl es ursprünglich überhaupt nicht vorhanden ist.

Tip: Viele vorgegebene Verhaltensweisen der Browseransichten sind für die Besucher hilfreich und sollten nicht geändert werden. Beschäftige dich mehr mit dem Inhalt deiner Seiten als dem Aussehen, wenn du gute Webseiten erstellen willst.

Da auch der HTML-Quelltext vom Inhalt abhängt ist es ohne den Inhalt deiner Webseiten zu kennen nur eingeschränkt möglich dir konkret zu helfen. Ich muss dann zum Beispiel schreiben "einem umgebenden passenden Element", wobei ich das Gefühl habe, dass du damit so recht nichts anfangen kannst. Aber ohne den Inhalt zu kennen geht es leider nicht genauer.

Deine Fragen deuten insgesamt darauf hin dass du deine Webseiten nicht besucherfreundlich erstellen willst. Das ist natürlich deine Entscheidung. Aber gute Webseiten wirst du so niemals erstellen können.

Gruss

MrMurphy

Tabula_Rasa · 19 Mai 2017

Guten Morgen :),

die Fragen waren theoretischer Natur. Ich frag mich immer, wie man bestimmte Sachen umsetzt, auch wenn ich sie nicht umsetzen möchte.

Alles hat wunderbar geklappt (Danke dafür), jedoch habe ich beim erstellen der Titel für das jeweilige Video ein Problem. Ich kriege es einfach nicht hin, dass ein Titel immer unter demselben Video bleibt auch bei unterschiedlichen Formaten. Video und Text blocken sich gegenseitig. Welche Elemente sollte ich mir anschauen, um das in den Griff zu bekommen?

EDIT: Gibt es ein ähnliches Element wie flex-shrink für Videos?

EDIT 2: Mit dem li-Element klappt das einigermaßen. Ist dies aber der Richtige Weg um die Titel einzufügen?

Anpassung an verschiedenen Bildschirmen

MrMurphy

Senior HTML'ler

Tabula_Rasa

Mitglied

MrMurphy

Senior HTML'ler

Tabula_Rasa

Mitglied

MrMurphy

Senior HTML'ler

Tabula_Rasa

Mitglied

Tronjer

Senior HTML'ler

Tabula_Rasa

Mitglied

SpiceLab

Mod | ZENmechanic

MrMurphy

Senior HTML'ler

MrMurphy

Senior HTML'ler

Tabula_Rasa

Mitglied

Tabula_Rasa

Mitglied

MrMurphy

Senior HTML'ler

Tabula_Rasa

Mitglied

Neueste Beiträge