Sprechblase

Webdesign & Technik HTML & CSS
#1

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 höher und nicht breiter wird:

raetselstunde.de/sprechblase.html

Screenshot mit wenig Text in der Sprechblase:

Screenshot mit viel Text in der Sprechblase:

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:

[code]

Meine erste Sprechblase
Maskottchen
Lorem ipsum dolor...
[/code]

Habt ihr vielleicht eine Idee, wo der Fehler liegen könnte?

#2

.sbl { background: url(images/bl.gif) bottom left no-repeat #EDEDED; width: 5%; min-width: 108px; // ich denke das ist der fehler }

#3

Mit den browsern, die ich installiert habe, kann ich das Problem
auf der angegebenen URI nicht nachvollziehen.

Bei welchem browser (Version?) tritt das Problem auf?

Könnte jedenfalls mit der Prozentangabe für width
zusammenhängen, eventuell auch mit min-width (ältere
Versionen des MSIE ignorieren das etwa, was dann allerdings
eher dazu führen sollte, daß der Bereich kleiner wird).
Für width: 5% ist der Bezug nicht so ganz klar, 5% wovon
bei einem Elternelement mit float und ohne Breitenangabe
(ist meine ich erst irgendwie in CSS2.1 definiert)?
Das kann ältere browser überfordern.
Wenn man da etwa width in Einheiten wie em oder ex festlegt,
wird das sowohl für die browser einfacher als auch für den Autor
überschaubarer, was da passiert.

#4

[quote=“hoffmann”]Mit den browsern, die ich installiert habe, kann ich das Problem
auf der angegebenen URI nicht nachvollziehen.[/quote]
Ich habe die Lösung inzwischen gefunden, deswegen ist der Fehler jetzt nicht mehr zu sehen :smiley:

Der Eintrag für die Klasse .sbl muss so aussehen:

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

So funktioniert es einwandfrei :slight_smile:

#5

Hmm, ich verstehe den Sinn nicht ganz.
Die Div Box soll eine feste Größe von 100px haben, aber mindestens 108px groß sein…
Ich würde mich sicherheitshalber von der min-width trennen, wenn sie keinen Zweck erfüllt.

#6

Ja, hast recht, das min-width ist überflüssig. Es funktioniert auch ohne. Ich habe es entfernt.

Edit: Ich hätte noch eine Frage dazu.

Wenn man genau hinsieht, sieht man um das Maskottchen herum einen 1px großen hellblauen Rahmen. Gibt es eine Möglichkeit, den zu entfernen?

#7

der rahmen ist teil von der grafik :wink:

#8

Ich wollte es ja zuerst nicht glauben, aber nachdem ich mir die Grafik in zehnfacher Vergrößerung angeschaut habe, habe ich festgestellt, dass du recht hast :smiley:

Danke für den Tipp :slight_smile:

#9

Kein Problem,
ich musste auch erst dreimal hinschauen um es zu sehen :wink: