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>