HTML-Tooltip mit Hintergrundgafik und variabler Breite

ZapBee

Hi,

ich will ein Tooltip für ein MouseOver-Event bauen. Es soll teilweise transparent sein und sich in der Breite dem darin angezeigten Text anpassen. Es besteht aus je einer Grafik für linken und rechten Rand und dem Mittelteil mit Hintergrundbild und Text.
Etwa in dieser Form: ( [text] )
Die Positionierung auf der Seite ist nicht das Problem, ich kriege nur den kleinen Kasten nicht richtig hin.

Etwa so habe ich es bisher probiert:

Code

<div class="tooltip">
  <img src="linker_rand.png" />
  <span class="tooltiptext" style="background-image:url(mittelteil.png); background-repeat:repeat-x">
    Der Text mit variabler breite
  </span>
  <img src="rechter_rand.png" />
</div>

Probleme:
- ich kann dem span-Element keine Höhe zuweisen, weil Inline-Element.
- wenn ich ein div nehme, steht alles untereinander statt nebeneinander
- außerdem ist der Text nicht vertikal mittig.

Weiß jemand, wie das gehen könnte?

Danke schonmal
Zap

LigH

Eventuell:

HTML

<div class="tooltip">
  <table border="0" height="{gemeinsame Höhe}" cellspacing="0" cellpadding="{min(Breite_linker_Rand, Breite_rechter_Rand)/2}">
    <tr>
      <td background="linker_rand.png"></td>
      <td background="mittelteil.png" align="center" valign="middle" class="tooltiptext">Der Text mit variabler Breite</td>
      <td background="rechter_rand.png"></td>
    </tr>
  </table>
</div>

Beachte bitte, dass der MSIE mit halb transparenten PNGs (mit Alpha-Kanal) nicht klarkommt.

ZapBee

Zitat von LigH

Eventuell:

Danke, will zwar weg von Layout mit Tabellen, aber wenns nicht anders geht...
...
Klappt fast, nur wird nach den Bildern immer noch ein 1 Pixel breiter Leeraum eingefügt. Habe die Ränder link und rechts erstmal weggelassen. Vielleicht finde ich noch eine Lösung.

Zap

ac-chan

zu dem einen Pixel, das könnte von der tablle kommen, die nicht mal nötig ist. Schau dir mal margin und padding(beides CSS) für den einen Pixel an und um Bilder und Text neben einander zu bekommen, must du einfach nur float nutzen.

Das sollte es sein. Es lebe CSS.:D

katjarella

also das mit dem links / mitte / rechts Bild versteh ich nicht so ganz.

das mit dem div + Text Vertikal in der Mitte geht zu min. in Opera: t31667_text_mitte.htm für den IE muß ich mir noch nen hack überlegen

ZapBee

im Prinzip richtig, nur soll der Text horizontal mittig zwischen zwei Bildern sein. Aber et läuft erstmal mit Tabellen, darüber mache ich mir später Gedanken.
Danke für die Tipps!

Zap

LigH

Zitat von ac-chan

<img src="" style="float: left">text<img src="" style="float: left">

Das sollte es sein. Es lebe CSS.:D

Kann es nicht - wurde von dir gerade erwürgt... :nein:

1) HTML-Tag-Attribute mit Gleichheitszeichen => style="..."
2) Es gibt Abkürzungen für gleiche Ränder in mehreren Richtungen => margin: 0px; padding: 0px;
3) Einheiten immer mit Dimension angeben! Ausnahmsweise ist 0 immer 0, egal ob 0px oder 0cm...
4) Den Zweck der "line-height" verstehe ich noch nicht... mit
- width:#px;
- height:#px;
- vertical-align:middle;
- background-image:url("...");
läßt sich sicherlich auch alles wie gewünscht festlegen, aber ich gehe davon aus, dass man auch alles davon braucht.

Außerdem würde ich Tabellen nicht von vorn herein verdammen. Die haben immer noch ihre Berechtigung.

ac-chan

Zitat von LigH

Kann es nicht - wurde von dir gerade erwürgt... :nein:

1) HTML-Tag-Attribute mit Gleichheitszeichen => style="..."

AMG!!!!!!!!! ich habe ein Gleichheitszeichen vergessen. Hängt mich.

Zitat von LigH

2) Es gibt Abkürzungen für gleiche Ränder in mehreren Richtungen => margin: 0px; padding: 0px;

Ich habe mir angewöhnt immer bei sowas auszuschreiben, dann kann man leichter mal etwas anpassen(wenn ich das Styleattribut nutze).

Zitat von LigH

3) Einheiten immer mit Dimension angeben! Ausnahmsweise ist 0 immer 0, egal ob 0px oder 0cm...

Ich habe doch nur nullen genutz. Wo ist also das Problem?

Zitat von LigH

4) Den Zweck der "line-height" verstehe ich noch nicht...

Weil man span keine Höhe zuteilen kann, das geht nur über line-height.

Zitat von LigH

Außerdem würde ich Tabellen nicht von vorn herein verdammen. Die haben immer noch ihre Berechtigung.

Natürlich, haben Tabellen ihren sin. Aber sie sind Seiten Layoutmittel. Viele ander Strukturierungs und Layoutmittel, werden leider nicht genutzt. FAQ die auf Tabbel basieren stat auf definitionslisten, Menus die aus bildern und Tabbellen gebaut werden und so weiter. Alles Sch****. Ausserdem werden noch immer zuviele HTML Attribute genutzt, statt class, id und CSS.

LigH

Ich werde mich jedenfalls hüten, Tabellen auch da auf Krampf komplett durch DIVs zu ersetzen, wo sie wirklich nützlich wären. Meiner Meinung nach ist das gegebene Problem mit Tabellen und Zell-Hintergrundgrafik einfach und sauber lösbar; die Formatierung von DIVs und SPANs ist ja anscheinend doch etwas schwieriger...

Und solange es ein Krampf ist, den MSIE dazu zu zwingen, korrektes "cellspacing" per CSS zu emulieren, weil Microsoft einfach zu faul ist, CSS korrekt zu unterstützen, werde ich auch weiterhin auf Nummer Sicher gehen und das "cellspacing"-Attribut in Tabellen verwenden. Die Kombination aus "collapse" und unterschiedlich interpretierten "border"-Varianten ist mir einfach zu stressig.

Jetzt mitmachen!