Beiträge von MrMurphy

Hallo

Zitat

Kann mir jemand einen kleinen Tipp geben was ich da besser machen kann?

Schwierig.

Mal abgesehen davon, dass ich das

Zitat

Ich hätte gerne die Abstände irgendwie einheitlich. Also zwischen den Bildern jeweils der gleiche weiße Raum.
Es scheint mir so, als ob die Abstände sich von einem zum anderen Text ergeben, also von letzten Footer bis zum Datum des nächsten Artikels oder zur nächsten Headline

nicht verstehe reicht ein kleiner Tipp beziehungsweise reichen ein paar kleine Änderungen nicht aus.

Dein HTML-Quelltext enthält leider jede Menge Fehler, die zunächst korrigiert werden müssen. Viele Fehler sind dabei nicht direkt offensichtlich und Anfängern entsprechend schwer zu erklären. Du hast dir leider viele vermeintliche Lösungen falsch beigebracht, die dir nachträglich schwer wieder auszutreiben sind. So ist bei den meisten HTML5-Elementen ziemlich genau festgelegt, wozu sie verwendet werden dürfen - und wozu nicht. Dazu fehlt dir leider noch jedes Verständnis.

Außerdem scheinst du ein paar recht eigenwillige Vorstellungen zu haben wie eine Blog-Seite optisch dargestellt werden sollte. Deine Vorstellungen erschweren deinen Besuchern aber das Lesen der Seite und die verjagst du damit eher als sie zu einem erneuten Besuch einzuladen.

Ich kann dir zwar eine korrekte Seite erstellen, bezweifele aber, dir damit wirklich zu helfen.

Gruss

MrMurphy

Hallo

Wahrscheinlich kann mit HTML und CSS eine Lösung hingebogen werden.

Ich empfehle aber darauf zu verzichten.

Portfolios sind in der Regel für einen gewerblichen oder beruflichen Einsatz gedacht. Deshalb sollten solche Webseiten zugänglich und benutzerfreundlich erstellt werden.

Wahrscheinlich viel mehr User als du vermutest kommen mit verspielten / versteckten / ausgeblendeten Navigationen nicht zurecht. Die schreckst du mit so einer Navigation ab. Von daher sollte für eine Navigation besser eine zwar vielleicht langweilige, aber immer sichtbare und eindeutig bedienbare Lösung gewählt werden.

Weiterhin sollte eine gewerbliche / berufliche Webseite auf unterschiedlichen Geräten (Smartphone, Tablet, Laptop, Desktop), bei unterschiedlichen Ausrichtungen (Hoch- / Querformat) und mit verschiedenen Eingabegeräten (nur Maus, nur Tastatur, nur Touchscreen) funktionieren. Das gilt natürlich auch für die Navigation.

Gruss

MrMurphy

Hallo

Ich sehe eher das folgende HTML

<article class="thumbnails">
         <figure>
            <a href=""><img src="http://lorempixel.com/400/200/abstract/1"></a>
            <figcaption>
               <p>Abstrakt (2016)</p>
               <p>zu Hause in Hamburg-Oldenfelde</p>
            </figcaption>
         </figure>
         <figure>
            <a href=""><img src="http://lorempixel.com/400/200/transport/2"></a>
            <figcaption>
               <p>WOA (2015)</p>
               <p>zu Hause in Bremen</p>
            </figcaption>
         </figure>
         <figure>
            <a href=""><img src="http://lorempixel.com/400/200/cats/8"></a>
            <figcaption>
               <p>Grinning Cat (2013)</p>
               <p>zu Hause in Hamburg-Wandsbek</p>
            </figcaption>
         </figure>
         <figure>
            <a href=""><img src="http://lorempixel.com/400/200/fashion/7"></a>
            <figcaption>
               <p>Mystic Owl (2013)</p>
               <p>zu Hause in Großensee bei Trittau</p>
            </figcaption>
         </figure>
         <figure>
            <a href=""><img src="http://lorempixel.com/400/200/transport/5"></a>
            <figcaption>
               <p>Thomys Island (2013)</p>
               <p>zu Hause in Travemünde</p>
            </figcaption>
         </figure>
      </article>

mit dem folgenden CSS

header, nav, main, aside, footer, figure, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 100%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
      }
      .thumbnails {
         display: flex;
         flex-wrap: wrap;
      }
      .thumbnails figure {
         min-width: 0;
         max-width: 100%;
         border: 1px solid gray;
         margin: 0.5rem 1%;
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: 23%;
         -ms-flex-preferred-size: calc(23% - 2px);
      }
      .thumbnails figcaption {
         padding: 0.5rem;
      }
      .thumbnails figcaption p {
         font-size: 0.8rem;
         text-align: center;
         margin: 0.3rem 0;
      }
      .thumbnails img {
         display: block;
         max-width: 100%;
         max-height: 100vh;
         border: 0;
         margin: 0 auto;
      }

Eine komplette Seite könnte dann folgendermaßen aussehen

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




   @media all {
      header, nav, main, aside, footer, figure, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 100%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
      }
      .thumbnails {
         display: flex;
         flex-wrap: wrap;
      }
      .thumbnails figure {
         min-width: 0;
         max-width: 100%;
         border: 1px solid gray;
         margin: 0.5rem 1%;
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: 23%;
         -ms-flex-preferred-size: calc(23% - 2px);
      }
      .thumbnails figcaption {
         padding: 0.5rem;
      }
      .thumbnails figcaption p {
         font-size: 0.8rem;
         text-align: center;
         margin: 0.3rem 0;
      }
      .thumbnails img {
         display: block;
         max-width: 100%;
         max-height: 100vh;
         border: 0;
         margin: 0 auto;
      }
   }




   </style>
</head>
<body>
   <header role="banner">
   </header>
   <nav role="navigation">
   </nav>
   <main role="main">
      <article class="thumbnails">
         <figure>
            <a href=""><img src="http://lorempixel.com/400/200/abstract/1"></a>
            <figcaption>
               <p>Abstrakt (2016)</p>
               <p>zu Hause in Hamburg-Oldenfelde</p>
            </figcaption>
         </figure>
         <figure>
            <a href=""><img src="http://lorempixel.com/400/200/transport/2"></a>
            <figcaption>
               <p>WOA (2015)</p>
               <p>zu Hause in Bremen</p>
            </figcaption>
         </figure>
         <figure>
            <a href=""><img src="http://lorempixel.com/400/200/cats/8"></a>
            <figcaption>
               <p>Grinning Cat (2013)</p>
               <p>zu Hause in Hamburg-Wandsbek</p>
            </figcaption>
         </figure>
         <figure>
            <a href=""><img src="http://lorempixel.com/400/200/fashion/7"></a>
            <figcaption>
               <p>Mystic Owl (2013)</p>
               <p>zu Hause in Großensee bei Trittau</p>
            </figcaption>
         </figure>
         <figure>
            <a href=""><img src="http://lorempixel.com/400/200/transport/5"></a>
            <figcaption>
               <p>Thomys Island (2013)</p>
               <p>zu Hause in Travemünde</p>
            </figcaption>
         </figure>
      </article>
   </main>
   <footer role="contentinfo">
   </footer>
</body>
</html>

Nachtrag: Ich habe einige Tippfehler korrigieren müssen.

Gruss

MrMurphy

Hallo

Zitat

Gibt es eine Schicke lösung das ganze so anzupassen, damit die fußleiste etwas weiter runter rutscht, ohne die anderen pages zu beeinflussen?

Wie schon von mir vermutet suchst du den Sticky Footer. Eine schicke (du meinst wahrscheinlich eher einfache) Lösung gibt es nicht. Du musst dir halt eine Lösung suchen mit der du zurecht kommst.

Gruss

MrMurphy

Hallo

Zitat

... dass sozusagen die Fußleiste nicht abschließt.

Was meinst du damit?

Zitat

ich frage mich ob es in CSS ein Befehl gibt ...

Eher nicht.

Wenn es um Fußzeilen bei relativ wenig Inhalt geht wird im Regelfall "Sticky Footer" gesucht. Das ist ein Oberbegriff, für den es verschiedene Techniken / Lösungen gibt. Du kannst ja mal nach "css sticky footer" suchen und dir dann eine Lösung herauspicken, mit der du klar kommst.

Insgesamt würde ich zu Flexbox raten, aber damit wirst du noch überfordert sein, wenn ich mir deinen bisherigen Quelltext anschaue.

Gruss

MrMurphy

Hallo

Um dir helfen zu können benötigen wir einen Link zu deiner Seite.

Du musst halt die Textlinks passend im CSS bestimmen.

Gruss

MrMurphy

Hallo

Zitat

wie erreiche ich das?

Der HTML-Quelltext für das Grundlayout entspricht

<body>
   <header>
      <h2>header</h2>
   </header>
   <div>
      <main>
         <h2>main</h2>
      </main>
      <aside>
         <h2>aside</h2>
      </aside>
   </div>
   <footer>
      <h2>footer</h2>
   </footer>
</body>

Das dazu passende CSS kann so aussehen:

@media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body>header,
      body>footer,
      body>div>main,
      body>div>nav,
      body>div>aside {
         padding: 0.3rem 0.5rem;
         border: 3px solid gray;
      }
      h1 {
         font-size: 1.2rem;
         margin: 0.5rem 0;
      }
      h2 {
         font-size: 1rem;
         margin: 0.5rem 0;
      }
      p {
         font-size: 1rem;
         margin: 0.5rem 0;
      }
      body {
         max-width: 980px;
         padding: 0.5rem;
         margin: 0 auto;
      }
      body>header {
         margin-bottom: 0.5rem;
      }
      body>div {
         margin: 0;
      }
      body>div>main,
      body>div>aside {
         margin-bottom: 0.5rem;
      }
   }
   @media only screen and (min-width: 980px) {
      body>div {
         overflow: hidden;
      }
      body>div>aside {
         float: left;
         width: 250px;
      }
      body>div>main {
         float: right;
         width: calc(100% - 250px - 0.5rem);
         margin-left: 0.5rem;
      }
   }

Gruss

MrMurphy

Hallo

Der Quelltext passt aber nicht zum Bild.

Der header soll also 10% Breite haben und links stehen. Ich finde aber weder einen div-Container für den Inhalt noch einen dritten Container für die Werbefläche.

Zitat

wenn ich das jetzt mal so verlinken darf

Ja, Webseiten dürfen grundsätzlich verlinkt werden.

Allerdings hat die verlinkte Webseite mit aktuellem HTML / CSS wenig zu tun. Sie ist zentriert und starr. Außerdem enthält sie keine nebeneinander liegenden Container und passt damit auch nicht zu deiner Seite.

Zitat

die verschiebung passiert beim reinzoomen nach außen hin

Das ist schlechter Stil und sollte vermieden werden, da die Besucher beim Hineinzoomen oder schmaleren Fenstern seitlich scrollen müssen. Webseiten sollten aber so erstellt werden, dass die Besucher nur hoch- und runter scrollen müssen.

Gruss

MrMurphy

Hallo

Ohne den HTML-Quelltext können wir dir nicht konkret helfen.

Zitat

Ich bringe mir alles per trial and error bei...

Das ist grundsätzlich schlecht. Das aktuelle HTML und CSS sind sehr komplex geworden und erfordern ein gewissen Grundwissen.

Grade auch wenn es um unterschiedliche Fenstergrößen und Responsive Design geht.

Zitat

Problem 1: Die Buttons und das Logo sollen sich nciht vergrößern oder verkleinern lassen, damit diese nicht aus ihrem Rahmen springen.

Das ist aber das ganz normale Verhalten und daran solltest du nichts ändern. Es ist besser in solchen Fällen die Anordnung der Elemente zu ändern.

Zitat

Problem 2: Ich verstehe schlichtweg nicht, wieso der Hintergrund der Navigationsbar schön brav statisch an seinem Platz bleibt; alle anderen Rahmen jedoch nicht......

Das liegt an dem Zusammenspiel von HTML und CSS. Aber ohne das HTML - siehe weiter vorne im Text.

Gruss

MrMurphy

Hallo

Zitat

aber div#main verändert die größe nicht

Warum liest du meine Antwort nicht?

Zum Beispiel

Zitat

Da die Auswirkungen von float immer wieder unterschätzt werden ...

und

Zitat

damit sie beide aus dem Dokumentenfluß genommen werden

Mit float werden main und aside aus dem Dokumentenfluß genommen und andere Elemente können deshalb nicht mehr auf sie reagieren. Das gilt natürlich auch für umgebende Elemente. Deshalb sind für das umgebende Element main und aside kein Inhalt mehr, auf das es reagieren kann.

Das ist alles in dem von mir verlinkten Beitrag beschrieben. Wenn du float anwenden willst solltest du den verstanden haben. Ansonsten wird dir float regelmäßig Probleme bereiten.

Gruss

MrMurphy

Hallo

Die Beispielseite enthält keinen Inhalt, das Problem ist deshalb nicht direkt nachvollziehbar.

Das hat zwar mit deinem Problem nichts zu tun: Aber du verwendest Elemente teilweise in unzulässiger Weise. Damit solltest du dich noch mal beschäftigen. In den HTML-Grundlagen ist relativ genau bestimmt, wann welche Elemente verwendet werden dürfen.

Grundsätzlich gilt folgendes:

Wenn zwei Elemente (main, aside) nebeneinander angezeigt werden sollen, dürfen sie zusammen nicht breiter als das umgebende Element (div.website) sein.

Da main (980px) so breit wie das umgebende div.website (980px) ist passt daneben kein weiteres Element.

Zusätzlich ist main ein Blockelement. Selbst wenn main und aside zusammen weniger als 980px Breite haben stehen sie dennoch untereinander.

Deshalb müssen beide Elemente gefloatet werden, damit sie beide aus dem Dokumentenfluß genommen werden.

Zusätzlich muss das floaten aber vor dem ersten nachfolgenden Element beendet werden, welches unterhalb der gefloateten Elemente stehen soll. Sonst kann es auch neben die gefloateten Elemente rutschen. Merksatz: Kein Float ohne Clear.

Da die Auswirkungen von float immer wieder unterschätzt werden noch der Hinweis auf einen ausführlichen Beitrag dazu:

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

Insgesamt solltest du dich auch mit Flexbox beschäftigen.

Gruss

MrMurphy

Hallo

Deine Angaben sind für konkrete Hilfe leider viel zu mager.

Der Skizze ist weder zu entnehmen

a) in welchen Kästen/Container welche Informationen stehen sollen

b) wie sie sich die Kästen im 12er-Grid aufteilen sollen

c) ob, und wenn ja, wie sich die Kästen responsive verhalten sollen.

Die gleiche Höhe des ersten sowie der zweiten und dritten Kästen sind mit Bootstrap-Mitteln nicht zu erreichen. Da wirst du nacharbeiten müssen.

Grundsätzlich musst du für die Aufteilung zunächst ein Gerüst aus Containern mit den dafür gedachten Bootstrap-Klassen erstellen. Das Gerüst könnte folgendermaßen aussehen:

<main class="container-fluid">




      <section class="row">
         <div class="col col-md-3">
            <p>Inhalt des ersten Kastens</p>
         </div>
         <div class="col col-md-2 col-md-offset-1">
            <p>Inhalt des zweiten Kastens</p>
            <p>Direkt darunter Inhalt des dritten Kastens.</p>
         </div>
      </section><!-- Ende row -->




      <section class="row">
         <div class="col col-md-12">
            <p>Inhalt des vierten Kastens</p>
            <p>Direkt darunter Inhalt des fünften Kastens.</p>
         </div>
      </section><!-- Ende row -->




   </main><!-- Ende container -->

Der Übersichtlichkeit halber habe ich statt der Kästen erstmal Absätze (p) genommen. Praktisch sieht das Ergebnis dann so aus:

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

Mit deinem Inhalt könnte das HTML dann folgendermaßen aussehen:

<main class="container-fluid">




      <div class="panel panel-primary">




         <div class="panel-heading">
            <h3 class="panel-title">Details</h3>
         </div>
         <div class="panel-body">




            <section class="row">




               <div class="col col-md-3">
                  <div class="panel panel-primary">
                     <div class="panel-heading">
                        <h3 class="panel-title">Zusammenfassung</h3>
                     </div>
                     <div class="panel-body">
                        Inhalt Zusammenfassung
                     </div>
                  </div>
               </div>




               <div class="col col-md-2 col-md-offset-1">
                  <div class="panel panel-primary">
                     <div class="panel-heading">
                        <h3 class="panel-title">Lieferadresse</h3>
                     </div>
                     <div class="panel-body">
                        Inhalt Lieferadresse
                     </div>
                  </div>
                  <div class="panel panel-primary">
                     <div class="panel-heading">
                        <h3 class="panel-title">Adresse des Verkäufers</h3>
                     </div>
                     <div class="panel-body">
                        Inhalt Adresse des Verkäufers
                     </div>
                  </div>
               </div>




            </section><!-- Ende row -->




            <section class="row">




               <div class="col col-md-12">
               <div class="panel panel-primary">
                  <div class="panel-heading">
                     <h3 class="panel-title">Meine Möglichkeiten</h3>
                  </div>
                  <div class="panel-body">
                     Inhalt Meine Möglichkeiten
                  </div>
               </div>
                  <div class="bs-example" data-example-id="table-within-panel">
                     <div class="panel panel-primary">
                        <div class="panel-heading">Yugioh Einzelkarten</div>
                        <table class="table">
                           <thead>
                              <tr>
                                 <th>#</th>
                                 <th>Vorname</th>
                                 <th>Nachname</th>
                                 <th>Benutzername</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <th scope="row">1</th>
                                 <td>Mark</td>
                                 <td>Otto</td>
                                 <td>@mdo</td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
               </div>




            </section><!-- Ende row -->




         </div>




      </div>




   </main><!-- Ende container -->

Und praktisch dann

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

Das responsive Verhalten kann noch mit zusätzlichen Klassen (.col-xs-, .col-sm- und .col-lg- zu den bereits vorhandenen Klassen .col-md-) verfeinert werden.

Gruss

MrMurphy

Hallo

Zitat

Es könnte ja nichts durch HTML5 Elemente ersetzt werden oder sehe ich das falsch?

Doch. Die HTML5-Richtlinien schreiben vor, das div-Elemente nur noch verwendet werden dürfen, wenn es keine geeigneteren gibt. Damit sollten div-Wüsten endgültig der Vergangenheit angehören. div-Seiten werden zwar problemlos auch zukünftig von den Browser angezeigt werden, aber sie sind sachlich trotzdem falsch.

Zitat

Einige Beispiele wären nett.

<div id="main">

Solche umfassenden Container werden üblicherweise eher als wrapper bezeichnet - und sind komplett überflüssig. Also löschen.

<div id="kopfzeile">

Dafür ist das header-Element besser geeignet.

<ul>
<li>

Nach den Richtlinien von HTML / CSS sollen Inhalt und Gestaltung getrennt werden. Elementen und Container, die nur der Gestaltung deinen, sollten nur verwendet werden, wenn die technisch notwendig sind.

Eine der Folgen ist, dass auf unnötige Container und Elemente verzichtet werden sollte. Die Liste ist überflüssig und sollte gelöscht werden.

Fünfter

Seit über 10 Jahren ist UTF-8 problemlos zu verwenden und inzwischen Standard geworden. Damit sind Maskierungen von Sonderzeichen und Umlauten überflüssig. Abgesehen von sehr wenigen Ausnahmen.

<div id="content">

Dafür ist das main-Element besser geeignet.

<div id="footer"

Dafür ist das footer-Element besser geeignet.

Aktuell könnte der HTML-Quellcode also folgendermaßen aussehen:

<body>
   <header role="banner">
      <h1>Struktur</h1>
   </header>
   <nav role="navigation">
      <a href="#">Erster</a>
      <a href="#">Zweiter</a>
      <a href="#">Dritter</a>
      <a href="#">Vierter</a>
      <a href="#">Fünfter</a>
      <a href="#">Sechster</a>
   </nav>
   <main role="main">
      <h2>main</h2>
   </main>
   <footer role="contentinfo">
      <h2>footer</h2>
   </footer>
</body>

Die Gestaltung erfolgt dann per CSS.

Gruss

MrMurphy

Hallo

Zitat

... allerdings bewegen entweder sich die Buttons oder die Container Größe springt etwas. Sind zwar nur ein paar Pixel, ...

Das kann ich nicht bestätigen. Die Buttons werden zwar höher, aber das ist durch

nav a:focus,
      nav a:hover {
         margin-top: 0;
         padding: 1em 0.4em 0.4em;
      }

wohl gewollt. Ansonsten müsstest du das padding auskommentieren oder löschen.

Es wäre auch sinnvoller wenn du gleich aktuelles HTML5 und CSS3 lernen und anwenden würdest. Dein Quelltext ist veraltet.

Zudem sollten Elemente wie das li-Element immer geschlossen werden. Es wird zwar immer wieder mal behauptet, das offene Elemente problemlos funktionieren sollen, bloß die Praxis sieht anders aus.

Gruss

MrMurphy

Hallo

Falls du deinen ersten Beitrag noch bearbeiten darfst könntest du den Quellcode bis auf die Zeilen 450 bis 452 löschen.

Gruss

MrMurphy

Hallo

Zitat

Ich verstehe gerade nicht, worüber du redest bzw. worauf du hinaus willst. Sry.

Im Moment ist es etwas in Mode Selektoren wie :nth-child() schlecht zu machen.

Da es dafür keine sachlichen Gründe gibt muss man sich halt nebulös ausdrücken.

Sowas geschieht regelmäßig wenn in HTML / CSS Neuerungen eingeführt werden, die nicht von allen verstanden und angewandt werden können. Um die eigenen Unzulänglichkeiten zu verschleiern wird halt an den Neuerungen herumgenörgelt und Anderen madig gemacht.

Unter anderem werden dazu eher weltfremde Szenarien als tägliche Vorkommnisse dargestellt und die Anwendung der Neuerungen falsch beschrieben.

Webseitenersteller, die noch nicht so sattelfest sind fallen dann darauf herein und verbreiten schlimmstenfalls ohne Hintergrundwissen die Horrormeldungen weiter.

Das geschieht aktuell halt mit den Selektoren. Die sind zwar nicht für jeden möglichen Einsatzzweck sinnvoll, aber solche sinnlosen Einsatzzwecke sind eher selten. Von daher solltest du dich nicht nervös machen lassen. Für deinen aktuellen Einsatzzweck sind Selektoren besser geeignet als IDs oder Klassen.

Dass Selektoren die Zukunft gehört ist auch daran ersichtlich, dass mit CSS3 viele neue eingeführt wurden und schon viele zusätzliche in Planung sind.

Selektoren gehören auch zu dem Konzept, Inhalt und Layout zu trennen. Ähnlich wie unnütze Container sollen auch IDs und Klassen möglichst selten verwendet werden. Viele gestandene Webseitenersteller haben aber Schwierigkeiten das neue Konzept umzusetzen und auf die geliebten ID- und Klassenansammlungen zu verzichten.

Bitte nicht falsch verstehen: IDs und Klassen sind und bleiben ein Konzept von HTML und CSS. Sie sind auch nicht schlecht oder veraltet und haben ihre sinnvollen Einsatzzwecke. Allerdings gibt es viele Lösungen für die Selektoren besser geeignet sind.

Gruss

MrMurphy

Hallo

Zitat

Ist halt einfach ein Article innerhalb des Main-Containers.

Klar. Und das div-Element hast du vergessen?

Das ist aber genau die Problemursache. Das div ist div:nth-child(1).

Durch das div gibt es keinen article:nth-child(1). Der erste article ist article:nth-child(2).

Die Anweisung ist von hinten zu lesen: Das CSS sucht bei article:nth-child(1) zunächst das 1. Kind und kontrolliert dann, ob es sich um ein article-Element handelt. Wenn nicht, werden die CSS-Anweisungen nicht ausgeführt.

Wenn du den ersten article erwischen willst, egal wie viele Elemente sich davor befinden kannst du mal article:nth-of-type(1) ausprobieren.

Gruss

MrMurphy

Hallo

Ohne den HTML-Quellcode ist der Fehler nicht ersichtlich.

Gruss

MrMurphy

Hallo

Da können wir nur raten. Zumal deine Beschreibung teilweise etwa mysteriös ist.

1. Cache nicht geleert (bei den meisten Browsern mit Strg+F5)
2. Das neue Bild ist nicht vorhanden
3. Tipp- bzw. Rechtschreibfehler
4. Pfad- und Dateiname falsch
5. Pfadname passt nicht zum Pfad von der CSS zur Bilddatei

Gruss

MrMurphy

Hallo

Ich sehe zwei Möglichkeiten:

1. CSS Gradient, siehe zum Beispiel

http://www.mediaevent.de/css/gradient.html

oder

https://wiki.selfhtml.org/wiki/CSS/Eigen…-gradient%28%29

2. Eine Grafik im SVG-Format als Hintergrundbild

Gruss

MrMurphy