Erledigt - 80%-Breite (Bestimmtes Element negieren)?

[Liv3pl4y]

Hallo zusammen,

ich komme bei diesem Thema nicht weiter, vielleicht wisst ihr ein Lösungsweg. Mein Problem ist, das die gesamte Seite eine maximale Breite von 80% haben soll in der Desktop-Variante. Nun ist es aber so, das ich auch ein Top-Menu und einen Image-Slider einbauen möchte. Letzere beiden, haben aber eine Breite von 100%. Ich könnte zwar für jede Section ein umschließendes Div mit anderen Breitenangaben erstellen, aber das ist nicht Lösungsweg, welcher für mich rentabel ist, denn: Nachdem ich dieses Design fertiggestellt habe, soll es noch auf ein CMS (BurningBoard) angepasst werden. Dort wird die Breite über eine Klasse (.layoutFluid) realisiert. Das Top-Menu hat dort eine Breite von 100%, aber nur weil es absolut positioniert ist. Nun wäre meine Frage, gibt es noch andere Möglichkeiten ein Element innerhalb eines Grids, in der Breite, zu verändern, ohne vorstehende, oder darauffolgende Elemente zu beeinflussen?

Ich habe es auch mit dem :not() Pseudoelement versucht, in Form von:

#layoutFluid {width: 80%; margin: 0 auto;}
#slider:not(#layoutFluid) {width: 100%;}

Die Lösung ist sicher einfach, denke ich, aber irgendwie stehe ich so ziemlich auf dem Schlauch

 

[patrick_l]

Ohne dein Seitenstruktur zu kennen, kann man dir schwer helfen. Daher poste bitte dein Markup mit dazugehörigem CSS. Idealerweise das ganze hosten, damit wir es im Browser betrachten können.

Liebe Grüße, Patrick

 

[skiron]

Jo, Quellcode wäre gut, denn ich verstehe nicht warum Du nicht einfach alles in eine Box packst.

 

[Liv3pl4y]

Also, es ist ja alles im Moment von der #layoutFluid Section umschlossen, welche eine Breite von 80% als Defaultwert hat. Aber bestimmte Bereiche, innerhalb dieser Section, sollen, doch lieber 100% der Fensterbreite verwenden. Im Prinzip komme ich nicht darauf, wie ich das realisiere, ohne die #layoutFluid Section, erst nach dem Image-Slider (#slider) beginnen zu lassen.

Hier das HTML Markup (Pastebin):
... und die CSS Deklarationen (Pastebin):

 

[patrick_l]

Logisch aufgebaut ist dein Markup nicht. Davon ab das Section-Element einen Bereich (eine Sektion) auszeichnet. Daher hat es an dieser Stelle nichts verloren. Davon mal ab es eh überflüssig ist, da man genauso gut mit dem body-Tag arbeiten kann bzw. dieser als umschließender Container ausreicht.

Dein Markup würde ich wie folgt ändern:

    <nav class="navbar" role="navigation">
      <div class="container">
        <!-- branding & navbar -->
      </div>
    </nav>
    <header role="banner">
      <div class="container">
        <!-- slider here! -->
      </div>
    </header>
    <main role="main">
      <div class="container">
        <!-- primary content here! -->
      </div>
    </main>

Die Navbar mit dem Logo für sich. Das selbe auch beim Slider und dem restlichen Content so fortsetzen. Alternativ den Header auf 100% Breite setzen und darin die einzelnen Elemente passenden verschachteln.

    <header role="banner">
      <nav role="navigation">
        <!-- branding & navbar here! -->
      </nav>
      <div class="slider">
        <!-- slider here! -->
      </div>
    </header>

Liebe Grüße, Patrick