DIV Background soll über Parent DIV rausragen

[Simmenfl]

Hallo,
nach mehreren Stunden rumprobieren kapituliere ich jetzt und muss euch um einen Rat bitten. Vielen Dank für eure Hilfe!

Hier der Code:

<div id="block_content">

<div id="content_area" class="block">

<div class="block_inside2">
<div class="titlebanner">
<h2>Empfehlungen</h2>
</div>
</div>
</div>

Die Klasse titlebanner hat von mir via CSS einen Background zugewiesen bekommen und soll links über allen darüberliegenden Parent-Divs rausragen. Hier mal ein Bild im unverschobenen "Normalzustand" damit man es sich besser vorstellen kann. (Der rote Banner soll soweit rausragen, damit es so aussieht als wäre er um die Seite gewickelt). Wenn ich "titlebanner" regulär verschiebe (z.B. mit margin-left: -15px) schneidet sich der Banner am Rand des Parent DIVs ab.

Ich beschäftige mich erst seit einer Woche mit HTML und CSS deswegen habt bitte Nachsicht. Ich habe auf eigene Faust und mit Google als gegeben was ich konnte, aber habe leider keine zufriedenstellende Lösung erarbeiten können...

Möglicherweise (wahrscheinlich ) gehe ich das Problem komplett falsch an deswegen auch gerne eine grundsätzlich andere Lösung. Wichtig ist nur, dass H2 innerhalb der Klasse block_inside2 bleibt. Titlebanner ist im Prinzip überflüssig und ist nur Mittel zum Zweck um den Background darzustellen.


Danke!

 

[aichingm]

poste doch bitte mal ein bisschen mehr code (vorallem css).

hab ich das richtig verstanden du möchtest das es so aussieht als ob sich der rote banner um das bild darunter wickelt??

Mario

Edit: versuch mal den z-index zu erhöhen.

 

[Simmenfl]

Ja richtig. Ich habe es mal in Photoshop richtig hingezogen damit man es sich vorstellen kann.

.block {
border:1px solid #410C0C;
background-color:#ffffff;
margin-bottom:20px;
margin-top:40px;
position:relative;
}
.block_inside2 {
display:block;
border:1px solid #ffffff;
background: #ffffff url(images/background_block_slice.jpg)
repeat-x;
padding:30px;
overflow:auto;
}

#block_content {
overflow:auto;
margin-bottom:20px;
}

.titlebanner {
background: url("http://www.html.de/images/banner.png") no-repeat scroll left center;
height:63px;
width: 700px;
}

Habe die Positionierung auf absolut gestellt und mal die Z-Ebene erhöht, das hatte aber leider keinen Effekt.
Liegt daran dass der Overflow von Block Content auf Auto gestellt ist. Wenn ich das umstelle zerhaut es mir das ganze Design und es beginnt ein riesen Flickenteppich. Habe jetzt leider keine Zeit das durchzuexerzieren aber vielleicht klappte es so. Ich probiere es morgen. Danke in jedem Fall!

 

[Space Vampire]

Mach eine negative margin-left.
Falls du auf dem Parent ein Padding hast, musst du dieses zur negativen Margin hinzu addieren.

 

[Simmenfl]

Hi, danke für den Tip. Das habe ich schon probiert und hat leider auch nicht funktioniert (siehe Ausgangspost)
"Wenn ich "titlebanner" regulär verschiebe (z.B. mit margin-left: -15px) schneidet sich der Banner am Rand des Parent DIVs ab."

 

[Space Vampire]

...
"Wenn ich "titlebanner" regulär verschiebe (z.B. mit margin-left: -15px) schneidet sich der Banner am Rand des Parent DIVs ab."

Das liegt am overflow:auto;
Setz das Banner über den aktuellen Parent und gib ihm auch eine negative margin-bottom um ihn an seinen Platz zu bringen

 

[Simmenfl]

Hallo,
nachdem ich mich zunächst einigen anderen Bereichen der Page gewidmet habe, habe ich das jetzt heute so fertig bekommen. 100% zufrieden bin ich aber nicht, da die Überschrift die ja am wichtigsten in der SEO ist jetzt ausserhalb von der Contentbox rumschwebt. Ich habe zwar keine Ahnung ob das irgendeinen negativen Einfluss hat, aber es klingt mal so

Ergebnis kann auf Studieren in Mexiko angeschaut werden, wenn man einen beliebigen Artikel anklickt. Habe es sogar so einstellen können, dass je nach Länge der Überschrift das Banner mitwächst. Super!
Vielen Dank!

Flo

 

[Space Vampire]

100% zufrieden bin ich aber nicht, da die Überschrift die ja am wichtigsten in der SEO ist jetzt ausserhalb von der Contentbox rumschwebt. Ich habe zwar keine Ahnung ob das irgendeinen negativen Einfluss hat, aber es klingt mal so

DIV ist ein Element ohne jegliche Bedeutung, und fällt bei deinen SEO-Überlegungen nicht ins gewicht ;)
Sieht gut aus...