Maskottchen mit Sprechblase

Hallo,

ich habe auf meiner Homepage ein Maskottchen, das in einer Sprechblase kurze Texte wiedergibt. Mein Problem ist, je mehr Text ich in die Sprechblase setze, desto weiter rutscht der Text nach rechts, obwohl die Sprechblase nur ein wenig größer wird:

Sprechblasentest

http://wishuload.de/images/thumbs/1230923727-47194-sprechblase.jpg

Hier ist ein Auszug aus der CSS-Datei:

[code].sbl {
background: url(images/bl.gif) bottom left no-repeat #EDEDED;
width: 5%;
min-width: 108px;
}

.sbr {
background: url(images/br.gif) bottom right no-repeat;
}

.stl {
background: url(images/tl.gif) top left no-repeat;
}

.str {
background: url(images/tr.gif) top right no-repeat;
padding: 10px;
}

.sb {
background: url(images/b_r.gif) 25px top no-repeat;
padding: 2px 20px 10px 20px;
}[/code]Und hier der HTML-Code:
[html]

Meine erste Sprechblase
Maskottchen
Lorem ipsum dolor...
[/html]Habt ihr vielleicht eine Idee, wo der Fehler liegen könnte?

…je mehr Text ich in die Sprechblase setze, desto weiter rutscht der Text nach rechts

Nein, das sieht nur in deinem Beispiel so aus. Sobald die linke Box höher wie die rechte ist, bleibt sie an der vorherigen hängen. darum wird der Abstand mit jeder Box größer.

Umschließe die beiden Blöcke mit einem

und füge ein clearendes Element ein:

[COLOR="DarkRed"][B]<div>[/B]
<div style="text-align:left;float:left">
...
...
<div class="sb"></div>
<img src="http://www.html.de/images/maskottchen.jpg" style="float:left; border:0px; margin-right:20px; margin-bottom:10px" alt="Maskottchen" />
</div>
<div style="text-align: left">
Lorem ipsum dolor...
</div>
[COLOR="#8b0000"][B]<br style="clear: left;" />
</div>[/B]

Ich habe die ersten beiden Beispiele mal weggemacht, der Abstand ist aber gleich geblieben:

http://wishuload.de/images/thumbs/1231005677-95692-Sprechblase2.jpg

Umschließe die beiden Blöcke mit einem

und füge ein clearendes Element ein:

Hat leider nichts gebracht :?

Die Boxen bleiben an der vorherigen, höheren Box hängen.
Wenn die rechte Box höher wie die linke ist passt es.

Grenze das Problem mal in einem kleinen Beipiel ein:

...
.lang {
float: left;
width: 80px;
background-color: #646464;
}
.kurz {
width: 200px;
margin-left: 90px;
background-color: #8F1D12;
}

...
...
<body>
<div class="lang">
lange box<br /> 1
</div>

<div class="kurz">
kurze box 1
</div>

<div class="lang">
hohe box<br /> 2
</div>
<div class="kurz">
kurze box 2
</div>

<div class="lang">
hohe box<br /> 3
</div>
<div class="kurz">
kurze box 3
</div>
...

Die Boxen bleiben jetzt vor der darüberliegenden, höheren Box hängen.

Wenn du sie durch clear trennst kann die nächste Box nach links rutschen:

[CODE]
.lang {
float: left;
width: 80px;
background-color: #646464;
}
.kurz {
width: 200px;
margin-left: 90px;
background-color: #8F1D12;
}

[COLOR=„DarkRed“]hr {
clear: both;
}


lange box
1
kurze box 1
[COLOR="#8b0000"][B]
[/B]
hohe box
2
kurze box 2
[COLOR="#8b0000"][B]
[/B]
hohe box
3
kurze box 3
[COLOR="#8b0000"][B]
[/B] ... ...[/CODE] Auf einer halbfertigen Internetseite kann man sowas nur schwer durchschauen. Man probiert alles mögliche, bekommt irgendein Ergebniss und zieht vielleicht falsche Rückschlüsse.

Auch wenn es irgendwie funktioniert, probiert man beim nächsten (ähnlichen) Problem wieder nur ratlos rum.

Hmmm, so ganz verstehe ich nicht, was du meinst. Meinst du mit der kurzen Box das Maskottchen und die Sprechblase? Und die lange Box ist der Text? Oder wie meinst du das?

In deinem Fall ist die Box mit dem img und der Sprechblase die höhere.
Die Box mit dem Text ist weniger hoch wie die mit Sprechblase und img
Wenn du die Blöcke mit clear trennst ist das aber egal.
Es soll ja für beide Situationen vorgesorgt sein.

Ansonsten könntest du nur dafür sorgen, daß die rechte Box (die mit dem „lorem ipsumText“) immer die höhere ist.

Am besten du isolierst diese Boxen mal aus der restlichen Seite und zeigst nur die Reduktion auf dein Problem.

Ich habe es jetzt so gemacht:

[html]

Meine dritte Sprechblase hat noch viel mehr Text, deshalb gibt es auch mehr Probleme
Maskottchen


Lorem ipsum dolor...
[/html]Und dann sieht es so aus:

http://wishuload.de/images/thumbs/1231022568-33101-Sprechblase3.jpg

Das waren doch nur Beispiele an denen man leichter sehen kann weshalb die Boxen ohne clear nicht nach ganz links rutschen können.

Ehrlich gesagt bringt mich das nicht weiter. Hast du nicht eine Idee, was ich konkret bei meiner Seite ändern muss, damit sie richtig dargestellt wird?

Entschuldige ich habe mich geirrt.
Die Sprechblase wächst im ff tatsächlich in der Breite.

raetsel.css ( line 228 ) :

.sbl {
background:#EDEDED url(images/bl.gif) no-repeat scroll left bottom;
min-width:108px;
width:5%;
}

min-width raus und width: 108px;

.sbl {raetsel.css (line 228)
background:#EDEDED url(images/bl.gif) no-repeat scroll left bottom;
width:108px;
}

So, ich habe die Lösung inzwischen rausgefunden:

.sbl { background:#EDEDED url(images/bl.gif) no-repeat scroll left bottom; min-width:108px; width:100px; }

Damit funktioniert es einwandfrei :smiley:

Das hat doch neuroleptika im Prinzip einen Post zuvor vorgeschlagen. Mit dem Unterschied, dass Du noch min-width stehen hast, was die Breite auf 108 Pixel setzt [SIZE=1]außer z.B. im IE6, denn der kennt das nicht[/SIZE].

Ich weiß nicht, woran es lag, aber seine Lösung hatte nicht funktioniert. Vielleicht hatte ich auch was falsch gemacht. Aber ist ja egal, Hauptsache, es funktioniert jetzt ;Jump