2 Bilder übereinandern

**Mr.Sailer** · 15-02-2005, 13:29

Hallo,

Ich habe da ein kleines Problem mit 2 Bildern. Ich habe ein jpg Bild das ich als Hintergrund verwenden möchte und ein gif Bild das in das jpg Bild eingefügt werden soll. Das Gif Bild muss immer am gleichen Ort im jpg Bild sein. Also wenn ich das mit css und und positionen mache ändert sich natürlich die Position des gif je nach Bildschirmauflösung.

Hat jemand vieleicht eine gute Idee wie ich das lösen könnte?
Es muss nicht unbedingt in html sein. Wenn jemand ein Programm kennt mit dem ich das gif und jpg zu einem gif machen kann bin ich auch happy

Hoffe trotzdem, dass es das richtige Forum ist.

MfG
Mr. Sailer

**BlueJay** · 15-02-2005, 14:34

meine bisherige Lösung, wenn die Bilder gleich groß sind:
ein Mini-Tabellchen mit 1 Zeile, 1 Spalte,
Hintergrundbild: das Hntergrundbild.
Inhalt der Zelle: das Vordergrundbild

Tabelle sollte keine margins und paddings haben, das geht nicht nur über's CSS, sondern zwingend erforderlich: <table cellpadding=0 cellspacing=0>

Die CSS-Variante mit dem Hintergrundbild als Hintergrund des Images funktioklappert noch nicht mit allen Browsern.

so long,
BlueJay

**Mr.Sailer** · 15-02-2005, 14:48

Vielen Dank für den Tipp.

Leider sind nicht beide Bilder gleich gross. Und ich habe leider keine grosse erfahrung mit .gif und auch kein Programm mit dem ich das gif Bild bearbeiten könnte.

Ist es irgendwie möglich das Bild Inerhalb von einer Tabelle zu platzieren also irgendwie das top und das left auf den Tabellenrand zu beziehen und nicht auf den Bildschirm?

MfG
Mr. Sailer

**Pingu** · 15-02-2005, 14:55

Zitat von Mr.Sailer

Ich habe da ein kleines Problem mit 2 Bildern. Ich habe ein jpg Bild das ich als Hintergrund verwenden möchte und ein gif Bild das in das jpg Bild eingefügt werden soll. Das Gif Bild muss immer am gleichen Ort im jpg Bild sein. Also wenn ich das mit css und und positionen mache ändert sich natürlich die Position des gif je nach Bildschirmauflösung.

Also das ist mir neu. Wieso sollte sich die Position ändern bei einer Änderung der Auflösung? Position einfach als absolut in Pixeln festlegen.

Pingu

EDIT: Beispiel: http://www.csszengarden.com/?cssfile...n/zenocean.css Bei mir befindet sich der Taucher immer an der selben Stelle, egal bei welcher Auflösung.

**Mr.Sailer** · 15-02-2005, 15:10

Naja das Problem ist nicht das ese mit der Seite Scrollt, Die Situation sieht so aus:

Ich habe einen Fernseh als jpg und eine Animation als .gif und ich möchte die Animation im Fernseher laufen lassen.

Wenn ich die Postition mit Absolut angebe ist das Problem das ich das bei einer Auflösung von 1024x768 ausgerichtet habe. Wenn ich jetzt aber auf einem anderen PC schaue ist die Animation vieleicht ein wenig zu weit Links oder Rechts, Oben oder unten. Und wenn ich die Auflösung auf 800x600 Einstelle stimmt es hinter und vorne nicht mehr.

Vieleicht habe ich dich auch falsch verstanden

MfG
Mr. Sailer

**msi** · 15-02-2005, 16:15

in css manier:

Code:

<table style="border-collapse: collapse; border-spacing: 0;">

border-spacing sollte auch noch angegeben werden, da sonst der konqeror problem macht, der kann border-collapse scheinbar nicht.

**michael.sprick** · 15-02-2005, 16:51

ich würde den Fernseher schneiden und ihn via Tabelle oder CSS um das GIF herumbauen...

**BlueJay** · 15-02-2005, 19:24

Zitat von msi

in css manier:

border-spacing sollte auch noch angegeben werden, da sonst der konqeror problem macht, der kann border-collapse scheinbar nicht.

Jaja, an den Konqueror denkst du, an den IE nicht. Der ist mit seinem CSS noch nicht so weit

so long,
BlueJay

**Pingu** · 16-02-2005, 06:13

Zitat von Mr.Sailer

Ich habe einen Fernseh als jpg und eine Animation als .gif und ich möchte die Animation im Fernseher laufen lassen.

Und wo ist das Problem? Das ist ja wohl das einfachste mit CSS:

HTML-Code:

<div class="fernseher"><img src="film.gif"></div>

Code:

.fernseher {
    display: block;
    width: (breite-vom-fernseher);
    height: (höhe-vom-fernseher);
    margin: 0;
    padding: (fernseherrand-oben) (fernseherrand-rechts) (fernseherrand-unten) (fernseherrand-links);
    background-position: top left;
    background-repeat: no-repeat;
    background-image: url(/images/fernseher.jpg);
}

.fernseher img {
    border: 0;
}

Das schöne damit ist, durch die Klassendefinition kannst Du beliebige viele Fernseher auf einer Seite platzieren. Sie werden dabei wie ein ganz normales <img>-Tag behandelt. Man kann sie also noch zusätzlich rechts oder links positionieren, wenn man einen Fließtext rundherum haben möchte.

Wie Du siehst eine Sache von 2 min.

Tabellen sind nicht zur Platzierung von irgendwelchen Inhalten da. Tabellen sind da, um tabellarische Inhalte zu präsentieren.

Pingu

**BlueJay** · 16-02-2005, 07:47

Zitat von Pingu

Tabellen sind nicht zur Platzierung von irgendwelchen Inhalten da. Tabellen sind da, um tabellarische Inhalte zu präsentieren.

Fein, wenn das CSS schon überall wie geplant funktionieren würde.

Autsch! Ich bin hier ja in einem Linux-Forum! Das wird Flames geben!

BlueJay

**Pingu** · 16-02-2005, 09:40

Zitat von BlueJay

Fein, wenn das CSS schon überall wie geplant funktionieren würde.

Autsch! Ich bin hier ja in einem Linux-Forum! Das wird Flames geben!

<flame mode="ontopic">
Aber für den Hinweis: Best view with IEx.x in 1024 x 768. Ist sich keiner zu schade? Unabhängig davon geht obiges auch mit dem IE.
</flame>
<flame mode="offtopic">
Ja keine Riskien eingehen, denn es könnte ja noch jemand und vielleicht müßte man da. Da bleibe ich doch liebe bei dem was ich kenne. Irgendwie klingt das für mich typisch Deutsch. Das ist auch der Grund warum es mit der Politik und anderen Dingen in Deutschland nicht vorwärts geht. Alle wollen was neues. Aber wenn es ans anpacken geht, dann ziehen alle den Schwanz ein.
</flame>

Pingu