<img>-Tag - wie bleibt der Text stehen mit "alt" oder "title"?

[Tamara-Jasmin]

Naja .. ich habe einen Text:

Angebotene Serviceleistung .. bla bla bla (und hier ist das Infobild)

Nach einfügen des CSS Codes wie oben angegeben sieht es nun so aus:

Angebotene Serviceleistung .. bla bla bla
(und hier ist das Infobild)

Ich will einfach nur, dass das Bild wieder in der selben Zeile steht wie der Text

Liebe Grüsse:
Tammy

[Tamara-Jasmin]

Nun gut .. länger wie einen Tag suche ich nicht weiter.
Hätte mir gefallen, hab auch den originalcode nochmal reingeladen, display:none auf verschiedene Parameter gesetzt - aber alles keine Chance.
Auch in einer Tabelle wird das nach unten versetzt. Müssen die Leute halt schneller lesen wenn die interesse an der info haben. Mehr kann ich
leider auch nicht machen. Danke Dir erst mal für den guten Tip - vielleicht kann ich das mal irgendwo anders gebrauchen.

Liebe Grüsse:
Tammy

[Tamara-Jasmin]

Es ist zwar keine "schöne" Lösung - aber eine alternative.
Habe dies hiermit gelöst.

<form action="button.htm">
<button style="width:57px;height:27px;" type="button" name="cs-info" onclick="alert('hier steht mein langer Text');">
<img src="./images/cs-info.jpg" width="20" height="20" alt="CS-INFO:" title="CS-INFO:"/>
</button>

Problem ist nur, dass das Bild in den Button eingefügt wird, und die Ausgabe nicht formatierbar ist. Man hat also immer den grauen Buttonrand um das Bild. Alternative ist hier wohl eine Gif Datei.
Optisch also nicht gerade ein Augenschmaus - aber es erfüllt seinen Zweck und ich muss mich wohl damit zufrieden geben, da es anders wohl nicht geht.

Habe übrigens auch festgestellt, das ein <div> im Text immer einen Umbruch erzeugt - deshalb läuft der andere Code nicht bei mir wie ich es haben wollte.

Liebe Grüsse:
Tammy

Nachtrag:
Habe noch ein wenig mit CSS gespielt - und da kann man ja richtig schöne sachen machen, die mit html nur schwer oder gar nicht gehen.
Die Buttonfarbe ist geändert, die Grösse usw. Hab das jetzt als Klasse - oder style angelegt - und funktioniert wunderbar! Allerdings ist doch wieder ein Zeilenumbruch drin.
Glückerweise aber hinter dem Text, so wie es sein sollte. Werde es jetzt mal mit festgelegten Tabellen versuchen, damit die Optik wieder passt.

[Tamara-Jasmin]

Also ich nochmal kurz:

WO wird hier bitte ein Seitenumbruch erzeugt?
Ich habe den Hintergrund mal rot eingefärbt, damit man das sieht. Ob MIT oder OHNE Tabelle - es spielt keine Rolle. Immer das selbe.

Hier mal der Originalcode - nur mit gekürztem Text (ist auch mit kurzem Text im Quellcode so):

<tr>
<td height="10px" bgcolor="red">
<li>Virensuche, sowie die Beseitigung nicht aktiver Viren durch kommerziellen Virenscanner(Virenscanner erforderlich!)
<form action="button.htm">
<button class="infobutton" type="button" name="cs-info" onclick="alert('hier steht mein Text');">
<img src="./images/cs-info.gif" width="50" height="20" alt="CS-INFO:" title="CS-INFO:"/>
</button></form></li>
</td>
</tr>

Und hier die Ausgabe:

htmlausgabe.jpg

Liebe Grüsse:
Tammy

[jade.78]

Kannst du das css dazu auch mal schreiben?

[Tamara-Jasmin]

Hi, wollte gerade schreiben:

habe es geschafft. Bin zum x-ten mal in meiner Suche auf diesen Artikel gestossen:
http://www.css4you.de/trickkiste/tr00003.html

und habe auch im <form>-Tag das so eingetragen - lief aber nicht, weshalb ich schon langsam am hyperventilieren war.

Bin dann mal auf die Idee gekommen das in das Hauptformular einzutragen - na und siehe da ...
somit dürfte auch Deine Variante wieder funktionieren, an die ich mich gleich nochmal setzen werde.
SO lernt man CSS

Liebe Grüsse:
Tammy

Nachtrag:
Deine Variante klappt leider immer noch nicht. Werde aber noch ein wenig basteln.

Nachtrag zum Nachtrag:
Ich habe im CSS bei #box ein display:inline eingefügt - und nun klappt auch Deine Variante.
SUUUUUUUUUUUUUUUUUUUUUUUUPPPPPERRRRRRRRRRRRRRRRRRRRRRR

[jade.78]

Super, dann hat es ja doch endlich geklappt.

[Tamara-Jasmin]

Ohne Dich würde ich immer noch suchen
Nur noch eine kleine optische Frage an der ich jetzt auch schon wieder fast 1 Stunde bastel:

position:absolute; bringt mir meine Hooverbox RECHTS direkt neben das Bild. Unsinnig!

position:absolute; left:10px; ist so wie ich es haben will und eingestellt habe, ABER:

es überdeckt damit mein Bild. Füge ich jetzt noch bottom ein, bringt er die Hooverbox
ja ganz unten an den Rand (auch mit auto).
Eigentlich will ich das so wie angegeben (position:absolute; left:10px, aber dann bündig unterhalb des Bildes. Schaut dann aus wie ein Kartenreiter. Lässt sich das machen?
Hier ist nicht wirklich eine Lösung:
http://de.selfhtml.org/css/eigenscha...tionierung.htm
Gesucht hab ich also wirklich genug ...

 
display:block;
width:700px;
position:absolute; left:10px;
background-color:#FFFFFF;
border:1px dashed black;
padding:10px;
font:normal 14px verdana, sans-serif;

Danke und liebe Grüsse:
Tammy

[jade.78]

Kannst du mal alles komplett posten, wie du das jetzt hast?
Also zum CSS auch noch den HTML Code.

[Tamara-Jasmin]

Der CSS dazu:

 
img {
border:none;
}
#box{
height:15px;
width:38px;
padding:0;
margin:0px;
display:inline;
border-right:1px #AAAAAA solid;
border-bottom:1px #AAAAAA solid;
font:bold 14px verdana, sans-serif;
background-color:#EEAAFF;
}
#box div{display:none;}
#box:hover div{
display:block;
width:700px;
position:absolute; left:10px;
background-color:#FFFFFF;
border:1px dashed black;
padding:10px;
font:normal 10px verdana, sans-serif;}

und der html:

 
<li>Virensuche, sowie die Beseitigung nicht aktiver Viren durch kommerziellen Virenscanner(Virenscanner erforderlich!)</li>
<div id="box"><img src="./images/cs-info.gif" width="38" height="15" alt="CS-INFO:"/>
 <div>
 <p><strong>Kurze Erkl&auml;rung zu dieser Option:</strong></p>
 <p>F&uuml;r die Ausf&uuml;hrung des Wartungsvertrages ist ein Virenscanner unbedingt erforderlich.
        Kostenfreie Virenscanner als Download aus dem Internet werden hier wegen der geringen Funktionsf&auml;higkeit
        und vieler Falschmeldungen nicht akzeptiert. Alternativ kann Computer-Stadl einen kostenlosen Onlinescan bei
        Norton durchf&uuml;hren, Viren werden aber nicht entfernt. Da im Falle eines gefundenen Virenbefalls der Scan
        mit einem ordentlichen Virenscanner nocheinmal durchgef&uuml;hrt werden muss ist der Verzicht auf einen
        kommerziellen Virenscanner absolut unvern&uuml;nftig und f&uuml;r Sie mit mehrkosten verbunden!</p>
 </div>
</div>

Melde mich erst Morgen NM wieder.
Schönen Abend allen lesenden hier

Liebe Grüsse:
Tammy

[jade.78]

Also so ganz weiß ich trotzdem noch nicht wirklich, wie du das nun haben möchtest.
Wenn ich jetzt deins nehme und über das Bild gehe, überdeckt die Hooverbox das Bild nicht:

bsp01.jpg

[Tamara-Jasmin]

Also bei mir sieht es so aus:

css.jpg

Da wo "CS-INFO:" steht - DARUNTER ist das Gif. Blöderweise überdeckt die Infobox
damit natürlich auch den Infotext im HTML links neben dem Bild.
Die Infobox soll eigentlich nur 15 pixel UNTER den Text und das Bild rutschen.
Mal sehen was ich da noch im Internet finde.

Liebe Grüsse:
Tammy

[Boothby]

Such mal nach "css tooltip"

Da findet man z.B. das: http://downloads.sixrevisions.com/cs...ips/index.html

[Tamara-Jasmin]

Danke, hab mir den Quellcode mal angesehen. Dort funktioniert es - wenn ich gewisse Dinge ändere, habe ich ein ähnliches Phänomen wie bei mir - also habe ich diese Teile bei mir so wie da eingefügt - und es klappt nicht.
Ich stelle das erst mal ganz hinten an. Theoretisch könnte ich den Code 1:1 von dort übernehmen, müsste dann aber mein gesamtes Dokument wieder komplett ändern, bin aber froh, dass ich es schonmal soweit habe

Interessant ist aber das mit den kleinen Bildern in den Boxen, werde das mal angehen wenn ich die Optik von meinem Formular bearbeite

Liebe Grüsse:
Tammy