Bild richtig positionieren

Forum Partner+Friends LinkUs Downloads KNW Suche TS³ Viewer Twitter Facebook

Sie sind nicht angemeldet. Anmelden

Sumale.nin

unregistriert

Sonntag, 14. März 2010, 21:56

Bild richtig positionieren

Hallo,
kann mir jemand das ganze richtig plazieren?
Mit Padding bekomme ich es auch nicht hin.

HTML

<span style="background-image:url(http://s10b.directupload.net/images/100314/kcbsfz8c.jpg); background-repeat:no-repeat; width:81px; height:115px;"><img src="http://s10b.directupload.net/images/100314/9emhjech.png" width="101" height="126" /></span>

Hintergrundbild: 88x115 px
Huelle vorne: 101x126 px
Ich habe die Grafiken extra mal hochgeladen. Ich hoffe das mir jemand dabei helfen kann. Das Hintergrund Bild soll richtig hinter der Hülle platziert werden.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Sumale.nin« (14. März 2010, 22:04)

Muetze

Ein Pazifist mit der Waffe in der Hand

Beiträge: 681

Geschlecht: Männlich

Wohnort: zu Hause

PHPKIT Version: 1.6.5

Sonntag, 14. März 2010, 22:03

OK, wenn ich Dich richtig verstanden habe....

Du kannst auch ein Bild verschieben bis es auf das Hintergrundbild passt, zBsp so:

	HTML
1	<img src="http://s10b.directupload.net/images/100314/9emhjech.png" width="101" height="126" style="position:relative; left:5px" />

Es geht nicht darum zu haben was man will, sondern zu schätzen was man hat!
Blutrausch HP
Mauern sind auch nur Steine & Wassertropen können auch mal Wassermengen werden!

Sumale.nin

unregistriert

Sonntag, 14. März 2010, 22:06

Klingt interessant, werde ich mal testen ob das funktioniert!
Edit://
Ich würde das gerne als CSS verwenden, sprich Links, rechts, oben und unten die Grafiken als Border rausschneiden und dann noch quasi den Deckel, weist du was ich meine? Hast du davon Ahnung?

Wenn ich padding verwende, versetzen aber alle Grafiken das ist auch mies.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Sumale.nin« (14. März 2010, 22:18)

Muetze

Ein Pazifist mit der Waffe in der Hand

Beiträge: 681

Geschlecht: Männlich

Wohnort: zu Hause

PHPKIT Version: 1.6.5

Sonntag, 14. März 2010, 22:28

Also ich verschiebe alle meine Grafiken immer mit den Angaben (bis jetzt mit Erfolg):

	Quellcode
1	style="position:relative; left:5px; top: 5px;" />

Das Du alle Grafiken versetzt, kann daran liegen, dass das Attribut im Span ist, also wird auch Alles darin (<span>....</span>) verschoben.

Aber wenn Du es direkt im IMG zBsp anwendest, wird auch nur das Bild verschoben. Man kann natürlich Alles in extra DIV's packen.

Es geht nicht darum zu haben was man will, sondern zu schätzen was man hat!
Blutrausch HP
Mauern sind auch nur Steine & Wassertropen können auch mal Wassermengen werden!

Sumale.nin

unregistriert

Sonntag, 14. März 2010, 22:47

Ich bekomme es einfach nicht hin, bin wohl zu doof dafür, so sieht der Code aktuell aus:

HTML

          <table class="contentpaneopen">
          <tr>
              <td valign="top" style="background-image:url(./data/thumbnails/{cat_id}/{thumbnail_file_name}); background-repeat:no-repeat; width:81px; height:115px;"><img src="{template_url}/img/huelle.png" width="101" height="126" /></td>
          </tr>
          </table>

Egal wie ich das padding setze ab ein gewissen punkt wird nichts mehr verschoben!

Muetze

Ein Pazifist mit der Waffe in der Hand

Beiträge: 681

Geschlecht: Männlich

Wohnort: zu Hause

PHPKIT Version: 1.6.5

Sonntag, 14. März 2010, 23:56

So,] habe ich jetzt Dein Bild genommen & eins von mir drauf gepackt & verschoben.

Vorschau
Vorschau, ohne linke Navi

Mein Quelltext:

HTML

<table border="0" width="100%" cellpadding="4" cellspacing="0">
 <tr>
  <td valign="top" style="background-image:url(http://s10b.directupload.net/images/100314/9emhjech.png); background-repeat:no-repeat; width:81px; height:115px;">
	<img src="fx/icons/teamspeak.png" alt="" />
  </td>
 </tr>
 <tr>
  <td valign="top" style="background-image:url(http://s10b.directupload.net/images/100314/9emhjech.png); background-repeat:no-repeat; width:81px; height:115px;">
	<img src="fx/icons/teamspeak.png" alt="" style="position:relative; top:20px; left:20px;" />
  </td>
 </tr>
</table>

Das ist doch der gewünschte Effekt oder nicht?

Das dritte Bild ist neu, da ist die Hülle über dem Bild (erfordert etwas Spielerei), aber das ist doch so wie es gewollt ist oder nicht?

HTML

 <tr>
  <td>
  <img src="fx/icons/teamspeak.png" alt="" style="position:relative; top:-35px; left:20px; z-index:998;" />
  <img src="http://s10b.directupload.net/images/100314/9emhjech.png" alt="" style="position:relative; left:-60px; z-index:999;" />
  </td>
 </tr>

Auf der Beispiel Seite, habe ich gleich noch damit etwas rum gespielt, die Hülle zu öffnen/zuschließen per Java.

Es geht nicht darum zu haben was man will, sondern zu schätzen was man hat!
Blutrausch HP
Mauern sind auch nur Steine & Wassertropen können auch mal Wassermengen werden!

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Muetze« (15. März 2010, 01:08)

Proggi

schaut regelmäßig rein

Beiträge: 263

Geschlecht: Männlich

Wohnort: Berlin

PHPKIT Version: 1.6.5

Montag, 15. März 2010, 06:42

Moin Moin

Um von einem Bild nur einen bestimmten Ausschnitt anzeigen zu lassen, gibt es die Eigenschaft clip
Weiterhin kann man ein Hintergrundbild auch mit background-position Pixelgenau positionieren.

Probiere einfach mal ein wenig mit den verschiedenen Eigenschaften rum.

Netten Gruß

Andy --- Proggi

Es gibt viel zu tun - packen wir es an.....

Muetze

Ein Pazifist mit der Waffe in der Hand

Beiträge: 681

Geschlecht: Männlich

Wohnort: zu Hause

PHPKIT Version: 1.6.5

Montag, 15. März 2010, 08:21

Cool, das clip kannte ich auch noch nicht. Naja, jetzt Alles noch mischen & Du hast es wie Du es haben willst

Es geht nicht darum zu haben was man will, sondern zu schätzen was man hat!
Blutrausch HP
Mauern sind auch nur Steine & Wassertropen können auch mal Wassermengen werden!

Bild richtig positionieren

Bild richtig positionieren

HTML

HTML

Quellcode

HTML

HTML

HTML

Ähnliche Themen