Erledigt - Semantischen Abschnitt einfärben?

[Liv3pl4y]

Hallo zusammen,

ich bin am verzweifeln und komme einfach nicht weiter. Ich möchte eine Webseite designen, bei der die Section Elemente abwechselnd immer eine andere Farbe bekommen. Bei folgenden Codefragment habe ich allerdings das Problem, egal was ich versuche, ob ich es nun mit semantischen HTML5 Tags versuche, oder nur mit einfach "Div-Containern", ob ich die Überschriften Tags durch "span", oder gar "p" ersetzte, immer wird nur der zuletzt beschriebene Abschnitt (das Blockelement et cetera), eingefärbt, also "h1-h6", "p", "span" et cetera.

<section id="aboutUs">
    <div class="inline-wrapper">
        <h1>Über Mich</h1>
        <div class="editorial col x6-column">
            <h2 class="hidden">Einleitung</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Aenean commodo ligula eget dolor. Aenean massa. Cum
                sociis natoque penatibus et magnis dis p.</p>
            <div class="download-btn"> <a href="#">Download Lebenslauf</a> </div>
        </div>
        <div class="aboutUsContent col x6-column">
            <h2 class="hidden">Weitere Informationen</h2>
            <p>Interessen
              
                dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
              
                Freizeitaktivitäten
              
                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 dapibu</p>
        </div>
    </div>

Die Sektion mit der ID "aboutUs" ist die übergeordnete Sektion eines Abschnittes. Diese gesamte Sektion soll eingefärbt werden. Wenn ich aber nun schreibe: "section#aboutUs {background: aqua;} dann wird nur die <h1> Überschrift farblich hinterlegt.

Hat Jemand ein Tipp für mich, was ich hier nicht beachtet habe?

Edit: Das Problem ist im übrigen auch, dass wenn ich den Abschnitt mit dem Inspektor untersuche, die Sektion nur bis zum <h1> Element reicht (Höhe), obwohl doch noch andere Elemente vorhanden sind. Wenn ich die Überschrift rauslassen, dann erkennt der Inspektor natürlich trotzdem nicht die anderen Elemente.

 

[Dudlhofer]

Da man die verwendeten Klassen nicht kennt, kann man aus dem Code-Fragment leider nichts weißsagen - bitte einen Link zur Seite, dann kann man mehr sagen.

 

[Liv3pl4y]

Ich habe die Seite noch nicht online gestellt, ist ein Arbeitsentwurf. Zu den Klassen, das ist nicht besonders:

.inline-wrapper zentriert nur das Layout bei einer maximalen Breite von 1280px. .col dient nur dem Raster (float: left, padding: x). Last but not least: .xcolumn Klassen sind nur Breitenangaben in Prozent, sonst nichts. -editorial et cetera sind leere Klassen.

 

[Diskord]

Ich habe mir gerade mal deinen Code-Schnipsel kopiert und es selbst versucht. Ich kann dein Problem allerdings nicht nachvollziehen, da bei mir mit section#aboutUs {background: aqua;} die komplette Sektion hinterlegt wird. Ich kann mir deshalb nur vorstellen, dass das durch eine andere Stelle im Stylesheet ausgehebelt wird.
Bin allerdings absoluter Anfänger auf diesem Gebiet.

 

[Liv3pl4y]

Ich habe eine Lösung gefunden, aber ob die konventionell ist, mag ich bezweifeln. Ich habe mittels der Clearfix (Content - Clear Methode) es irgendwie hinbekommen ^^ Aber ohne funktioniert es bei mir immer noch nicht :/

 

[Myhar]

Dann verwendest du wohl floats (oder ähnliches, um die Elemente aus dem Fluss zu nehmen)? Das hätte man vielleicht erkannt, wenn du uns mehr verraten hättest. Aber ja, "ist ja nichts besonderes". Obs eine bessere Möglichkeit gibt, kann man ohne den Code zu kennen nicht sagen. Schön, wenn es funktioniert, damit kannst du dann ja hoffentlich weiterarbeiten

 

[afr0kalypse]

Das klingt sehr stark nach Floating.
Wenn du Elemente durch float nebeneinander positionierst muss das umschließende Element einen clearfix haben. Ansonsten gibts Probleme
Abwechselnd die Farben ändern kann man ganz toll mit :nth-child(), bei 2 alternierenden Farben mit dem Argument even und odd.