Layout mit Kanten - Weiss nicht weiter
Nabend zusammen
Auf dieser Seite möchte ich die Inhalte durch abgeschrägte Kanten trennen.
Das hab ich so in etwa hingekriegt, jedoch weiss ich nun nicht mehr weiter :o.
OMG ist das schwer zu beschreiben :rolleyes: :D
Jedes Text-Element besteht aus einem Bild, H2 und Text und hat abwechslungsweise die Hintergrundfarbe Braun oder Weiss.
Alle Elemente enthalten ein DIV mit einer Kante nach oben und ein DIV mit der Kante nach unten.
Jetzt ist das Problem bei den Bildern auf der linken Seite (rechts geht es, mit z-index :rolleyes:)-> Wenn ich das Bild über das DIV mit der Kante ziehe, kommt es ins darüberstehende Element.
Das habe ich versucht mit overview:hidden; zu lösen, will aber irgendwie nicht.
Link zu Seite
Die obere Kannte -> CSS
Code:
div.brown div.diagonal-oben {
margin-bottom:-65px;
position: relative;
height: 50px;
width: 100%;
top: 25px;
left: -10px;
padding-top: 10px;
padding-left: 15px;
background-color: #eee6d9;
-webkit-transform: rotate(-2deg);
z-index:-1;
}
HTML sieht so aus:
HTML-Code:
<div class="hell ce_text unser-kaffee block">
<div class="diagonal-oben"></div>
<div class="inside-image">
<div class="inPic">
<figure class="image_container float_above">
<img src="tl_files/brunello-caffee/startseite-themenbilder/Bild1-geschnitten.png" width="3000" height="1766" alt="">
</figure>
</div>
<div class="inText">
<h2>Unser Kaffee</h2>
<p></p>
</div>
</div>
<div class="diagonal-unten"></div>
</div>
Vielleicht hat wer einen Ansatz für mich, wie ich das noch hinbiegen kann.