• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Maskottchen mit Sprechblase

Status
Für weitere Antworten geschlossen.
Cujo

Cujo

Neues Mitglied
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



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;
}
Und hier der HTML-Code:
HTML: 
<div style="text-align:left;float:left">
<div class="sbl">
<div class="sbr">
<div class="stl">
<div class="str">Meine erste Sprechblase
</div></div></div></div>
<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>
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
Zum Vergrößern anklicken....

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 <div> und füge ein clearendes Element ein:
Code: 
[COLOR="DarkRed"][B]<div>[/B][/COLOR]
<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][/COLOR]
 
Zuletzt bearbeitet:
neuroleptika schrieb:
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.
Zum Vergrößern anklicken....

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



Umschließe die beiden Blöcke mit einem <div> und füge ein clearendes Element ein:
Zum Vergrößern anklicken....
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:
Code: 
...
.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"][B]hr {
clear: both;
}[/B][/COLOR]
...
...
<div class="lang">
lange box<br /> 1
</div>

<div class="kurz">
kurze box 1
</div>
[COLOR="#8b0000"][B]<hr />[/B][/COLOR]
<div class="lang">
hohe box<br /> 2
</div>
<div class="kurz">
kurze box 2
</div>
[COLOR="#8b0000"][B]<hr />[/B][/COLOR]
<div class="lang">
hohe box<br /> 3
</div>
<div class="kurz">
kurze box 3
</div>
[COLOR="#8b0000"][B]<hr />[/B][/COLOR]
...
...
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.
 
Zuletzt bearbeitet:
Ich habe es jetzt so gemacht:

HTML: 
<div class="lang">
<div style="text-align:left;float:left">
<div class="sbl">
<div class="sbr">
<div class="stl">
<div class="str">Meine dritte Sprechblase hat noch viel mehr Text, deshalb gibt es auch mehr Probleme
</div></div></div></div>
<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>
<br /><br />
</div>
<div class="kurz">
<div style="text-align: left">
Lorem ipsum dolor...
</div>
</div>
Und dann sieht es so aus:

 
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 ) :
Code: 
.sbl {
background:#EDEDED url(images/bl.gif) no-repeat scroll left bottom;
min-width:108px;
width:5%;
}
min-width raus und width: 108px;
Code: 
.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:

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

Damit funktioniert es einwandfrei :-D
 
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 außer z.B. im IE6, denn der kennt das nicht.
 
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
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben