http://artparade.dk[...]
Jeg har lidt problemer her. Brugernes personlige info skal stå inde i taleboblen, men som i kan se nu, er der temmelig meget plads foroven og forneden. Dette er fordi jeg har tre billeder: Toppen af taleboblen, et baggrundsbillede for midten og et billede forneden. Teksten står i foran bagrrundsbilledet på midten. Mit problem er så at hvis jeg gør margin-top og margin-bottom til -30px, følger baggrundsbilledet jo med oveni de to andre billeder. Og siden der er forskellig længde af teksten på de forskellige profiler, kan jeg ikke gøre dem uafhængige af hinanden.
Kildekoden er lidt rodet indtil jeg får ryddet op efter alle mine forsøg, men her er den:
<div style="margin-top: 20px">
<div class="c5">
<div class="c1">
<img src="gfx/monalisa.jpg" alt="ArtParade.dk" width="150" height="200"> <div style="text-align: right">
<img src="gfx/talebtap.gif" alt="ArtParade.dk" style="position: relative; top: -153px;">
</div>
</div>
<div class="c2">
<div class="c3"><img src="gfx/talebtop.gif" alt="ArtParade.dk"></div>
<div class="c4" style="text-align:left; background-image: url('gfx/talebmiddle.gif'); background-repeat: repeat-y">
<div style="background-color:yellow; width: 235px;position: relative;left:25px; margin-top: -0px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris posuere. Vestib
</div>
</div>
<div class="c4"><img src="gfx/talebbottom.gif" alt="ArtParade.dk" style="text-align:right"></div>
</div>
<div class="c3">hvadet</div>
</div>
Og mit style:
.c1 {
float: left;
width: 150px;}
.c2 {
float: left;
width: 265px;
border-left:0px solid #000000;}
.c3 {
clear: both;}
.c4 {
border-top:0px solid #000000;
clear:both;
text-align: right;}
.c5 {
border:0px solid #000000;}
--