absolute Block innerhalb eines relativ Blocks

stefkey · 12. Juni 2016

Hallo zusammen,

ich denke irgendwie muss es doch möglich sein innerhalb eines Content Blocks welcher eine feste Breite von sagen wir 900px hat (links und rechts also ein weißer rand sofern das Browserfenster breiter eingestellt ist) für nur einen kleinen Abschnitt aus diesem Rahmen "auszubrechen". Es geht um eine Hintergrundfarbe (background-color) die eben ausnahmsweise immer bis zum Browserrand gehen soll.

Die Lösung mit margin: 0 -1000px (damit läuft die Hintergrundfarbe 1000px weiter links und das ist ausreichend) und padding: 0 1000px (damit kommt der Inhalte wieder dort hin wo er soll) geht zwar, aber es müsste doch auch mit position: absolut; left: 0 und position: relative zu machen sein, oder?

Und als besonderes Feature müsste der absolute-Block sich der Höhe des relativ-Blocks anpassen. grrrr das muss doch gehen? Es will aber nicht

So sähe es aus:

HTML

<div class="content">
    <div>Text_1 bald blah blah</div>
    <div>Bild_1 bald blah blah</div>
    <div>Text_2 bald blah blah</div>
    <div> Hier nun grau hinterlegter Text, aber die Hintergrundfarbe soll bis zum Browserfensterrand gehen.
        <div style="position:absolute; left:0; background-color:#ccc">Dieser Block macht die Hintergrundfarbe, soll jedoch 100% height des umschließenden Blocks sein. </div>
    </div>
    <div>Text_3 bald blah blah</div>
</div>

Vielleicht kann mir hierzu jemand sagen ob das überhaupt machbar ist oder ob da nur diese margin "-1000 Methode" bleibt.

Grüße, stekfey
[size=10]

[size=10]

JR Cologne · 12. Juni 2016

So, erstmal habe ich deinen Code ein wenig formatiert und einen fehlenden Endtag hinzugefügt.

Ebenfalls habe ich den Inline-CSS-Code in eine extra CSS-Datei ausgelagert, da dies für die Übersichtlichkeit usw. sehr zu empfehlen ist.

Wichtig ist, dass du die Datei dann richtig im Head-Bereich per link-Tag einbindest.

Was dein Problem ist bzw. was du erreichen möchtest, ist mir noch gar nicht klar geworden. Du müsstest das also ein wenig mehr ausführen. Am besten mit einem Bild.

HTML

<div class="content">
   <div>Text_1 bald blah blah</div>
   <div>Bild_1 bald blah blah</div>
   <div>Text_2 bald blah blah</div>
   <div>Hier nun grau hinterlegter Text, aber die Hintergrundfarbe soll bis zum Browserfensterrand gehen.</div>
   <div id="foo">Dieser Block macht die Hintergrundfarbe, soll jedoch 100% height des umschließenden Blocks sein.</div>
   <div>Text_3 bald blah blah</div>
</div>

CSS

#foo {
   position: absolute;
   left: 0;
   background-color: #ccc;
}

stefkey · 12. Juni 2016

Oh, danke dir! Stimmt, da blickt ja sonst keiner durch.

Angehängt ein jpg. Ich habs fast. Nur wie schaffe ich das der gelbe Block 100% Höhe des umliegenden Block hat? Also ohne height Angabe.

Geht vielleicht height: 1000px und im äußeren Block dann overflow: hidden?
hmmm.

Ich bleibe dran! Aber vielleicht hat ja noch jemand eine Idee.

JR Cologne · 12. Juni 2016

height: 100%

Warum möchtest du keine height-Angabe benutzen?

MrMurphy · 13. Juni 2016

Hallo

Zitat

irgendwie muss es doch möglich sein innerhalb eines Content Blocks welcher eine feste Breite von sagen wir 900px hat (links und rechts also ein weißer rand sofern das Browserfenster breiter eingestellt ist) für nur einen kleinen Abschnitt aus diesem Rahmen "auszubrechen".

Dieser Grundgedanke ist falsch.

Viel sinnvoller ist es dem Content-Block (aktuell wohl das main-Element) die volle Breite zu geben und allen Abschnitten zunächst eine Breite von 900px zu geben. Einzelnen Abschnitten kann dann eine Breite von 100% zugewiesen werden. Die 100%-div bekommen dann ein "Hilfs-div" für die Breite des Inhalts.

Solche Hilfs-divs sind zwar heutzutage eher verpönt. Sie sollten aber trotzdem verwendet werden, wenn sie stabiler als andere mögliche Lösungen sind.

Für solche Fälle ist doch genau das "C" im CSS gedacht.

Spielereien mit position: absolute und negativen Werten sind in jedem Fall die schlechtere Lösung.

Das HTML könnte so aussehen:

Code

<div class="content">
   <div>
      <h2>Überschrift</h2>
      <p>Text</p>
   </div>
   <div>
      <h2>Überschrift</h2>
      <p>Text</p>
   </div>
   <div class="vollebreite">
      <div>
         <h2>Überschrift</h2>
         <p>Text</p>
      </div>
   </div>
   <div>
      <h2>Überschrift</h2>
      <p>Text</p>
   </div>
</div>

Alles anzeigen

und das CSS dazu

Code

.content>div,
.content>div.vollebreite>div {
   background-color: hsla(180, 100%, 25%, 0.3);
   width: 900px;
   padding: 0.5rem;
   margin: 0.5rem auto;
}
.content>div.vollebreite {
   width: 100%;
   padding: 0;
   margin: 0;
}
.content>div.vollebreite>div {
   background-color: transparent;
}

Alles anzeigen

So ist der Inhalt immer 900px breit, die Hintergrundfarbe von einzelnen ausgewählten div geht aber über die volle Breite.

Gruss

MrMurphy

absolute Block innerhalb eines relativ Blocks

Jetzt mitmachen!

Teilen