tag:forum.selfhtml.org,2005:/self Eine frage an die Profis... – SELFHTML-Forum 2018-06-16T09:51:28Z https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724340#m1724340 liberwinter htmlkurss@web.de 2018-06-10T13:13:36Z 2018-06-10T13:18:30Z Eine frage an die Profis... <p>Hallo , ich bin kein deutsch und mein deutsch Sprache ist nicht so gut.... .ich bin mit html/css seit zwei Monate .Bin ich jetzt in eine Volksschule Online Kurs um html/css zu Lernen .Ich versuche auch meine Website zu bauen..... Ich habe meine Head , Navigation Menu mit Div gebaut , der Link Spalte (content) mit</p> <pre><code class="block language-css"><span class="token selector">UL</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 15%<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token comment">/* sagt welche Element (div ,text,..) height: 100%; /* 1*/</span> <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>aber wenn versuche der Rechte Spalte zu bauen , bekomme nicht ,</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-css"><span class="token selector">.left</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 15%<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>kann Bitte jemand hilfe und diese Proble zu lösen , Danke !</p> <p><em>Edit Rolf B: ~~~ Formatierung hinzugefügt</em></p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724343#m1724343 Rolf B 2018-06-10T13:38:53Z 2018-06-10T13:38:53Z Eine frage an die Profis... <p>Hallo liberwinter,</p> <p>Willkommen bei SelfHTML.</p> <p>Ich habe deine Code-Beispiele so geändert, dass das Forum sie besser anzeigt. Dafür setzt man davor und dahinter ein ~~~. Klicke einmal auf das Wort „Versionen“ über deinem Beitrag, da siehst Du was ich gemacht habe.</p> <p>Du schreibst "rechte Spalte". Möchtest Du insgesamt 3 Spalten haben? Links Navigation, in der Mitte der Haupt-Teil und rechts eine Spalte mit Informationen? Dann sollte das, was Du geschrieben hast, funktionieren. Kannst Du beschreiben, was falsch aussieht?</p> <p>Etwas anderes möchte ich auch noch schreiben: Du sagst, du verwendest div. Das kann man mit HTML 5 besser machen. Für den Kopf der Seite gibt es das <header> Element, für Navigation gibt es <nav>, für eine Spalte am Rand <aside>. Und für den Hauptteil <main>. Der Fuß der Seite ist <footer>. Diese Elemente verhalten sich genau so wie <div>, aber man weiß besser, was gemeint ist. <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung" rel="nofollow noopener noreferrer">Unser Wiki hat einen Artikel dazu.</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724420#m1724420 marctrix self@mhis.de https://www.mhis.de 2018-06-11T08:12:47Z 2018-06-11T10:49:33Z Eine frage an die Profis... <p>Hej liberwinter,</p> <p>auch von mir ein herzliches Willkommen!</p> <blockquote> <p>Bin ich jetzt in eine Volksschule Online Kurs um html/css zu Lernen.</p> </blockquote> <p>Ich hoffe, da hat man Euch beigebracht, dass man grid für ein Layout benutzt…</p> <blockquote> <p>Ich versuche auch meine Website zu bauen..... Ich habe meine Head , Navigation Menu mit Div gebaut , der Link Spalte (content) mit</p> </blockquote> <blockquote> <pre><code class="block language-css"><span class="token selector">UL</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 15%<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token comment">/* sagt welche Element (div ,text,..) height: 100%; /* 1*/</span> <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Das möchtest du so bestimmt nicht lassen. Ich sehe da gleich mehrere Probleme:</p> <p>1.) Die meisten Menschen benutzen sehen sich Webseiten mit einem Smartphone an. Deine Spalte nimmt die ganze Höhe des Bildschirms ein und bleibt auch noch da stehen. Hast du dir das mal auf Deinem Smartphone angesehen?</p> <p>2.) Die Breite von 15% ist auf einem Smartphone viel zu gering.</p> <p>3.) Die Probleme vergrößern sich, wenn jemand größere Schriften verwendet, als von Dir vorgesehen.</p> <p>4.) Das was du geschrieben hast, wird mit jeder unsortierten Liste (unordered list <code>ul</code>) passieren. Das ist ganz sicher nicht gewollt!</p> <p>Wenn das das Beispiel aus dem Unterricht ist, hat Euer Lehrer Euch da mit etwas nach Hause geschickt, was nicht Gut ist. Das kann man nicht benutzen für eine richtige Webseite.</p> <blockquote> <p>aber wenn versuche der Rechte Spalte zu bauen , bekomme nicht ,</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Dein HTML sollte ungefähr so aussehen: Zuerst brauchst du das Grundgerüst, wie es auf der Seite <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundger%C3%BCst" rel="nofollow noopener noreferrer">HTML-Grundgerüst</a> beschrieben ist.</p> <p>In den <code>body</code>kannst du dann Deine Seitenbereiche schreiben, zum Beispiel:</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> </code></pre> <p>Jetzt möchtest Du sicher, dass der <code>header</code> oben steht, darunter willst du drei Spalten und zuletzt einen <code>footer</code>.</p> <p><a href="https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724380#m1724380" rel="noopener noreferrer">Gunnar hat eine Methode gezeigt</a>, die ich für Anfänger sehr gut geeignet halte, denn sie funktioniert so ähnlich wie skizzieren/malen und ist daher sehr intuitiv.</p> <p>Grundlage dafür ist CSS Grid. Das bedeutet, du erstellst ein raster, auf dem du deine Elemente anordnen kannst</p> <p>Dazu du gibst dem Eltern-Element von allem, was du anordnen möchtest, die Display-Eigenschaft <code>grid</code>:</p> <pre><code class="block language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Daudrch werden alle Kinder von <code>body</code> automatisch zu sogenannten <code>grid-items</code>. Damit kannst du nun eine ganze Menge anstellen.</p> <p>Aber eins nach dem anderen. Grid bedeutet im deutschen Raster. Ein Raster findest du beispielsweise auf einem Schachbrett. Es besteht aus Reihen (beim Schach mit Zahlen gekennzeichnet) und aus SPalten (beim Schach mit Buchstaben gekennzeichnet).</p> <p>Aber wie viele Spalten und Zeilen soll unser Grid haben? Das müssen wir dem Browser mitteilen.</p> <p>Du möchtest drei Spalten (links, mitte, rechts).</p> <p>Das lässt sich so anlegen:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr 1fr<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Damit legst du drei gleich breite Spalten an, denn <code>1fr</code> steht für ein Teil (fraction), das den vorhandenen Platz einnehmen darf.</p> <p>Wenn du drei davon angibst, werden alle gleich breit, denn der verfügbare Platz wird an alle drei Elemente gleichmäßig verteilt. Im Verhältnis 1:1:1</p> <p>Du möchtes sicher, dass die mittlere Spalte mehr Platz bekommt, als die beiden anderen. Dafür gibt es zwei Möglichkeiten:</p> <p>1.) Du gibst der mittleren Spalte mehr Platz, zum Beispiel <code>2fr</code> oder sogar <code>3fr</code>. Damit wird die mittlere Spalte doppelt oder gar drei mal so breit, wie die Spalten links und rechts.</p> <p>Das sieht so aus:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 2fr 1fr<span class="token punctuation">;</span> <span class="token comment">/* Mitte bekommt 2mal so viel Platz wie die Ränder */</span> <span class="token punctuation">}</span> </code></pre> <p>2.) Du legst mehr als drei Raster-Spalten an und kannst dann dem mittleren Bereich sagen, er soll sich über mehrere Raster-Spalten strecken. Da das ein klein wenig komplizierter ist, werde ich es hier vormachen:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Nun haben wir acht Spalten, wie auf einem Schachbrett (das kann man auch kürzer schreiben, aber belassen wir es an dieser Stelle mal dabei…)</p> <p>Auf diesen Spalten kannst du nun Deine Elemente anordnen. Am einfachsten geht das wie in Gunnars Beispiel, indem du deinen <code>grid-area</code>s Namen gibst.</p> <pre><code class="block language-css"> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> header<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> nav<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">main</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> main<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">aside</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> infoBox<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">footer</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> footer<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das Problem dabei ist, dass sich einige dieser Elemente genau wie deine Liste auch mehrfach in Deinem Dokument befinden können. Daher müssen wir etwas genauer beschreiben, welchen <code>footer</code> usw wir genau meinen.</p> <p>Wir wollen genau die Elemente formatieren, die Kinder von <code>body</code> sind. Dafür gibt es den sogenannten <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Kindselektor" rel="nofollow noopener noreferrer">Kind-Selektor</a>.</p> <p>Dabei gibt man das Eltern-Element und das Kind-Element gemeinsam an und kombiniert diese mit dem größer-als-Zeichen:</p> <pre><code class="block language-css"> <span class="token selector">body > header</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> header<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > nav</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> nav<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > main</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> main<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > aside</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> infoBox<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > footer</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> footer<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Von jetzt an ist klar, dass alle Formatierungen, die du an diesen Elementen vornehmen wirst, auch nur genau diese Elemente betreffen werden.</p> <p>Zurück zum Grid/Raster.</p> <p>Du hast jetzt also so etwas:</p> <pre><code class="block">Spalte1 Spalte2 Spalte3 Spalte4 Spalte5 Spalte6 Spalte7 Spalte8 </code></pre> <p>Ohne das extra angegeben zu haben, darfst du aber deine Elemente zusätzlich auf beliebig vielen Zeilen angeben. Also so:</p> <pre><code class="block">Spalte1 Spalte2 Spalte3 Spalte4 Spalte5 Spalte6 Spalte7 Spalte8 Spalte1 Spalte2 Spalte3 Spalte4 Spalte5 Spalte6 Spalte7 Spalte8 Spalte1 Spalte2 Spalte3 Spalte4 Spalte5 Spalte6 Spalte7 Spalte8 </code></pre> <p>Deine Elemente jetzt auf diese Spalten zu verteilen geht indem du das genau so in dein CSS schreibst, nur mit den Namen, die du vergeben hast. Dazu benötigst du die Eigenschaft <code>grid-template-areas</code></p> <p>Dahinter gibst du dann die Spalten so wie oben an:</p> <pre><code class="block language-css"> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header header header header header header"</span> <span class="token string">"nav nav main main main main infoBox infoBox"</span> <span class="token string">"footer footer footer footer footer footer footer footer"</span><span class="token punctuation">;</span> </code></pre> <p>Das Raster ist damit fertig. Ich füge nur noch Farben hinzu, damit wir die einzelnen Boxen voneinander unterscheiden können:</p> <pre><code class="block language-css"> <span class="token selector">body > header</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> header<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > nav</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> nav<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> lightcyan<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > main</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> main<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> lightyellow<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > aside</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> infoBox<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> lightcyan<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > footer</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> footer<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Bleibt eigentlich nur noch das Problem mit den kleinen Bildschirmen.</p> <p>Bisher ging es nur darum, wie man Boxen auf einem Grid/Raster platziert. Daher habe ich das gezeigt. Damit anzufangen wird aber aus vielen Gründen nciht empfohlen.</p> <p>Man kümmerst sich zuerst nur um die Darstellung auf den kleinsten Geräten, also Smartphones oder gar Smartwatches.</p> <p>Da machen mehrere Spalten keinen Sinn. Ich möchte also, dass die Spalten nur erscheinen, wenn der Bildschirm groß genug ist, um drei Spalten nebeneinader darzustellen. Dafür gibt es <em>media-queries</em>.</p> <p>Dadfür gibt es zwei Ansätze. Gunnar hat den eleganteren gewählt. Ich wähle hier einen anderen, weil er mir nach den gemachten Erklärungen leichter nachvollziehbar erscheint. Es geht also nur darum, dass auf Smartphones alle Spalten des Rasters nur einem Element bereit gestellt werden. Also so etwas:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header header header header header header "</span> <span class="token string">"nav nav nav nav nav nav nav nav "</span> <span class="token string">"main main main main main main main main "</span> <span class="token string">"infoBox infoBox infoBox infoBox infoBox infoBox infoBox infoBox"</span> <span class="token string">"footer footer footer footer footer footer footer footer "</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das gehört zuerst in das CSS.</p> <p>Das was wir vorher hatten, setzen wir in folgendes Konstrukt:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* CSS Regeln, die hier stehen, werden nur angewendet, wenn der Platz im Browser (VIewport) mindestens so breit ist wie 40 mal der Buchstabe 'm' */</span> <span class="token punctuation">}</span> </code></pre> <p>Wie das aussieht, wenn du alles zusammen packst, siehst in meinem <a href="https://codepen.io/haunschild/pen/OEpRjL" rel="noopener noreferrer">Codepen CSS-Grid mit benannten grid-areas</a>.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724345#m1724345 liberwinter htmlkurss@web.de 2018-06-10T14:05:28Z 2018-06-10T14:20:56Z Eine frage an die Profis... <p>Erste viel danke für deine Antwortet und für meine text zu korrigiert.. ! , die Idee für meine seite ist <a href="https://www.w3schools.com/css/css_website_layout.asp" rel="nofollow noopener noreferrer">hier </a>, Head und Navigation habe gemacht wie<a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_navbar" rel="nofollow noopener noreferrer"> hier</a> .</p> <p>Kannst Du beschreiben, was falsch aussieht?</p> <p>es kommt nicht.....</p> <p>ich habe bei eure Artikel gelesen das ist besser nicht viele Div benutze....,ich habe versuche es , aber weil meine html/css kenntnisse sehr einfache ist , benutze es... ich möchte jetzt ein Rechte Spaltung und einen Unten...</p> <p><a href="/images/70f2264a-453e-478c-afdb-ca32e44bc997.png" rel="noopener noreferrer"><img src="/images/70f2264a-453e-478c-afdb-ca32e44bc997.png?size=medium" alt="Meine website wie jetzt ist" title="Meine website" loading="lazy"></a></p> <p>Das Bild zeigt wie jetzt meine Website ist...</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724371#m1724371 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-10T20:24:08Z 2018-06-10T20:24:08Z Eine frage an die Profis... <p>@@Rolf B</p> <blockquote> <p>Das kann man mit HTML 5 besser machen. […] für eine Spalte am Rand <aside>.</p> </blockquote> <p>Nein, <a href="https://w3c.github.io/html/sections.html#the-aside-element" rel="nofollow noopener noreferrer"><code>aside</code></a> hat zunächst einmal nichts mit „Spalte am Rand“ zu tun.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724404#m1724404 marctrix self@mhis.de https://www.mhis.de 2018-06-11T06:44:05Z 2018-06-11T06:44:05Z Eine frage an die Profis... <p>Hej Rolf,</p> <p>Ein Plus und eine Anmerkung:</p> <blockquote> <p>Etwas anderes möchte ich auch noch schreiben: Du sagst, du verwendest div. Das kann man mit HTML 5 besser machen. Für den Kopf der Seite gibt es das <header> Element, für Navigation gibt es <nav>, für eine Spalte am Rand <aside>.</p> </blockquote> <p><code>aside</code> dient zur Aufnahme von weiterführenden Inhalten, die nicht unbedingt an der Seite stehen müssen. Oft packt man solche Inhalte aber in eine Seitenleiste.</p> <blockquote> <p>Und für den Hauptteil <main>. Der Fuß der Seite ist <footer>. Diese Elemente verhalten sich genau so wie <div>, aber man weiß besser, was gemeint ist. <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung" rel="nofollow noopener noreferrer">Unser Wiki hat einen Artikel dazu.</a></p> </blockquote> <p>Die Elemente verhalten sich nciht wie <code>div</code>-Elemente, sie sehen aber so aus, weil sie standardmäßig wie <code>div</code> als Blockelemente dargestellt werden.</p> <p>Ihnen wohnt aber nicht nur eine andere Semnatik inne, diese wird auch von z.B. Screenreadern ausgewertet und verhalten sich dort auch anders. So ist ein <code>main</code> ein Element. das sich sich direkt mit der Taste <code>m</code> anspringen lässt.</p> <p>Dein Hinweis, dass der Code besser lesbar wird, ist natürlich schon ein ausreichender Grund, die Elemente korrekt zu verwenden.</p> <p>Keine Kritik also, nur eine kleine Ergänzung…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724359#m1724359 Rolf B 2018-06-10T15:50:06Z 2018-06-10T15:50:06Z Eine frage an die Profis... <p>Hallo ,</p> <p>ist dein div für rechts wirklich leer? dann ist die Größe null mal null und man sieht es nicht.</p> <p>was w3schools zeigt, ist aber veraltet. Das funktioniert, aber heute nimmt man lieber flexbox oder für den Aufbau der Seite. Unser <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung" rel="nofollow noopener noreferrer">Wiki</a> enthält dazu viel. Entscheide Du, wie du es machen willst.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724361#m1724361 liebewinter htmlkurss@web.de 2018-06-10T16:31:08Z 2018-06-10T16:46:51Z Eine frage an die Profis... <p>Ja , er ist leer .Danke für deine Antwort , welche von beiden empfiehlt du mich , danke</p> <p><a href="/images/328d2a5e-8026-4d68-b9b4-b52d08ad55ad.png" rel="noopener noreferrer"><img src="/images/328d2a5e-8026-4d68-b9b4-b52d08ad55ad.png?size=medium" alt="Codec von meine Website , html Codec" title="Codec Webseite" loading="lazy"></a></p> <p>Bild von meine html Codec</p> <p><a href="/images/61066f35-6972-4994-9e9d-954e7c8a3a89.png" rel="noopener noreferrer"><img src="/images/61066f35-6972-4994-9e9d-954e7c8a3a89.png?size=medium" alt="CSS Codec von meine Website" title="CSS Codec Website" loading="lazy"></a></p> <p>Dieses Bild zeigt Meine CSS Codec ,<strong>.left</strong> element zeigt wie ich der Rechte Spalte bauen möchte .</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724368#m1724368 liebewinter htmlkurss@web.de 2018-06-10T17:19:02Z 2018-06-10T18:03:53Z Der Div element ist nicht Leer <p>Entschuldigung ,der Div für den Rechte Seite habe aufgefüllt , er hat der name ,<strong>.left</strong> element :</p> <pre><code class="block language-css"><span class="token selector">.left</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 15%<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724416#m1724416 Rolf B 2018-06-11T07:19:44Z 2018-06-11T07:19:44Z Eine frage an die Profis... <p>Hallo liebewinter,</p> <p>Du kannst deinen Code auch als Text kopieren und hier zeigen. Dann kann man davon kopieren.</p> <p>Die Idee ist, dass Du die Bereiche deiner Seite im HTML so baust, dass sie einzeln sind. Wo sie angezeigt werden, baust Du mit CSS zusammen. Dafür ist Grid besser als Flexbox, du musst bei grid nur wissen, dass es zwei Versionen von grid gibt. Internet Explorer und Edge (bis Version 15) verwenden die alte Version, alle anderen Browser die neue Version. Wenn deine Seite in Internet Explorer und alten Edge Versionen so aussehen soll wie auf anderen Browsern, dann ist grid schwieriger. Weil ich meine Arbeit in einer Firma mache, die viel Internet Explorer 11 verwendet, benutze ich grid nicht und kenne mich damit nicht gut aus.</p> <p>Wenn Du Flexbox verwendest, musst Du ein "Helfer-div" verwenden, um linke Navigation, Hauptteil und eine rechte Spalte nebeneinander zu bekommen.</p> <p>Brauchst Du eigentlich zwei Navigationen? Wird deine Seite so groß, dass eine nicht reicht? Ich möchte mit Dir jetzt nicht über ein TopNav mit Aufklapp-Menüs sprechen; wenn man das so machen will, dass es jeder benutzen kann, ist es schwierig. Für eine erste Seite kannst Du die Navigation an den linken Rand setzen, und Listen ineinander legen wenn du eine Struktur darin haben willst. Wenn die Seite auf einem Handy angezeigt wird, KANN man etwas bauen womit die Navigation aufklappen und zuklappen kann, das muss für den Anfang aber nicht sein.</p> <p>Bevor ich ein Beispiel für Flexbox mache (Gunnar hat in seinem codepen ja schon etwas für grid gezeigt), möchte ich von Dir wissen, was Du mit "rechte Spalte" meinst. Wie soll deine Seite aussehen? Willst Du zwei oder drei Spalten haben?</p> <pre><code class="block">So oder so ------------------------------------ ------------------------------------ ! header ! ! header ! ------------------------------------ ------------------------------------ ! Na ! ! ! Na ! ! ! ! vi ! Hauptteil ! ! vi ! Hauptteil ! info! ! ga ! ! ! ga ! ! ! ! ti ! ! ! ti ! ! ! ! on ! ! ! on ! ! ! ! ! ! ! ! ! ! ------------------------------------ ------------------------------------ ! footer ! ! footer ! ------------------------------------ ------------------------------------ </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724373#m1724373 Rolf B 2018-06-10T21:18:28Z 2018-06-11T05:05:04Z Der Div element ist nicht Leer <p>Hallo ,</p> <p>ich war heute Abend nicht zu Hause und es ist jetzt spät, darum nur kurz.</p> <ol> <li> <p>Sei bitte so nett und nenne eine Klasse nicht <code>left</code>, wenn sie „rechts“ bedeuten soll. Left bedeutet links, das verwirrt.</p> </li> <li> <p>Der Name "right" ist aber auch falsch. Klassen sollen sagen, was in einem HTML Element steht. Klassen sollen <strong>nicht</strong> sagen, wie das Element aussehen soll. Das <strong>wie</strong> steckt nur im CSS.</p> </li> <li> <p>Du hast 2 div mit class="left". Ist das Absicht?</p> </li> </ol> <p>Eine Empfehlung ob du flexbox oder grid nehmen solltest habe ich nicht. Nimm das, was du besser verstehst.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724372#m1724372 Rolf B 2018-06-10T21:05:44Z 2018-06-10T21:05:44Z Eine frage an die Profis... <p>Hallo Gunnar,</p> <p>es bietet sich aber für eine Infospalte am rechten Rand an.</p> <p>Zumindest verstehe ich die Spec so.</p> <p>Und natürlich kann man aside auch anders nutzen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724377#m1724377 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-10T22:24:40Z 2018-06-10T22:24:40Z Eine frage an die Profis... <p>@@Rolf B</p> <blockquote> <p>[<code>aside</code>] bietet sich aber für eine Infospalte am rechten Rand an.</p> </blockquote> <p>Aus welchem Hut zauberst du eine Infospalte? <a href="https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724345#m1724345" rel="noopener noreferrer">Bei liberwinter</a> gibt es keine solche.</p> <p>Und wenn es eine gäbe, dann wäre <code>aside</code> möglicherweise passend – aber nicht wegen „am rechten Rand“, sondern wegen <em lang="en">„content that is tangentially related to the content of the parenting sectioning content“</em> [<a href="https://w3c.github.io/html/sections.html#the-aside-element" rel="nofollow noopener noreferrer">Spec</a>]</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724380#m1724380 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-10T23:40:29Z 2018-06-10T23:40:29Z Der Div element ist nicht Leer <p>@@Rolf B</p> <blockquote> <p>Eine Empfehlung ob du flexbox oder Gruß nehmen solltest habe ich nicht. Nimm das, was du besser verstehst.</p> </blockquote> <p>Die bessere Empfehlung dürfte sein: Nimm das, was für den Zweck besser geeignet ist. Und versuche, es zu verstehen.</p> <p>Das dürfte hier Grid sein. Damit sind Überschrift über volle Breite und 2 Spalten schnell umgesetzt (im <a href="https://codepen.io/gunnarbittersmann/pen/MXpgBZ?editors=0100" rel="noopener noreferrer">Beispiel</a> im <em lang="en">media query</em>) – mit im Code sichtbarem Layout (<code>grid-template-areas</code>).</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724406#m1724406 Rolf B 2018-06-11T06:46:01Z 2018-06-11T06:46:01Z Eine frage an die Profis... <p>Hallo Gunnar,</p> <p>was es bei liberwinter gibt und was nicht, hat sich mir tatsächlich noch nicht so recht erschlossen. Ich denke aber, dass er mit "rechte Spalte" eben nicht den Hauptteil meint. Eine Breite von 15% passt nicht dazu.</p> <blockquote> <p>sondern wegen „content that is tangentially related to the content of the parenting sectioning content“</p> </blockquote> <p>Ja. Klar. Infobereich halt. Ob nun rechts, links oder als Footer, das ist doch egal. Gibt's nicht in der Spec dafür auch ein Beispiel, wie die Grundstruktur einer Seite mit aside aufgebaut wird? Ich möchte es auch nicht zu kompliziert machen, sonst versteht liberwinter/liebewinter mich möglicherweise nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724415#m1724415 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-11T07:13:24Z 2018-06-11T07:13:24Z Eine frage an die Profis... <p>@@marctrix</p> <blockquote> <blockquote> <p>Und für den Hauptteil <main>. […] Die Elemente verhalten sich nciht wie <code>div</code>-Elemente, sie sehen aber so aus, weil sie standardmäßig wie <code>div</code> als Blockelemente dargestellt werden.</p> </blockquote> </blockquote> <p><code>main</code> nicht in älteren Browsern. Da kann es nicht schaden, ggfs. noch <code class="language-css"><span class="token selector">main</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block <span class="token punctuation">}</span></code> im Stylesheet zu haben.</p> <blockquote> <p>Keine Kritik also, nur eine kleine Ergänzung…</p> </blockquote> <p>Dito.</p> <p>Außerdem muss man sich IMHO auch für Kritik nicht entschuldigen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724515#m1724515 Tabellenkalk 2018-06-12T07:41:43Z 2018-06-12T07:41:43Z Eine frage an die Profis... <p>Hallo,</p> <blockquote> <blockquote> <p>Keine Kritik also, nur eine kleine Ergänzung…</p> </blockquote> <p>Außerdem muss man sich IMHO auch für Kritik nicht entschuldigen.</p> </blockquote> <p>Weil Kritik nicht grundsätzlich negativ ist, sondern auch positiv sein kann/darf…</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724419#m1724419 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-11T08:01:10Z 2018-06-11T08:01:10Z Eine frage an die Profis... <p>@@Rolf B</p> <blockquote> <p>Wenn Du Flexbox verwendest, musst Du ein "Helfer-div" verwenden, um linke Navigation, Hauptteil und eine rechte Spalte nebeneinander zu bekommen.</p> </blockquote> <p>Aber nicht doch. Geht völlig <a href="https://codepen.io/gunnarbittersmann/pen/yEMaMV" rel="noopener noreferrer">ohne zusätzliches <code>div</code></a>.</p> <p>Aber auch bei Flexbox müsste man für IE 10 die <a href="http://zomigi.com/blog/flexbox-syntax-for-ie-10/" rel="nofollow noopener noreferrer">alte Syntax</a> verwenden, <em>„wenn deine Seite in Internet Explorer und so aussehen soll wie auf anderen Browsern“</em>. Die Frage kann man aber auch getrost mit <a href="http://dowebsitesneedtolookexactlythesameineverybrowser.com/" rel="nofollow noopener noreferrer">Nein</a> beantworten.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724454#m1724454 liebewinter htmlkurss@web.de 2018-06-11T12:44:01Z 2018-06-11T12:49:01Z Eine frage an die Profis... <p>vielll danks für deine bemühst !</p> <p>ich habe mich Etscheide für CSS Grid , ich versuche jetzt wie Marc <a href="https://codepen.io/haunschild/pen/OEpRjL" rel="noopener noreferrer">geschrieben</a> hat .Deine Idee header , Link Spalte(navigator) , Hauptteilt , rechte Spalte(info) und footer , es mir gefällt ... ich versuche sie mit CSS Grid zu bauen....</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724425#m1724425 Rolf B 2018-06-11T08:31:15Z 2018-06-11T08:33:56Z Eine frage an die Profis... <p>Hallo Gunnar,</p> <p>ok, und das jetzt noch mit header und und footer für die Seite... Aber ich möchte erstmal abwarten ob ich das Grundlayout von liebewinter verstanden habe.</p> <p>IE10 kann man mit 0,08% wohl abhaken, für den würde ich nichts spezielles mehr tun. IE11 hat - in Deutschland - zumindest noch über 3% Nutzungsquote. Und der kann flexbox.</p> <p>Wir sollten unseren Winter-Liebhaber auch nicht tot diskutieren, denke an seinen Hinweis auf seine Deutschkenntnisse und dass er Einsteiger ist. Keep it simple.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724443#m1724443 liebewinter htmlkurss@web.de 2018-06-11T10:48:18Z 2018-06-11T11:06:15Z @Marc <p>Erste , vielll danks für deine bemühst !</p> <blockquote> <p>Ich hoffe, da hat man Euch beigebracht, dass man grid für ein Layout benutzt…</p> </blockquote> <p>Leider haben wir nichts bekommen... , der Kurs ist nur <a href="https://www.anjamorsch.de/test/html_online/" rel="nofollow noopener noreferrer">diese</a> Website bauen .Die lehrerin gibt uns nur die Parameter , die Rest , sollen uns selbst suchen.....als Information Quelle um diese Website zu bauen , ist eure Website , so , habe ich euch kennengelernt ... ☺️ .</p> <blockquote> <p>Die meisten Menschen benutzen sehen sich Webseiten mit einem Smartphone an. Deine Spalte nimmt die ganze Höhe des Bildschirms ein und bleibt auch noch da stehen.</p> </blockquote> <p>Meine Webside möchte ich über Linux sprechen , ich denke meisten Linux benutze , sich benutzen Rechner ...</p> <blockquote> <p>Hast du dir das mal auf Deinem Smartphone angesehen?</p> </blockquote> <p>Nein , ich habe keine Smartphone ☺️ , ich habe eine Billiger Mobiltelefon ... .</p> <p>ich möchte jetzt versuche meine Website mit Css Grid layout bauen ,es wäre die möglichkeit wenn ich hilfe brauche , bei dir melden ???</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724850#m1724850 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-16T04:56:39Z 2018-06-16T04:56:39Z Eine frage an die Profis... <p>@@marctrix</p> <blockquote> <p>1.) Du gibst der mittleren Spalte mehr Platz, zum Beispiel <code>2fr</code> oder sogar <code>3fr</code>. Damit wird die mittlere Spalte doppelt oder gar drei mal so breit, wie die Spalten links und rechts.</p> <p>Das sieht so aus:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 2fr 1fr<span class="token punctuation">;</span> <span class="token comment">/* Mitte bekommt 2mal so viel Platz wie die Ränder */</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>So sollte man das tun.</p> <blockquote> <p>2.) Du legst mehr als drei Raster-Spalten an und kannst dann dem mittleren Bereich sagen, er soll sich über mehrere Raster-Spalten strecken. Da das ein klein wenig komplizierter ist, werde ich es hier vormachen:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Nun haben wir acht Spalten […] Auf diesen Spalten kannst du nun Deine Elemente anordnen.</p> <pre><code class="block language-css"> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header header header header header header"</span> <span class="token string">"nav nav main main main main infoBox infoBox"</span> <span class="token string">"footer footer footer footer footer footer footer footer"</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>So nicht. Dann kann man ja gleich bei einem Gridsystem wie dem von Bootstrap bleiben. </p> <p>Zum einen ist</p> <pre><code class="block language-css"><span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav main infoBox"</span> <span class="token string">"footer footer footer"</span><span class="token punctuation">;</span> </code></pre> <p>besser zu lesen.</p> <p>Noch wichtiger ist, dass es weitaus besser handhabbar und wartbar ist.</p> <p>Wenn nun der Hauptinhalt nicht doppelt, sondern dreimal so breit sein soll wie die beiden Randspalten? Das ist schnell geändert: <code>grid-template-columns: 1fr 3fr 1fr</code>. Bei deinem 8er-Grid wäre das gar nicht möglich.</p> <p>Wenn man in altem Spaltendenken verharrt, beraubt man sich selbt der Möglichkeiten, die CSS Grid bietet.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724429#m1724429 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-11T09:27:06Z 2018-06-11T09:27:06Z Eine frage an die Profis... <p>@@Rolf B</p> <blockquote> <p>Keep it simple.</p> </blockquote> <p>Das wäre Grid, nicht Flexbox.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724458#m1724458 marctrix self@mhis.de https://www.mhis.de 2018-06-11T13:18:23Z 2018-06-11T13:18:23Z @Marc <p>Hej liberwinter,</p> <blockquote> <p>Erste , vielll danks für deine bemühst !</p> </blockquote> <p>Keine Ursache!</p> <blockquote> <blockquote> <p>Ich hoffe, da hat man Euch beigebracht, dass man grid für ein Layout benutzt…</p> </blockquote> <p>Leider haben wir nichts bekommen... , der Kurs ist nur <a href="https://www.anjamorsch.de/test/html_online/" rel="nofollow noopener noreferrer">diese</a> Website bauen .Die lehrerin gibt uns nur die Parameter , die Rest , sollen uns selbst suchen.....als Information Quelle um diese Website zu bauen , ist eure Website , so , habe ich euch kennengelernt ... ☺️ .</p> </blockquote> <p>Dann kann sie so schlecht nicht sein </p> <p>Nein, keine Ahnung wie sie unterrichtet, aber das was sie gezeigt hat ist ja schon ziemlich anders als dein Versuch?!?</p> <p>Ist der Kurs denn schon vorbei? Oder kommt noch Hilfe?</p> <blockquote> <blockquote> <p>Hast du dir das mal auf Deinem Smartphone angesehen?</p> </blockquote> <p>Nein , ich habe keine Smartphone ☺️ , ich habe eine Billiger Mobiltelefon …</p> </blockquote> <p>Das ist gut! Es soll ja nicht nur in den neuesten High-End-Geräten gut aussehen!</p> <blockquote> <p>ich möchte jetzt versuche meine Website mit Css Grid layout bauen ,es wäre die möglichkeit wenn ich hilfe brauche , bei dir melden ???</p> </blockquote> <p>Lieber hier im Forum, dann können auch andere helfen und jeder kann es nachlesen.</p> <p>Übrigens falls du besser englisch sprichst und in dieser Hinsicht eine Ausbildung machen möchtest, schau dir doch mal die Kurse von dci an. Die Website ist zwar deutsch, es gibt aber englische Kurse. Am Anfang steht der <a href="https://digitalcareerinstitute.org/kurse/orientierungskurs/" rel="nofollow noopener noreferrer">Orientierungskurs</a>…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724462#m1724462 liebewinter htmlkurss@web.de 2018-06-11T13:59:36Z 2018-06-11T14:03:43Z @Marc <blockquote> <p>aber das was sie gezeigt hat ist ja schon ziemlich anders als dein Versuch?!?</p> </blockquote> <p>ja , weil was wir lernen ist bauen <a href="https://www.anjamorsch.de/test/html_online/" rel="nofollow noopener noreferrer">diese Website</a> was ich machen möchte ist eine Website für mich ....ich möchte eine Website die über Linux sprechen um mit Werbung ein Bisschen Geld zu verdinen ☺️</p> <blockquote> <p>Ist der Kurs denn schon vorbei? Oder kommt noch Hilfe?</p> </blockquote> <p>noch nicht , der Kurs ist Online ,wir besuchen keine Unterricht ,wir machen alles zu Hause , der Kurs hat am 17 letzte Monat angefang , der Kurs dauert drei Monate aber ich versuche diese Woche zu beenden ....</p> <blockquote> <p>Übrigens falls du besser englisch sprichst und in dieser Hinsicht eine Ausbildung machen möchtest, schau dir doch mal die Kurse von dci an. Die Website ist zwar deutsch, es gibt aber englische Kurse. Am Anfang steht der Orientierungskurs…</p> </blockquote> <p>wie frühr gesagt habe , ich möchte nur meine Website bauen ...das probleme die habe viel drück von Arbeitsamt und Jobcenter und habe nicht viel zeit , deshalb möchte ich wie schneller möglick meine Website zu bauen.…</p> <p>Jetzt versuche mit deine Bespiel und <a href="http://maddesigns.de/css-grid-layout-2764.html" rel="noopener noreferrer">diese</a> meine Website bauen , bei deine habe schwierigkeit die</p> <p><code>body > header { grid-column: 1 / span 3; grid-row: 2 / span 3; background-color: gray; } </code></p> <p>großer zu bauen , bei die andere Beispiel , bekommen keine Probleme , Vielleicht weil er mit <strong>Div</strong> gebaut wurde ??</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724473#m1724473 marctrix self@mhis.de https://www.mhis.de 2018-06-11T14:45:29Z 2018-06-11T14:45:29Z @Marc <p>Hej liberwinter,</p> <blockquote> <p>was ich machen möchte ist eine Website für mich ....ich möchte eine Website die über Linux sprechen um mit Werbung ein Bisschen Geld zu verdinen ☺️</p> </blockquote> <p>Oh, das wird nicht einfach. Die Konkurrenz ist groß. Aber ich will dich nicht abhalten.</p> <blockquote> <blockquote> <p>Ist der Kurs denn schon vorbei? Oder kommt noch Hilfe?</p> </blockquote> <p>noch nicht , der Kurs ist Online ,wir besuchen keine Unterricht ,wir machen alles zu Hause , der Kurs hat am 17 letzte Monat angefang , der Kurs dauert drei Monate aber ich versuche diese Woche zu beenden ....</p> </blockquote> <p>Dann würde ich trotzdem dort auch mal nachfragen. Kostet doch sicher Geld, dann müssen auch Fragen beantwortet werden. Aber ich mache natürlich auch weiter mit dir!</p> <blockquote> <blockquote> <p>Übrigens falls du besser englisch sprichst und in dieser Hinsicht eine Ausbildung machen möchtest, schau dir doch mal die Kurse von dci an. Die Website ist zwar deutsch, es gibt aber englische Kurse. Am Anfang steht der Orientierungskurs…</p> </blockquote> <p>wie frühr gesagt habe , ich möchte nur meine Website bauen ...das probleme die habe viel drück von Arbeitsamt und Jobcenter und habe nicht viel zeit</p> </blockquote> <p>Die Kosten werden meines Wissens nach mindestens teilweise von den Jobcentern übernommen und in Absprache mit den Jobcentern durchgeführt</p> <blockquote> <p>Jetzt versuche mit deine Bespiel und <a href="http://maddesigns.de/css-grid-layout-2764.html" rel="noopener noreferrer">diese</a> meine Website bauen , bei deine habe schwierigkeit die</p> <p><code>body > header { grid-column: 1 / span 3; grid-row: 2 / span 3; background-color: gray; } </code></p> <p>großer zu bauen , bei die andere Beispiel , bekommen keine Probleme , Vielleicht weil er mit <strong>Div</strong> gebaut wurde ??</p> </blockquote> <p>Ja klar, Body > header wählt ja kein div, sondern ein header-Element, das sich direkt im body befindet.</p> <p>Wenn du mit Werbung Geld verdienen mochtest, musst du gut in Suchmaschinen gefunden werden. Da ist eine gute Auszeichnung (neben vielen anderen Dingen) von Vorteil!</p> <p>Nur mit div wird es schwerer…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724476#m1724476 liebewinter htmlkurss@web.de 2018-06-11T15:09:51Z 2018-06-11T15:27:10Z @Marc <blockquote> <p>Dann würde ich trotzdem dort auch mal nachfragen. Kostet doch sicher Geld, dann müssen auch Fragen beantwortet werden. Aber ich mache natürlich auch weiter mit dir!</p> </blockquote> <p>ich habe schon die Lehrerin gefragt das ist was sie mich antgewortet hat....</p> <p><em>Sie haben an der VHSTK den Online-Kurs HTML und CSS gebucht. Dabei besteht meine Leistung darin, Sie für die Dauer dieses Kurses zu betreuen und Ihnen die Fragen, die im Zusammenhang mit dem Kurs stehen zu beantworten. Nicht enhalten in der Leisung ist meine Unterstützung oder Zuarbeit beim Aufbau Ihrer eigenen Website.</em></p> <blockquote> <p>Die Kosten werden meines Wissens nach mindestens teilweise von den Jobcentern übernommen und in Absprache mit den Jobcentern durchgeführt</p> </blockquote> <p>ich möchte raus von ihnen , nur bekomme streß von ihnen.....</p> <blockquote> <p>Ja klar, Body > header wählt ja kein div, sondern ein header-Element, das sich direkt im body befindet.</p> </blockquote> <p>Deshalb habe bei https://stackoverflow.com , <strong>-1 bekomme...</strong> , ich habe gefragt wie kann ein Bild mit CSS Grid ohne div postet...</p> <p>Mit Grid ist Besser arbeite mit oder ohne div ???</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724485#m1724485 Rolf B 2018-06-11T17:16:29Z 2018-06-11T17:16:29Z @Marc <p>Hallo Marc,</p> <p>danke für die Unterstützung :)</p> <p>Hallo liebewinter,</p> <p>bei Stackoverflow kann es schnell ein -1 geben, wenn jemand glaubt, dass die Frage blöd ist. Ärgere Dich nicht.</p> <p>Die Lehrerin kann ich aber auch verstehen. Wenn sie jedem Schüler bei der eigenen Webseite hilft, dann macht sie bald nichts anderes mehr. Wir bei SelfHTML können auch nicht deine Webseite für dich schreiben; wir können Dir erste Schritte zeigen, wir können dir sagen wo Du im Netz Wissen findest, und wir können konkrete Fragen beantworten.</p> <p>Du kannst grid mit vielen Elementen benutzen. Du musst im CSS nur sagen, wofür die Grid-Eigenschaften angewendet werden sollen.</p> <p>Das hier:</p> <pre><code class="block language-css"><span class="token selector">body > header</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / span 3<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>ist eine CSS <strong>Regel</strong>. Sie besteht aus einem Selektor <code>body > header</code>, der auswählt, für welche Elemente sie gilt. Innerhalb des { } stehen die <strong>Eigenschaften</strong>, die für die gewählten Elemente benutzt werden sollen.</p> <p>Wenn Du <code><div class="header"></code> verwendest, brauchst Du einen anderen Selektor:</p> <pre><code class="block language-css"><span class="token selector">.header</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / span 3<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das ist alles. Es ist für grid egal ob du <code><div class="header"></code> oder <code><header></code> schreibst. Aber für "gutes HTML" ist es besser, semantische Elemente zu verwenden.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724539#m1724539 liebewinter htmlkurss@web.de 2018-06-12T11:37:34Z 2018-06-12T11:37:34Z @Marc <blockquote> <p>bei Stackoverflow kann es schnell ein -1 geben, wenn jemand glaubt, dass die Frage blöd ist. Ärgere Dich nicht.</p> </blockquote> <p>ich weiss...ich have einige erfahrung mit ihnen gehabt....ich habe -3 bekomme....aber Heute hat jemand woran meine probleme war , und danke er/sie , habe meine Probleme gelösst....</p> <blockquote> <p>Die Lehrerin kann ich aber auch verstehen. Wenn sie jedem Schüler bei der eigenen Webseite hilft, dann macht sie bald nichts anderes mehr.</p> </blockquote> <p>ich weiss , aber hilfe machmal für sie es wäre nicht so "problematisch"..., ich habe auch gesagt an die anderen schuler wenn jemand mich fragt möchtet , kann das machen , und du kannst sehe wie meine kenntnisse ist....</p> <blockquote> <p>Wir bei SelfHTML können auch nicht deine Webseite für dich schreiben; wir können Dir erste Schritte zeigen, wir können dir sagen wo Du im Netz Wissen findest, und wir können konkrete Fragen beantworten.</p> </blockquote> <p>Hast du Recht , ich bin die Meinung wenn jemand etwas lernen möchtet , er/sie soll sich selbst alleine 80% machen... , Erste samen kenntnisse und dann das Projekt zu Realisieren... . jetz habe meine Bild auf head <a href="https://codepen.io/mezb/pen/gKWWZL" rel="noopener noreferrer">gepostet</a> , weil ich die Kostelost habe , könnte nicht das Bild upload… . Um euch nicht alle fragen zu stellen , versuche jetzt mehr über css-grid zu lernen..</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724547#m1724547 marctrix self@mhis.de https://www.mhis.de 2018-06-12T13:31:14Z 2018-06-12T13:31:14Z @Marc <p>Hej liberwinter,</p> <blockquote> <p>jetz habe meine Bild auf head <a href="https://codepen.io/mezb/pen/gKWWZL" rel="noopener noreferrer">gepostet</a> , weil ich die Kostelost habe , könnte nicht das Bild upload… . Um euch nicht alle fragen zu stellen , versuche jetzt mehr über css-grid zu lernen..</p> </blockquote> <p>Mach es dir doch nicht so schwer. Du kannst doch <a href="https://codepen.io/haunschild/pen/OEpRjL" rel="noopener noreferrer">meinen pen</a> als Anfang nehmen.</p> <p>Ich bin ja nicht so sehr für fertigen Code, aber ich habe ja alles detailliert erklärt und gerade angesichts des komplexen grid-Moduls halte ich Beispiele für eine gute Lehrmethode. Siehe auch <a href="https://gridbyexample.com" rel="nofollow noopener noreferrer">grid by example.</a> Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724552#m1724552 liebewinter htmlkurss@web.de 2018-06-12T17:12:26Z 2018-06-12T17:25:51Z @Marc <p>Danke für deine hilfe ! , jetzt brauche noch nicht deine ....</p> <p>ich auf deine Codec noch eine ,header2 ansetzen ...auf codepen.io <a href="https://codepen.io/mezb/pen/KemBOj" rel="noopener noreferrer">sehen kannst</a> . für smartphone und tablets das hat keine wirkung ... ich Hoffe... .Ich möchte deine benutze als Muster.....</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724565#m1724565 marctrix self@mhis.de https://www.mhis.de 2018-06-12T19:59:27Z 2018-06-12T19:59:27Z @Marc <p>Hej ,</p> <blockquote> <p>Danke für deine hilfe ! , jetzt brauche noch nicht deine ....</p> <p>ich auf deine Codec noch eine ,header2 ansetzen ...auf codepen.io <a href="https://codepen.io/mezb/pen/KemBOj" rel="noopener noreferrer">sehen kannst</a> . für smartphone und tablets das hat keine wirkung ... ich Hoffe... .Ich möchte deine benutze als Muster.....</p> </blockquote> <p>Das funktioniert so leider nicht <code>Header</code> ist ein html-Element, <code>header2</code> gibt es nicht. Was möchtest du denn mit dem header2 machen? Ich meine, was soll da rein?</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724566#m1724566 liebewinter htmlkurss@web.de 2018-06-12T20:21:27Z 2018-06-12T20:37:58Z @Marc <blockquote> <p>Was möchtest du denn mit dem header2 machen? Ich meine, was soll da rein?</p> </blockquote> <p>ich möchte Links anlegen , wie Beispiel Home , Über mich ,.... . Aber für meinen anderen Links ,ich möchte eine Linke Spalte benutze.....</p> <p>noch eine andere frage..., wenn ich möchte ein Bild auf head postet , mache ich wie bei div ???</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/home/me/Document/HTML/work/my2.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <p>ich bedanke mich für deine Unterstürz!!</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724581#m1724581 marctrix self@mhis.de https://www.mhis.de 2018-06-13T05:56:16Z 2018-06-13T05:56:32Z @Marc <p>Hej liberwinter,</p> <blockquote> <blockquote> <p>Was möchtest du denn mit dem header2 machen? Ich meine, was soll da rein?</p> </blockquote> <p>ich möchte Links anlegen , wie Beispiel Home , Über mich ,.... .</p> </blockquote> <p>Das klingt nach der Hauptnavigation. Die sollte in nav.</p> <blockquote> <p>Aber für meinen anderen Links ,ich möchte eine Linke Spalte benutze.....</p> </blockquote> <p>Dann wären weitere Links, die als nette Ergänzung zum Haupttext mitgegeben würden in ein <code>aside</code> zu verpacken.</p> <p>Um die beiden Kästen (einer mit Links, einer vermutlich mit Texten) voneinander zu unterscheiden, wären IDs sinnvoll.</p> <p>Ich habe das in meinem <a href="https://codepen.io/haunschild/pen/OEpRjL?editors=1100" rel="noopener noreferrer">Codepen-Beispiel</a> mal ergänzt.</p> <blockquote> <p>noch eine andere frage..., wenn ich möchte ein Bild auf head postet , mache ich wie bei div ???</p> </blockquote> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/home/me/Document/HTML/work/my2.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> </blockquote> <p>Ja, genau. <code>head</code> und <code>div</code> sind beide Blocklevel-Elemente und verhalten sich optisch gleich. Daher können sie auch auf dieselbe Weise gefüllt werden.</p> <blockquote> <p>ich bedanke mich für deine Unterstürz!!</p> </blockquote> <p>Gerne!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724584#m1724584 MudGuard http://www.andreas-waechter.de/ 2018-06-13T06:33:45Z 2018-06-13T06:33:45Z @Marc <p>Hi,</p> <blockquote> <p>Ja, genau. <code>head</code> und <code>div</code> sind beide Blocklevel-Elemente und verhalten sich optisch gleich.</p> </blockquote> <p>Da melde ich mal starke Zweifel an. <code>head</code> ist üblicherweise unsichtbar, während <code>div</code> sichtbar ist.</p> <p>Verwechselst Du <code>head</code> und <code>header</code>?</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724586#m1724586 Rolf B 2018-06-13T07:17:14Z 2018-06-13T07:17:14Z @Marc <p>Hallo liebewinter (oder Joseba :) ),</p> <blockquote> <p><img style="max-width: 100%;height: auto;" src="/home/me/Document/HTML/work/my2.png" alt="header" /></p> </blockquote> <p>Das ist nur eine Zeile, aber dazu kann man viel sagen:</p> <ol> <li>max-width und height stellst Du besser über die CSS Datei ein. Das style-Attribut kann man verwenden, wenn man mit JavaScript den Seiteninhalt ändert (aber class ist besser).</li> <li>Wenn das Bild den <header> Bereich ausfüllen soll, dann ist es vielleicht besser ein background-image (CSS) statt ein <img> Element.</li> <li>Die src-Angabe sieht falsch aus. Das ist ein absoluter Pfad, und er gilt auf deinem eigenen Computer. Wenn das Projekt an einen anderen Ort kopiert wird, oder wenn die Seite über einen Webserver ausgeliefert wird, funktioniert das nicht mehr. Man soll eigene Ressourcen immer mit relativen Pfaden laden. Relativer Pfad bedeutet: Der Browser beginnt bei dem Ordner, in dem die Datei steht, die die Ressource laden will. Der Unterschied zwischen absolutem Pfad und relativem Pfad ist das '/' zu Beginn.<br> UND es ist gut, wenn Ressourcen in eigenen Ordnern stehen.<br> Wenn die HTML Datei im Verzeichnis /home/me/Document/HTML/work steht, und das Bild in /home/me/Document/HTML/work/images, dann kannst Du es mit <code><img src="images/my2.png" alt="header"></code> laden. Wenn du das Bild mit CSS als Hintergrundbild lädst, und die CSS Datei in <code>/home/me/Document/HTML/work/css</code> gespeichert ist, dann würdest Du<br> <code>header { background-image: url(../images/my2.png); }</code> schreiben (und noch ein paar background- Eigenschaften mehr, damit es richtig angezeigt wird).<br> Ein <code>..</code> in einem Pfad bedeutet: Gehe im Verzeichnis-Baum eine Stufe nach oben.</li> </ol> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724608#m1724608 liebewinter htmlkurss@web.de 2018-06-13T11:00:16Z 2018-06-13T11:00:16Z @Marc <p>ich habe meine Bild in css zu stellen... meine <a href="https://codepen.io/mezb/pen/qKjroP" rel="noopener noreferrer">code</a></p> <pre><code class="block language-css"><span class="token selector">.a</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / span 4<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / span 2<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"/home/me/Document/HTML/work/my2.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat-x<span class="token punctuation">;</span> <span class="token property">background-attachment</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> </code></pre> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724610#m1724610 liebewinter htmlkurss@web.de 2018-06-13T11:49:48Z 2018-06-13T11:49:48Z @Marc <p>eine frage.... für body in html , ist besser benutze :</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>nav<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>externalLinks<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Externl Links<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>furtherInformation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Further Information<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>Dieser Pen ist eine Illustration von <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724420#m1724420<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erklärungen im SELFHTML-Forum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> </code></pre> <p>oder mit div</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>nav<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>aside<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box d<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box e<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>aside<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box F<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724618#m1724618 liebewinter htmlkurss@web.de 2018-06-13T13:30:15Z 2018-06-13T13:33:41Z @Marc <p>Wenn versuche mit <a href="https://codepen.io/mezb/pen/qKjroP" rel="noopener noreferrer">div</a> wie du deine <strong>Codepen-Beispiel</strong> hast , bekomme diese Screenshot.…</p> <p><a href="/images/a9aebbba-53a2-4221-84cd-be47e0d573ed.png" rel="noopener noreferrer"><img src="/images/a9aebbba-53a2-4221-84cd-be47e0d573ed.png?size=medium" alt="" loading="lazy"></a></p> <p>wenn versuche mit <strong>.wrapper</strong> einiger Parameter geben , verändert ganze Browser .......</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724585#m1724585 marctrix self@mhis.de https://www.mhis.de 2018-06-13T06:42:36Z 2018-06-13T06:42:36Z @Marc <p>Hej MudGuard,</p> <blockquote> <p>Hi,</p> <blockquote> <p>Ja, genau. <code>head</code> und <code>div</code> sind beide Blocklevel-Elemente und verhalten sich optisch gleich.</p> </blockquote> <p>Da melde ich mal starke Zweifel an. <code>head</code> ist üblicherweise unsichtbar, während <code>div</code> sichtbar ist.</p> <p>Verwechselst Du <code>head</code> und <code>header</code>?</p> </blockquote> <p>Ja, ständig! . Danke für die Korrektur!</p> <p>Es muss <code>header</code> heißen innerhalb von <code>body</code>!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724588#m1724588 marctrix self@mhis.de https://www.mhis.de 2018-06-13T07:21:35Z 2018-06-13T07:21:35Z @Marc <p>Hej Rolf,</p> <blockquote> <blockquote> <p><img style="max-width: 100%;height: auto;" src="/home/me/Document/HTML/work/my2.png" alt="header" /></p> </blockquote> <p>Das ist nur eine Zeile, aber dazu kann man viel sagen:</p> </blockquote> <p>Alles richtig! Und eine Ergänzung: ob Hintergrund-Bild mittels CSS oder ein Bild im HTML hängt davon ab, ob das Bild inhaltlich bedeutend ist oder nur eine Schmuckgrafik.</p> <p>CSS ist für Schmuck/Dekoration zuständig, Inhalte gehören ins HTML.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724598#m1724598 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-13T09:24:44Z 2018-06-13T09:24:44Z @Marc <p>@@Rolf B</p> <blockquote> <p>max-width und height stellst Du besser über die CSS Datei ein. Das style-Attribut kann man verwenden, wenn man mit JavaScript den Seiteninhalt ändert</p> </blockquote> <p>?? Was hat die Verwendung des <code>style</code>-Attributs mit JavaScript zu tun?</p> <p>Und es riecht nach <s>4711</s> <a href="https://forum.selfhtml.org/cites/1711" rel="noopener noreferrer">1711</a>.</p> <blockquote> <p>(aber class ist besser).</p> </blockquote> <p>Oder ID. Oder irgendwas anderes, wie man das betreffende Element selektieren kann.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724609#m1724609 liebewinter htmlkurss@web.de 2018-06-13T11:21:12Z 2018-06-13T11:21:12Z @Marc <blockquote> <p>max-width und height stellst Du besser über die CSS Datei ein. Das style-Attribut kann man verwenden, wenn man mit JavaScript den Seiteninhalt ändert (aber class ist besser).</p> </blockquote> <p>ich habe versuche mit <strong>padding: 50px;</strong> , weil max-width und height nicht funzioniert…</p> <blockquote> <p>Wenn das Bild den <header> Bereich ausfüllen soll, dann ist es vielleicht besser ein background-image (CSS) statt ein <img> Element.</p> </blockquote> <p>danke , das mache ich.... meinen ganze <a href="https://codepen.io/mezb/pen/qKjroP" rel="noopener noreferrer">Codec</a> :</p> <pre><code class="block language-css"><span class="token selector">.a</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / span 4<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 1<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../work/my2.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat-x<span class="token punctuation">;</span> <span class="token property">background-attachment</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>wenn ich versuche mit <strong>alt="header"</strong> auf <strong>header { background-image: url(../images/my2.png); }</strong> das Bild wird nicht gezeigt.....</p> <blockquote> <p>schreiben (und noch ein paar background- Eigenschaften mehr, damit es richtig angezeigt wird).</p> </blockquote> <p>Kannst Bitte einiger Beispielen geben , danke</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724615#m1724615 Rolf B 2018-06-13T12:43:01Z 2018-06-13T12:43:01Z @Marc <p>Hallo Gunnar,</p> <blockquote> <p>Was hat die Verwendung des style-Attributs mit JavaScript zu tun?</p> </blockquote> <p>Wenn ich per Script im DOM rummache und Elemente hinzufüge, kann es einfacher und robuster sein, dem style direkt zu setzen (die Betonung liegt auf <strong>kann</strong>). Vor allem, wenn es Bibliotheks-Code ist, der keine Abhängigkeit zu einer CSS Datei haben soll.</p> <p>Wenn ich HTML von Hand schreibe, verzichte ich auf style und regele alles über CSS Dateien.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724623#m1724623 marctrix self@mhis.de https://www.mhis.de 2018-06-13T14:02:18Z 2018-06-13T14:02:18Z @Marc <p>Hej liebewinter,</p> <blockquote> <p>ich habe meine Bild in css zu stellen... meine <a href="https://codepen.io/mezb/pen/qKjroP" rel="noopener noreferrer">code</a></p> </blockquote> <p>Und? Funktioniert es?</p> <p>Vergleiche doch mal deinen Code mit meinem Code.</p> <p>Da gibt es mehr Unterschiede als Gemeinsamkeiten…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724624#m1724624 marctrix self@mhis.de https://www.mhis.de 2018-06-13T14:05:28Z 2018-06-13T14:05:28Z @Marc <p>Hej ,</p> <blockquote> <p>eine frage.... für body in html , ist besser benutze :</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>nav<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>externalLinks<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Externl Links<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>furtherInformation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Further Information<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>Dieser Pen ist eine Illustration von <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724420#m1724420<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erklärungen im SELFHTML-Forum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Besser!</p> <blockquote> <p>oder mit div</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>nav<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>aside<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box d<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box e<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>aside<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box F<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Schlecht!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724619#m1724619 JürgenB https://www.j-berkemeier.de 2018-06-13T13:49:49Z 2018-06-13T13:49:49Z @Marc <p>Hallo Rolf,</p> <blockquote> <blockquote> <p>Was hat die Verwendung des style-Attributs mit JavaScript zu tun?</p> </blockquote> <p>Wenn ich per Script im DOM rummache und Elemente hinzufüge, kann es einfacher und robuster sein, dem style direkt zu setzen (die Betonung liegt auf <strong>kann</strong>). Vor allem, wenn es Bibliotheks-Code ist, der keine Abhängigkeit zu einer CSS Datei haben soll.</p> </blockquote> <p>so mache ich es auch. Und wenn die Regeln dann zu komplex werden, kann man ja auch das Stylesheet per JS erstellen, wie z.B. beim <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Tabellen_dynamisch_sortieren#Das_Javascript" rel="nofollow noopener noreferrer">Tabellensortierer</a>.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724625#m1724625 liebewinter htmlkurss@web.de 2018-06-13T14:15:41Z 2018-06-13T14:15:41Z @Marc <p>Ja , das Bild kommt...</p> <blockquote> <p>Vergleiche doch mal deinen Code mit meinem Code.Da gibt es mehr Unterschiede als Gemeinsamkeiten…</p> </blockquote> <p>weil ich habe mit div versucht....</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724627#m1724627 liebewinter htmlkurss@web.de 2018-06-13T14:21:42Z 2018-06-13T14:21:42Z @Marc <p>und wie kann bei <strong><nav>nav</nav></strong> meine <strong>nav und ul</strong> bauen ? , sorry aber mit dieser Methode habe nie gearbeitet.…</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724626#m1724626 Tabellenkalk 2018-06-13T14:19:00Z 2018-06-13T14:19:00Z @Marc <p>Hallo,</p> <blockquote> <p>weil ich habe mit div versucht....</p> </blockquote> <p>Warum? Schon in der <a href="https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724343#m1724343" rel="noopener noreferrer">ersten Antwort</a> ist dir davon abgeraten worden.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724635#m1724635 liebewinter htmlkurss@web.de 2018-06-13T16:47:57Z 2018-06-13T16:47:57Z @Marc <p>danke , ich habe gemacht..</p> <p>html Codec:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>me<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/nav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Ich<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> </code></pre> <p>css Codec :</p> <pre><code class="block language-css"><span class="token selector">.me</span> <span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #EBF5E7<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.me a</span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0px 8px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul</span> <span class="token punctuation">{</span><span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724628#m1724628 Tabellenkalk 2018-06-13T14:29:01Z 2018-06-13T14:29:01Z @Marc <p>Hallo,</p> <blockquote> <p>und wie kann bei <strong><nav>nav</nav></strong> meine <strong>nav und ul</strong> bauen ? , sorry aber mit dieser Methode habe nie gearbeitet.…</p> </blockquote> <p>die <a href="https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724343#m1724343" rel="noopener noreferrer">erste Antwort</a>, die du bekamst, enthält einen Link in dem diese Frage beantwortet wird.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724631#m1724631 marctrix self@mhis.de https://www.mhis.de 2018-06-13T14:58:48Z 2018-06-13T14:58:48Z @Marc <p>Hej Tabellenkalk,</p> <blockquote> <blockquote> <p>und wie kann bei <strong><nav>nav</nav></strong> meine <strong>nav und ul</strong> bauen ? , sorry aber mit dieser Methode habe nie gearbeitet.…</p> </blockquote> </blockquote> <blockquote> <p>die <a href="https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724343#m1724343" rel="noopener noreferrer">erste Antwort</a>, die du bekamst, enthält einen Link in dem diese Frage beantwortet wird.</p> </blockquote> <p>Außerdem: du hast von mir doch ein funktionierendes Beispiel. Probiere doch damit mal ein bisschen was aus. Pack in das <code><nav></nav></code> doch mal einefach eine <code>ul</code> und guck was passiert.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724632#m1724632 Tabellenkalk 2018-06-13T15:03:17Z 2018-06-13T15:04:44Z @Marc <p>Hallo Marc,</p> <blockquote> <p>Hej Tabellenkalk,<br> […]<br> Außerdem: du […]</p> </blockquote> <p>warum erzählst du mir das?</p> <p>Hallo liebewinter,</p> <p>ich glaube, Marc versucht mit dir zu reden…</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724637#m1724637 liebewinter htmlkurss@web.de 2018-06-13T17:06:35Z 2018-06-13T17:06:35Z @Marc <p>danke , ich schon <a href="https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724635#m1724635" rel="noopener noreferrer">gemacht</a>.....</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724633#m1724633 marctrix self@mhis.de https://www.mhis.de 2018-06-13T15:05:03Z 2018-06-13T15:05:03Z @Marc <p>Hej Tabellenkalk,</p> <blockquote> <p>Hallo Marc,</p> <blockquote> <p>Hej Tabellenkalk, […] Außerdem: du […]</p> </blockquote> <p>warum erzählst du mir das?</p> <p>Hallo liebewinter,</p> <p>ich glaube, Marc versucht mit dir zu reden…</p> </blockquote> <p>Ja </p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724638#m1724638 marctrix self@mhis.de https://www.mhis.de 2018-06-13T17:33:41Z 2018-06-13T17:34:36Z @Marc <p>Hej ,</p> <blockquote> <p>danke , ich habe gemacht..</p> </blockquote> <p>Und? Klappt, oder? </p> <p>Aber es geht auch so (ohne Klasse):</p> <blockquote> <p>html Codec:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/nav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Ich<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> </code></pre> <p>css Codec :</p> <pre><code class="block language-css"><span class="token selector">nav</span><span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #EBF5E7<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav a</span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0px 8px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* hier solltest du noch "nav" ergänzen, damit nicht alle listen betroffen sind */</span> <span class="token selector">nav ul</span> <span class="token punctuation">{</span><span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">nav li</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> </blockquote> <p>Voilá!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724646#m1724646 Rolf B 2018-06-13T18:18:11Z 2018-06-13T18:18:11Z @Marc <p>Hallo ,</p> <p>in deinem Pen ist noch viel durcheinander.</p> <ul> <li>du musst <a> mit einem </a> beenden. Die fehlenden </a> zerreißen das ganze Layout.</li> <li>ein Browser zeigt die <li> in einem <ul> untereinander an. Du hast overflow:hidden und height:25px, deswegen verschwinden die <li>. Du verwendest für die <a> <code>float:left</code> um das zu ändern, aber das ist nicht die Lösung. Gib den li ein <code>display:inline-block</code>, dann erscheinen sie nebeneinander. Im <ul> brauchst Du dann kein height und kein overflow:hidden mehr.</li> <li>line-height: Das funktioniert nicht so wie Du denkst. Die 10% für das <a> haben keine Wirkung. line-height ist nicht ganz einfach zu verstehen; unser Wiki erklärt zu wenig dazu.</li> </ul> <p>Deine Definition für das Grid musst Du noch verbessern.</p> <ul> <li>Du verwendest eine @media-Regel, um das Grid-Layout zu ändern wenn der Bildschirm breit genug ist. Im ersten Teil (vor der @media Regel) fehlt ein Platz für linkBox</li> <li>Verschiebe <code>grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;</code> aus der @media-Regel in die allgemeine body-Regel. Sonst hast Du bei schmalen Bildschirmen keine Spalten mehr festgelegt</li> </ul> <p>Was Du tun KANNST, aber nicht MUSST, ist dies: die Grid-Definition kann man einfacher machen. Du hast 8 Spalten angegeben, alle gleich breit. In den areas musst Du deswegen viel schreiben. Du hast aber eigentlich nur 3 Spalten: Links, Mitte, Rechts. Das kann man auch so bauen:</p> <pre><code class="block language-css"><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 2fr 1fr<span class="token punctuation">;</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav nav nav "</span> <span class="token string">"linkBox main infoBox"</span> <span class="token string">"footer footer footer "</span><span class="token punctuation">;</span> </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724641#m1724641 liebewinter htmlkurss@web.de 2018-06-13T17:57:33Z 2018-06-13T17:57:33Z @Marc <p>Viellllllllll Danke!! , hier wie jetzt meine Website siehst ... ich weiss ich muss viel mehr machen ...aber lansannnnn anfang forme zu nehmen...<a href="/images/c2899c01-1b41-40ee-9a34-8af340201f8c.png" rel="noopener noreferrer"><img src="/images/c2899c01-1b41-40ee-9a34-8af340201f8c.png?size=medium" alt="" loading="lazy"></a></p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724643#m1724643 marctrix self@mhis.de https://www.mhis.de 2018-06-13T18:04:33Z 2018-06-13T18:04:33Z @Marc <p>Hej ,</p> <blockquote> <p>Viellllllllll Danke!! , hier wie jetzt meine Website siehst ... ich weiss ich muss viel mehr machen ...aber lansannnnn anfang forme zu nehmen…</p> </blockquote> <p>Meine Erläuterungen zum Thema grid sollten genau das erreichen: dass du einen Anfang hast. Befülle weiter die Kästen, versuche bei Problemen im Wiki Lösungen zu finden - und wenn das nicht reicht, freuen wir uns hier wieder von dir zu hören!</p> <p>Übung macht den Meister!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724651#m1724651 Tabellenkalk 2018-06-13T20:55:26Z 2018-06-13T20:55:26Z @Marc <p>Hallo,</p> <blockquote> <p><a href="/images/c2899c01-1b41-40ee-9a34-8af340201f8c.png" rel="noopener noreferrer"><img src="/images/c2899c01-1b41-40ee-9a34-8af340201f8c.png?size=medium" alt="" loading="lazy"></a></p> </blockquote> <p>Ich vermute, du hast den Text <a href="https://www.unendlich-viel-energie.de/erneuerbare-energie/biomasse2/" rel="nofollow noopener noreferrer">von hier</a>, hast du da Eine Erlaubnis eingeholt? Normalerweise nimmt man für den Entwurf einer Webseite nicht Text von Anderen, sondern sogenannten <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML-Einstieg/Kapitel2" rel="nofollow noopener noreferrer">Blindtext</a>.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724650#m1724650 liebewinter htmlkurss@web.de 2018-06-13T20:53:38Z 2018-06-13T20:53:38Z @Marc <p>Viel Dankt für deinen arbeitet ! , ich habe fast alles gemacht , wie du mir sagst …</p> <p>diese stück habe ich nicht verstande.…</p> <blockquote> <p>quDu verwendest eine @media-Regel, um das Grid-Layout zu ändern wenn der Bildschirm breit genug ist. Im ersten Teil (vor der @media Regel) fehlt ein Platz für linkBox te here</p> </blockquote> <p>Wenn du willst , kannst du <a href="https://codepen.io/mezb/pen/qKjroP" rel="noopener noreferrer">siehst</a> wie meine Website ist geworden...</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724652#m1724652 Rolf B 2018-06-13T21:19:00Z 2018-06-13T21:28:28Z @Marc <p>Hallo ,</p> <blockquote> <p>diese stück habe ich nicht verstande.…</p> </blockquote> <p>Ich meine folgendes: Du schreibst:</p> <pre><code class="block language-css"><span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav nav nav "</span> <span class="token string">"main main main "</span> <span class="token string">"infoBox infoBox infoBox"</span> <span class="token string">"footer footer footer "</span> </code></pre> <p>Da fehlt ein Eintrag für linkBox. In der Definition für @media screen (min-width:40em) ist einer drin. Wenn Du für linkBox keinen Platz festlegst, sucht sich das grid selbst einen aus.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724653#m1724653 marctrix self@mhis.de https://www.mhis.de 2018-06-13T21:21:05Z 2018-06-13T21:29:53Z @Marc <p>Hej ,</p> <blockquote> <p>Viel Dankt für deinen arbeitet ! , ich habe fast alles gemacht , wie du mir sagst …</p> <p>diese stück habe ich nicht verstande.…</p> <blockquote> <p>quDu verwendest eine @media-Regel, um das Grid-Layout zu ändern wenn der Bildschirm breit genug ist. Im ersten Teil (vor der @media Regel) fehlt ein Platz für linkBox te here</p> </blockquote> </blockquote> <p>Das verstehe ich auch nicht…</p> <blockquote> <p>Wenn du willst , kannst du <a href="https://codepen.io/mezb/pen/qKjroP" rel="noopener noreferrer">siehst</a> wie meine Website ist geworden...</p> </blockquote> <p>Wird immer besser.</p> <p>Aber schau dir noch mal genau das css an. Da sind Dinge drin, die nicht benötigt sind und auch noch allerhand Fehler.</p> <p>Ich finde gut, dass du versuchst, die Tipps umzusetzen, die wir dir hier geben.</p> <p>Aber dabei passieren manchmal auch Fehler.</p> <p>So hast du bei der ersten Grid-Platzierung Anführungszeichen vergessen.</p> <p>Das müsste so aussehen.</p> <pre><code class="block language-css"><span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header "</span> <span class="token string">"nav nav nav "</span> <span class="token string">"main main main "</span> <span class="token string">"infoBox infoBox infoBox "</span> <span class="token string">"footer footer footer "</span><span class="token punctuation">;</span> </code></pre> <p>Vergleiche das mal mit deinem css und versuche auch ansonsten aufzuräumen. Es macht beispielsweise keinen Sinn, einem Element erst zu sagen, es soll sich wie ein Blockelement verhaltne und dann zu sagen, es soll doch ein inline-Block sein... </p> <p>Auf jeden Fall bist du auf dem richtigen Weg!</p> <p>Nimm den Hinweis zum Copyright ernst, den <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> dir gegeben hat.</p> <p>Im <a href="https://www.unendlich-viel-energie.de/impressum" rel="nofollow noopener noreferrer">Impressum der Seite</a>, wo du den text her hast steht ausdrücklich: „<em>Eine Vervielfältigung oder Verwendung solcher Grafiken, Tondokumente, Videosequenzen und Texte in anderen elektronischen oder gedruckten Publikationen ist ohne ausdrückliche Zustimmung des Autors nicht gestattet.</em>“</p> <p><a href="https://www.bing.com/search?q=blind+text+generator&form=APIPA1&PC=APPD" rel="nofollow noopener noreferrer">Blindtext-generatoren</a> gibt es viele.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724658#m1724658 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-13T21:35:55Z 2018-06-16T10:47:35Z @Marc <p>@@Tabellenkalk</p> <blockquote> <p>Normalerweise nimmt man für den Entwurf einer Webseite nicht Text von Anderen, sondern sogenannten <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML-Einstieg/Kapitel2" rel="nofollow noopener noreferrer">Blindtext</a>.</p> </blockquote> <p>Ich nutze dafür üblicherweise die <a href="https://de.wikipedia.org/wiki/Allgemeine_Erkl%C3%A4rung_der_Menschenrechte" rel="nofollow noopener noreferrer">Allgemeine Erklärung der Menschenrechte</a>. Da wird doch niemand was dagegen haben, dass die immer wieder in Erinnerung gerufen wird?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724688#m1724688 liebewinter htmlkurss@web.de 2018-06-14T11:46:35Z 2018-06-14T11:46:35Z @Marc <p>gemacht....</p> <pre><code class="block language-css"><span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav nav nav"</span> <span class="token string">"linkBox linkBox linkBox"</span> <span class="token string">"main main main"</span> <span class="token string">"infoBox infoBox infoBox"</span> <span class="token string">"footer footer footer"</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 2fr 1f<span class="token punctuation">;</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav nav nav"</span> <span class="token string">"linkBox main infoBox"</span> <span class="token string">"footer footer footer"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724655#m1724655 Rolf B 2018-06-13T21:29:04Z 2018-06-13T21:29:04Z @Marc <p>Hallo marctrix,</p> <p>der Copyright-Hinweis war von Tabellenkalk :)</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724684#m1724684 liebewinter htmlkurss@web.de 2018-06-14T11:15:23Z 2018-06-14T11:29:46Z @Marc <p>ich habe gemacht wie du sagst , ich habe frühr die Anführungszeichen vergesen… , ich habe auch der Text verändert wie du <a href="https://codepen.io/mezb/pen/qKjroP" rel="noopener noreferrer">siehst kannst</a></p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ebf5d7<span class="token punctuation">;</span> <span class="token property">grid-gap</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 2fr 1fr<span class="token punctuation">;</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav nav nav"</span> <span class="token string">"main main main"</span> <span class="token string">"infoBox infoBox infoBox"</span> <span class="token string">"footer footer footer"</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 2fr 1f<span class="token punctuation">;</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav nav nav"</span> <span class="token string">"linkBox main infoBox"</span> <span class="token string">"footer footer footer"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>eine sache habe nicht gut verstande... ,warum beim Erste <strong>grid-template-areas:</strong> nicht <strong>linkBox</strong> geschrieben wurde ? , warum wird nicht gleich geschrieben wie bei <strong>@media screen and (min-width: 40em)</strong> ?</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724673#m1724673 Tabellenkalk 2018-06-14T07:04:02Z 2018-06-14T07:04:02Z OT: Menschenrechte <p>Hallo,</p> <blockquote> <p>Da wird doch niemand was dagegen haben, dass die immer wieder in Erinnerung gerufen wird?</p> </blockquote> <p><a href="http://www.spiegel.de/politik/ausland/syrien-deutschland-jagt-baschar-al-assads-folterknecht-per-haftbefehl-a-1211888.html" rel="nofollow noopener noreferrer">Jamil Hassan</a> vielleicht?</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724719#m1724719 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2018-06-14T18:27:29Z 2018-06-16T10:47:51Z @Marc <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Ich nutze dafür üblicherweise die <a href="https://de.wikipedia.org/wiki/Allgemeine_Erkl%C3%A4rung_der_Menschenrechte" rel="nofollow noopener noreferrer">Allgemeine Erklärung der Menschenrechte</a>. Da wird doch niemand was dagegen haben, dass die immer wieder in Erinnerung gerufen wird?</p> </blockquote> <p>Ich hatte da schon mal angefragt — keine Antwort.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724709#m1724709 marctrix self@mhis.de https://www.mhis.de 2018-06-14T15:10:54Z 2018-06-14T15:10:54Z @Marc <p>Hej ,</p> <blockquote> <p>ich habe gemacht wie du sagst , ich habe frühr die Anführungszeichen vergesen… , ich habe auch der Text verändert wie du <a href="https://codepen.io/mezb/pen/qKjroP" rel="noopener noreferrer">siehst kannst</a></p> <p>eine sache habe nicht gut verstande... ,warum beim Erste <strong>grid-template-areas:</strong> nicht <strong>linkBox</strong> geschrieben wurde ? , warum wird nicht gleich geschrieben wie bei <strong>@media screen and (min-width: 40em)</strong> ?</p> </blockquote> <p>Das ist ein Fehler, den du noch beheben musst </p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724722#m1724722 Rolf B 2018-06-14T19:00:16Z 2018-06-14T19:00:16Z @Marc <p>Hallo ,</p> <blockquote> <p>warum wird nicht gleich geschrieben wie bei @media screen and (min-width: 40em) ?</p> </blockquote> <p>Ich möchte jetzt nicht erklären, was Du schon weißt, darum frage ich erst einmal:</p> <p>Hast Du verstanden, warum man eine @media Abfrage macht?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724710#m1724710 marctrix self@mhis.de https://www.mhis.de 2018-06-14T15:11:53Z 2018-06-14T15:11:53Z @Marc <p>Hej libewinter,</p> <blockquote> <p>gemacht.…</p> </blockquote> <p>Schneller als meine Antwort </p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724713#m1724713 liebewinter htmlkurss@web.de 2018-06-14T16:59:53Z 2018-06-14T17:07:27Z @Marc <p>wie meine Website aussieht.. ich weiss...ich habe noch viel zu tun .. aber eine Sache ist sicher , ohne euch ich wäre vielllll mehr Zeit gebraucht ....</p> <p><a href="/images/b772d010-6212-49e1-84db-08e933beb465.png" rel="noopener noreferrer"><img src="/images/b772d010-6212-49e1-84db-08e933beb465.png?size=medium" alt="" loading="lazy"></a></p> <p>wenn jemand Interesse auf meine Codec ist...</p> <pre><code class="block language-html">body> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/nav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About Us<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>externalLinks<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Computer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>News<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>furtherInformation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>copry<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>My Website: Linux and More © 2018. All Rights Reserved.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img1<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://creativecommons.org/licenses/by-nc/4.0/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Creative Commons License<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>120px<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../Meine-web/CC-Lizenz.png<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> International License. Content of this site cannot be republished<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> either online or offline without our permissions. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ebf5d7<span class="token punctuation">;</span> <span class="token property">grid-gap</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 10% 72% 17%<span class="token punctuation">;</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav nav nav"</span> <span class="token string">"linkBox linkBox linkBox"</span> <span class="token string">"main main main"</span> <span class="token string">"infoBox infoBox infoBox"</span> <span class="token string">"footer footer footer"</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 10% 72% 17%<span class="token punctuation">;</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav nav nav"</span> <span class="token string">"linkBox main infoBox"</span> <span class="token string">"footer footer footer"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">body > header</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> header<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../Arbeit/meine2.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > nav</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> nav<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #d2f5c4<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > #externalLinks</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> linkBox<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #d2f3c6<span class="token punctuation">;</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > main</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> main<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eaf6e5<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > #furtherInformation</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> infoBox<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #d2f3c6<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > footer</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> footer<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #99ee7a<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Nav */</span> <span class="token selector">nav</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #d2f5c4<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 17px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav a</span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0px 8px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul</span> <span class="token punctuation">{</span><span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">nav li</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">}</span> <span class="token selector">a:hover</span><span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #a9c79d<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span> #746cc0<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* ExternalLinks */</span> <span class="token selector">#externalLinks a</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#externalLinks ul</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#externalLinks li</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">/ * Footer */ #copry</span> <span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#img1</span> <span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#copry a</span> <span class="token punctuation">{</span><span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#copry p</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724834#m1724834 liebewinter htmlkurss@web.de 2018-06-15T16:22:01Z 2018-06-15T16:25:56Z @Marc <p>Entschuldigung warum habe nicht frühr geantwortet , aber ich war bei Arbeit (ich arbeit Logistic , Reinigung,...)... .Wie habe verstande @media wird benutze für Tablets und Smartphone auch wenn habe nicht gut verstande ,<strong>media screen and (min-width: 40em)</strong> bedeutet etwas wie , wenn screen gleich oder kleins als 40em ist , zeigt....</p> <pre><code class="block language-css"> <span class="token string">"header header header"</span> <span class="token string">"nav nav nav"</span> <span class="token string">"linkBox main infoBox"</span> <span class="token string">"footer footer footer"</span><span class="token punctuation">;</span> </code></pre> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724837#m1724837 liebewinter htmlkurss@web.de 2018-06-15T16:52:01Z 2018-06-15T16:52:01Z @Marc <p>Entschuldigung warum habe nicht frühr geantwortet , aber ich war bei Arbeit (ich arbeit Logistic , Reinigung,...)... .Wie habe verstande @media wird benutze für Tablets und Smartphone auch wenn habe nicht gut verstande ,<strong>media screen and (min-width: 40em)</strong> bedeutet etwas wie , wenn screen gleich oder kleins als 40em ist , zeigt....</p> <pre><code class="block language-css"><span class="token string">"header header header"</span> <span class="token string">"nav nav nav"</span> <span class="token string">"linkBox main infoBox"</span> <span class="token string">"footer footer footer"</span><span class="token punctuation">;</span> </code></pre> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724835#m1724835 marctrix self@mhis.de https://www.mhis.de 2018-06-15T16:45:04Z 2018-06-15T16:45:04Z @Marc <p>Hej ,</p> <blockquote> <p><strong>media screen and (min-width: 40em)</strong> bedeutet etwas wie , wenn screen gleich oder kleins als 40em ist , zeigt.…</p> </blockquote> <p>Wenn er <strong>größer</strong> als 40em ist - d.h. die Anzeigefläche im Browser (Viewport) muss breiter sein als 40 mal der Buchstabe „m“.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724846#m1724846 Rolf B 2018-06-15T20:35:49Z 2018-06-15T20:35:49Z @Marc <p>Hallo liebewinter,</p> <blockquote> <p>benutze für Tablets und Smartphone</p> </blockquote> <p>Ok. Es wird benutzt, um für unterschiedliche Geräte unterschiedliche Einstellungen zu machen. Du schreibst</p> <pre><code class="block">@media BEDINGUNG { CSS REGELN } </code></pre> <p>Der Browser überprüft die Bedingung, und wenn sie wahr ist, dann gelten die CSS Regeln, die im @media Block stehen, ZUSÄTZLICH.</p> <p>Eine Bedingung kann prüfen, welcher Geräte-Typ es ist. Es gibt screen, print, speech und all. Speech ist für Sprachausgabe am Computer.</p> <p>Eine Bedingung kann auch prüfen, ob das Gerät eine bestimmte Eigenschaft hat. min-width: 40em bedeutet: Ist das Gerät mindestens 40em breit? Oder ob das Smartphone aufrecht (portrait) oder quer (landscape) gehalten wird. <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries" rel="nofollow noopener noreferrer">In unserem Wiki</a> und bei <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media" rel="nofollow noopener noreferrer">Mozilla</a> steht mehr dazu.</p> <p>Und man kann Bedingungen kombinieren. <code>screen and (min-width:40em)</code> ist wahr, wenn die Ausgabe auf den Bildschirm geht und das Anzeigefenster 40em breit ist.</p> <p>Wichtig ist, dass Du nicht Pixel prüfst <code class="bad">(min-width:600px)</code>, das gibt Probleme. Die Erklärung ist mir jetzt zu viel Arbeit .</p> <p>Deswegen steht im @media Block etwas anderes als vor dem Block. Man möchte ja, dass sich etwas ändert, wenn die @media Bedingung wahr ist. Man soll dabei der Idee "mobil zuerst" folgen, das heißt: man baut die Seite so, dass sie auf mobilen Geräten gut aussieht und ändert dann mit @media Abfragen das CSS so ab, dass sie auch auf großen Bildschirmen gut aussieht.</p> <p>Du brauchst kein Smartphone um eine min-width Abfrage zu testen. Mache einfach das Fenster vom Browser schmaler. Irgendwann schaltet er um.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724838#m1724838 liebewinter htmlkurss@web.de 2018-06-15T17:03:22Z 2018-06-15T17:03:22Z @Marc <p>Danke für deine antwort... ich dachte <strong>min.width:</strong> bedeutet kleins aber bedeutet minimun...ich habe Ein Bissen mit dem Browser gespielt und wird gezeigt wie der Codec...</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724849#m1724849 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-16T04:31:41Z 2018-06-16T04:31:41Z @Marc <p>@@Rolf B</p> <blockquote> <p>Speech ist für Sprachausgabe am Computer.</p> </blockquote> <p>Gibt es <em lang="en">user agents</em>, die auf <code class="language-css">@media speech</code> reagieren?</p> <blockquote> <p>Wichtig ist, dass Du nicht Pixel prüfst <code class="bad">(min-width:600px)</code>, das gibt Probleme. Die Erklärung ist mir jetzt zu viel Arbeit .</p> </blockquote> <p>Welche du dir sparen kannst; <a href="https://forum.selfhtml.org/self/2016/sep/7/das-wtf-zur-wochenmitte-simple-css-media-queries-generator/1675022#m1675022" rel="noopener noreferrer">das haben andere schon erklärt</a>.</p> <blockquote> <p>Du brauchst kein Smartphone um eine min-width Abfrage zu testen. Mache einfach das Fenster vom Browser schmaler.</p> </blockquote> <p>Oder nutze die Entwicklerwerkzeuge. Beispiel Firefox:</p> <p><a href="/images/fb6f4f4d-d5b5-4d7d-a77a-1ab91d2c8f5c.png" rel="noopener noreferrer"><img src="/images/fb6f4f4d-d5b5-4d7d-a77a-1ab91d2c8f5c.png?size=medium" alt="" loading="lazy"></a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724856#m1724856 marctrix self@mhis.de https://www.mhis.de 2018-06-16T08:05:56Z 2018-06-16T08:05:56Z Eine frage an die Profis... <p>Hej Gunnar,</p> <blockquote> <p>@@marctrix</p> <blockquote> <pre><code class="block language-css"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 2fr 1fr<span class="token punctuation">;</span> <span class="token comment">/* Mitte bekommt 2mal so viel Platz wie die Ränder */</span> </code></pre> </blockquote> <p>So sollte man das tun.</p> </blockquote> <p>Das stimmt. Ich würde aber das andere gerne auch noch erklären. </p> <blockquote> <p>So nicht. Dann kann man ja gleich bei einem Gridsystem wie dem von Bootstrap bleiben. </p> </blockquote> <p>Ein Gridsystem muss nicht unsinnig sein. Die acht Spalten hier sind lediglich dem Schachbrett geschuldet.</p> <p>Hier geht es um Erklärung, nicht um die Umsetzung eines bekannten Layouts. Wie viele Spalten für lesende nötig sind, wissen wir gar nicht.</p> <blockquote> <p>Zum einen ist</p> <pre><code class="block language-css"><span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav main infoBox"</span> <span class="token string">"footer footer footer"</span><span class="token punctuation">;</span> </code></pre> <p>besser zu lesen.</p> <p>Noch wichtiger ist, dass es weitaus besser handhabbar und wartbar ist.</p> </blockquote> <blockquote> <p>Wenn nun der Hauptinhalt nicht doppelt, sondern dreimal so breit sein soll wie die beiden Randspalten? Das ist schnell geändert: <code>grid-template-columns: 1fr 3fr 1fr</code>. Bei deinem 8er-Grid wäre das gar nicht möglich.</p> </blockquote> <p>Dafür sind andere Dinge möglich. Wie viele Spalten nötig sind, weiß man nur, wenn man das konkrete Projekt kennt.</p> <blockquote> <p>Wenn man in altem Spaltendenken verharrt, beraubt man sich selbt der Möglichkeiten, die CSS Grid bietet.</p> </blockquote> <p>Es lohnt sich sicher, dass in weiteren Blogeinträgen zu besprechen. Rom ist auch nicht an einem Tag erbaut worden.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724858#m1724858 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-16T08:56:52Z 2018-06-16T08:56:52Z Eine frage an die Profis... <p>@@marctrix</p> <blockquote> <p>Hier geht es um Erklärung, nicht um die Umsetzung eines bekannten Layouts.</p> </blockquote> <p><em>Eines.</em> Nicht aller möglichen.</p> <blockquote> <p>Es lohnt sich sicher, dass in weiteren Blogeinträgen zu besprechen.</p> </blockquote> <p>Ein Blogbeitrag sollte in sich abgeschlossen sein, nicht durch andere ergänzt/korrigiert werden müssen. Also ein konkretes Thema behandeln, hier ein konkretes Layout – ein dreispaltiges.</p> <p>Ein dreispaltiges Layout mit einem achtspaltigen Grid zu implementieren halte ich nicht für sinnvoll. Also auch nicht für erwähnenswert. Es sei denn mit deutlichem Hinweis „So nicht!“</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724866#m1724866 marctrix self@mhis.de https://www.mhis.de 2018-06-16T09:51:28Z 2018-06-16T09:57:26Z Eine frage an die Profis... <p>Hej Gunnar,</p> <blockquote> <blockquote> <p>Hier geht es um Erklärung, nicht um die Umsetzung eines bekannten Layouts.</p> </blockquote> </blockquote> <blockquote> <p>Eines. Nicht aller möglichen.</p> </blockquote> <p>Nein, nicht um eins. Genau genommen um gar keins. Es geht nur darum, <code>grid-areas</code> zu erklären.</p> <blockquote> <blockquote> <p>Es lohnt sich sicher, dass in weiteren Blogeinträgen zu besprechen.</p> </blockquote> </blockquote> <blockquote> <p>Ein Blogbeitrag sollte in sich abgeschlossen sein, nicht durch andere ergänzt/korrigiert werden müssen. Also ein konkretes Thema behandeln, hier ein konkretes Layout – ein dreispaltiges.</p> </blockquote> <p>Du hast einfach das Thema nicht verstanden, Das lautet nämlich nicht dreispaltiges Layout, sondern <code>grid-areas</code>. </p> <p>Das halte ich für abschließend erklärt und keiner Korrektur bedürftig.</p> <p>Weitere Artikel würden andere Aspekte und Möglichkeiten von CSS Grid vorstellen, zum Beispiel wie man Elemente mit Angabe der Linien platziert — auch wie sich Elemente dann eine Area teilen könne und wie man dann stapelt.</p> <p>Was auch immer. Jedenfalls wird es wieder ein kleiner Happen sein und nur einen Aspekt behandeln, damit es leicht verständlich bleibt und schnell gelesen wird. Niemand hat Lust auf lange Texte!</p> <blockquote> <p>Ein dreispaltiges Layout mit einem achtspaltigen Grid zu implementieren halte ich nicht für sinnvoll. Also auch nicht für erwähnenswert. Es sei denn mit deutlichem Hinweis „So nicht!“</p> </blockquote> <p>Vieles an dem Artikel ist so wie es ist aus didaktischen Gründen nicht anders gemacht.</p> <p>Ich hatte überlegt so einen Satz wie den folgenden einzubauen:</p> <p><em>Für ein einfaches dreispaltiges Layout reicht das auch aus und da man seinen Code so einfach wie möglich halten sollte, solltest du es auch bei diesem Code belassen, wenn du damit hinkommst.</em></p> <p>Ich fürchte aber, dass dann viele den Rest nicht mehr lesen, der einem weitere Möglichkeiten eröffnet. Nämlich auf einer zweiten Zeile vier Spalten zu erzeugen. Das geht mit deinem dreispaltigen Grid nicht.</p> <p>Ich habe das aber nicht vorgemacht, denn das Prinzip wird in diesem Artikel bereits klar und weitere Beispiele würden nur verwirren. der Artikel sollte so einfach wie möglich sein. Ich hoffe, danach weiß man, wie man grid-areas anlegt und wird schon aus Faulheit nicht mehr Spalten erzeugen, als nötig.</p> <p><strong>Ich habe seht großes Vertrauen in die Bequemlichkeit der Menschen!</strong></p> <p>Marc</p>