✔ Bild mit fester Position über einen Button

[Aleyna23]

Hi,

ich möchte über einen Button ein Bild legen undzwar genau mittig vom Button.
Das Bild sollte immer fest mittig sein, auch beim minimieren / maximieren des Bildschirmes.

Der Button und das Bild sind in einer <TD>
(Zur zeit noch nebeneinander).

Danke und Gruß

 

[Maik]

Hi,

kannst du uns mal einen Einblick in den derzeitigen Quellcode gewähren?

 

[Aleyna23]

klar doch

<TD>					
<FORM style="margin: 0px; padding: 0px;" .....>			

<INPUT type="submit" style="width: 110px;" name="button" value="hinzufügen">

<img src='<%=response.encodeURL("/images/DeleteMessage.gif")%>' border="0" title="keine Berechtigung">					

</FORM>
</TD>

 

[Maik]

Probier's mal hiermit:

<table style="width:100%;"><tr>
<TD style="text-align:center;">
<FORM style="margin: 0px; padding: 0px;" .....>

<INPUT type="submit" style="width: 110px;" name="button" value="hinzufügen">

<p><img src='<%=response.encodeURL("/images/DeleteMessage.gif")%>' border="0" title="keine Berechtigung"></p>

</FORM>
</TD>
</tr></table>

Wenn die Grafik über dem Button sitzen soll, dann tausche ihre Reihenfolge im Quellcode:

<table style="width:100%;"><tr>
<TD style="text-align:center;">
<FORM style="margin: 0px; padding: 0px;" .....>

<p><img src='<%=response.encodeURL("/images/DeleteMessage.gif")%>' border="0" title="keine Berechtigung"></p>

<INPUT type="submit" style="width: 110px;" name="button" value="hinzufügen">

</FORM>
</TD>
</tr></table>

 

[Aleyna23]

nee...mit <p><img... hat das ganze einen Absatz.
Der Button und das Bild sind aber untereinander..Das Bild soll ja auf dem Button sein.


sorry, ich sehe grade das ich es falsch beschrieben habe.
Das bild (ein kreuzchen) soll AUF DEM Button mittig sein. also übereinander.

 

[Maik]

Sorry, dann hab ich dich mißverstanden.

An meiner vorgeschlagenen Struktur ändert sich nichts, es wird lediglich mit einem negativen margin-top-Wert die Grafik nach oben verschoben und so über den Button gelegt.

Der margin-top-Wert entspricht dann der Grafikhöhe:

<table width="100%" border="1"><tr>
<TD style="text-align:center;">
<FORM style="margin: 0px; padding: 0px;" .....>

<INPUT type="submit" style="width: 110px;" name="button" value="hinzufügen">

<p><img src='<%=response.encodeURL("/images/DeleteMessage.gif")%>' border="0" title="keine Berechtigung" style="margin-top:-20px;"></p>

</FORM>
</TD>
</tr></table>

 

[Aleyna23]

danke für deine Hilfe.
Aber ich wei0 leider nicht was du meinst mit: margin-top entspricht meiner Grafikhöhe.
Welche Grafikhöhe? Vom bild oder Button?

 

[Maik]

Grafik = Bild

Wenn das Bild eine Höhe von 20px besitzt, muss es um diesen Wert nach oben verschoben werden, also margin-top:-20px.

 

[Aleyna23]

ok, mein bild ist 16px. ich habe margin-top:-16px;
Aber leider es rührt sich garnichts.
Jetzt ist mein Button oben. Mein Bild darunter (mittig). Das Bild geht nicht nach oben.
:-(

hmmm

 

[Maik]

Setz mal die Polsterungseigenschaften des p-Elements auf null:

p {
margin:0;
padding:0;
}

und wende margin-top:-16px auf das p-Element an:

<p style="margin-top:-16px;"><img src='<%=response.encodeURL("/images/DeleteMessage.gif")%>'  border="0" title="keine Berechtigung"></p>