tag:forum.selfhtml.org,2005:/self Galerie floatet nicht und die Navigation ist auch draufgegangen. – SELFHTML-Forum 2019-10-27T15:05:14Z https://forum.selfhtml.org/self/2019/oct/27/galerie-floatet-nicht-und-die-navigation-ist-auch-draufgegangen/1759367?srt=yes#m1759367 Artusur artur@ajato.de 2019-10-27T14:18:38Z 2019-10-27T14:23:09Z Galerie floatet nicht und die Navigation ist auch draufgegangen. <p>Hi. Ich habe gerade vor zwei Wochen mit html angefangen und bin noch am üben. Leider ist bei der Erstellung meiner Testseite irgendwas im externen CSS nicht in Ordnung. Kann mir jemand evtl. sagen wo der Fehlerteufel in meiner CSS ist? Ich habe es zwar mit einem clearfix hinter meiner Navigation probiert. Hat aber auch nicht funktioniert. Die Galerie floatet nicht wie sie sollte und auch meine Navigation ist zwar da, aber ohne Farbe etc. In meiner Index Seite ist alles vorhanden. Danke schon mal im Voraus. Bin da gerade etwas überfragt. Hier mal der CSS Code.</p> <pre><code class="block language-css"> <span class="token comment">/* *{ margin:0; padding:0; font-family: Verdana; } .wrapper{ display:flex; flex-flow:column wrap; text-align:center; } .wrapper > *{ flex:1 100%; } .header{ background-color: #27A9E1; color:white; height:200px; text-align: center; font-size: 72px; line-height: 200px; } .navigation{ /*parent*/</span> <span class="token property">list-style</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">background-color</span><span class="token punctuation">:</span> #BF362E<span class="token punctuation">;</span> <span class="token property">border-top</span><span class="token punctuation">:</span>2px solid white<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">flex-flow</span><span class="token punctuation">:</span>row wrap<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.navigation > a</span><span class="token punctuation">{</span> <span class="token comment">/*kind*/</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">color</span><span class="token punctuation">:</span>#F7EE6F<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>15px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #BF362E<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.navigation a:hover</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#F7EE6F<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#BF362E<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.row</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #F7EE6F<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">flex-wrap</span><span class="token punctuation">:</span>wrap<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">.col</span><span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span> <span class="token property">flex</span><span class="token punctuation">:</span>100<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.col img</span><span class="token punctuation">{</span> <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 class="token property">margin-top</span><span class="token punctuation">:</span>0px<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">background-color</span><span class="token punctuation">:</span> #BF362E<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#F7EE6F<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">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 200px<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>565px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.navigation</span><span class="token punctuation">{</span> <span class="token property">flex-flow</span><span class="token punctuation">:</span>row wrap<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span>space-around<span class="token punctuation">;</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>850px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.navigation</span><span class="token punctuation">{</span> <span class="token property">justify-content</span><span class="token punctuation">:</span>flex-end<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</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">.col</span><span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span>50%<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span>50%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span>68.75em<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token selector">.col</span><span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span>25%<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span>25%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> */ </code></pre> https://forum.selfhtml.org/self/2019/oct/27/galerie-floatet-nicht-und-die-navigation-ist-auch-draufgegangen/1759368?srt=yes#m1759368 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-10-27T14:48:46Z 2019-10-27T14:48:46Z Galerie floatet nicht und die Navigation ist auch draufgegangen. <p>@@Artusur</p> <p>Wie du am Syntax-Highlighting sehen kannst, weist dein Code Syntax-Fehler auf: Vor <code>.navigation > a</code> steht ein Kommentar gefolgt von nicht interpretierbarem Code.</p> <p>Außerdem hilft CSS-Code auch selten, wenn man nicht das dazugehörige Markup kennt.</p> <p>Und überhaupt solltest du nicht deinen ganzen Code im Forum zeigen, <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/online-Beispiele" rel="nofollow noopener noreferrer">sondern deine Seite verlinken</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/self/2019/oct/27/galerie-floatet-nicht-und-die-navigation-ist-auch-draufgegangen/1759369?srt=yes#m1759369 Artusur 2019-10-27T15:05:14Z 2019-10-27T15:05:14Z Galerie floatet nicht und die Navigation ist auch draufgegangen. <p>Danke Herzlichst. Lösche ihn gleich. LG</p>