Ik ben bezig om een soort van 'spreekwolk' te maken in html/css. Nu heb ik daarvoor de code geschreven:
<style type="text/css">
.talk-bubble-container {
width: 636px;
float: right;
margin-right: 10px;
margin-top: 10px;
}
.talk-bubble-arrow {
background-image: url('http://media.devhouse.nl/v0.2/images/speak-bubble.png');
width: 31px;
height: 100px;
margin-top: 50px;
float: left;
z-index: 20;
margin-right: -2px;
}
.talk-bubble-text {
float: left;
width: 604px;
height: auto;
z-index: 1;
border: 1px solid #e8e6da;
min-height: 200px;
}
</style>
<div class="talk-bubble-container">
<div class="talk-bubble-arrow"></div>
<div class="talk-bubble-text">
<p>Dit is een test!</p>
</div>
<div style="clear:both;"></div>
</div>
De bedoeling is nu dat de class talk-bubble-arrow boven talk-bubble-text staat. Ik dacht dit te kunnen doen via z-index, dus ik heb talk-bubble-arrow de waarde 20 meegegeven, en talk-bubble-text de waarde 1. Ik dacht dat nu alles goed werkte. Maar helaas, de z-index doet zijn werk niet. het ziet er nu als volgt uit:
Dat oranje(??) ding is dus de talk-bubble-arrow, en deze staat onder talk-bubble-text. Dit zie ik doordat de border van talk-bubble-text eroverheen gaat. Dit mag dus niet.
Weet iemand misschien wat er fout gaat?
