Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

peter_echevers · 20.04.2010

Hallo liebe Fachleute,
in meinem früheren Internetdesigner konnte ich Bilder übereinander legen, wenn ich ihnen eine Ebene zuwies. Damit konnte ich einem tiefer liegenden Bild eine Animation verpassen, die das darüber liegende - evtl. kleinere Bild - nicht betraf.
Linkzuweisung zu einzelnen über dem ersten Bild liegenden Foto waren so kein
Problem. Sicherlich geht das auch mit einem so modernen Programm, wie dem Dreamweaver, aber trotz Handbuch bleibe ich ratlos. Kann mir da einer aufs Pferd helfen? Ich verspreche auch mit Indianerehrenwort, anschließend niemandem 'vom hohen Ross zu behandeln'!

Herzlichst
Peter Echevers

sokie · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

dumusst nichteinmal mit 'Ebenen' arbeiten,wenn es nur um zwei Bilder geht,die übereinanderliegen.
daskannst du auch hinbekommen, wenn du ein 'behälter'-element hast dem du das untenliegende Bild als Hintergrund zuweist. zB:

Code:

<div style="background: url(meinHintergrund.gif)">
  <img src="meinVordergrundBild.gif />
</div>

das ist keine Frage von Programmen, sondern css.

eine andere Möglichkeit ist die Bilder per Positionierung übereinander zu legen

HTML:

<img id="hinten" src="meinHintergrund.gif" />
<img id="vorn" src="meinVordergrundbild.gif" />

Code:

<style type="text/css">
img{
  position:absolute;
  top: 50px;
  left: 50px;
}
</style>

hier werden zwei Bilder auf der Seite an exakt der selben postion vom linken und oberen Rand positioniert, und liegen so übereinander.
das zuerst im html notierte liegt dabei unter dem später notierten.

wie man diese 'Stapelreihenfolge' ändern kann, geht aus dieser Seite hervor: .

übrigens ist bei http://de.selfhtml.org/index.htm alles zu finden, was dich "html-mässig" vielleicht nicht gleich aufs 'hohe', aber doch überhaupt erstmal aufs Pferd bringt.

peter_echevers · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

Ich liebe dieses Forum, hier schaut man auf newbies nicht herunter, die
Antworten sich fachlich qualifiziert und verständlich formuliert. Wo gibt
es das heute noch?
Ja, das war schon schön mit den Ebenen, da hätte ich siebzehn Bilder übereinander
legen können, einfach eine neue Ebene zuweisen und schon blieb alles schön
an seiner Stelle sichtbar - in allen Browsern, aber das war den modernen
Programmierern dann bestimmt zu einfach und somit geht es dann in neuen
Programmen nur mit einem aufwendigeren workarround. Ich knie ich dann mal rein.

Herzlichen Dank erst einmal.
Peter Echevers

Karin1969 · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

Hallo Peter,
falls du Ebenen übereinanderlegen möchtest, egal ob mit Bild- oder Textinhalten, dann solltest du die Ebenen(Stapel)reihenfolge mit dem Z-Index steuern (1unten - 9999oben).

Hoffe ich habe deine Frage richtig verstanden, wenn nicht, dann poste doch bitte mal deinen Code, dann kann man besser weiterhelfen.

LG
Karin

peter_echevers · 21.04.2010

Das war es: "Ebenen mit Z-Index" steuern.
Und wie macht man das? Wo in meinem Dreamweaver
finde ich den? Element anklicken... und dann?

Peter Echevers
PS
Was für einen Code möchtest Du von mir? (Jetzt schlägt jemand lachend die
Hände über dem Kopf zusammen, gell!)

Habe den Z-Index tatsächlich gefunden, war ganz schön versteckt, aber mir entkommt so schnell keiner. Mittlerweile ist es mir sogar gelungen, ein Favicon.ico einzubauen - grins.

Herzlichst
Peter Echevers

esupanetz · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

Hi Peter,

der Code wäre das HTML gewesen, das dein Dreamweaver erzeugt - falls du es nicht selber schreibst *ggg* bzw die css-Datei die deiner Website hoffentlich die richtigen Formatierungen gibt

lG

Eva

sokie · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

peter_echevers schrieb:
Ja, das war schon schön mit den Ebenen, da hätte ich siebzehn Bilder übereinander
legen können, einfach eine neue Ebene zuweisen

wie einfach ist einfach?
wenn du 17 Bilder übereinanderstapeln willst, zeihst du einfach diese Bilder in deinen Container und notierst eben

Code:

#container{
  position relative;
}
#container img{
  position: absolute;
  top:0;
  left: 0;
}

im css
- das ist schneller und einfacher, als jedes mal eine "neue Ebene" anzulegen.

Llynyania · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

zerhackeln Browser nicht Wechselangaben... mal absolut - mal relative, das wird doch ein hin-und hergewackel... nicht?

esupanetz · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

Nö, mal absolute und mal relative macht durchaus Sinn.
Genau dadurch kriegst die Sachen an die Stelle wo sie hin sollen.

lG

Eva

sokie · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

Llynyania schrieb:
zerhackeln Browser nicht Wechselangaben... mal absolut - mal relative, das wird doch ein hin-und hergewackel... nicht?

esupanetz schrieb:
Nö, mal absolute und mal relative macht durchaus Sinn.
Genau dadurch kriegst die Sachen an die Stelle wo sie hin sollen.

lG

Eva

genau. Damit sich die Bilder überhaupt im container positionieren lassen BRAUCHT dieser die Positionsangabe. "relative" deshalb, damit dieser container im Dokumentenfluss bleibt. Einfach mal ausprobieren.

Llynyania · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

Ich kenne ganze Webseiten, die ohne jegliche Position in der css auskommen und korrekt angezeigt werden.

Das ganze funktioniert mittels margins und paddings, bei der richtigen Verschachtelung der wenigen divs kein Problem. Die divs enthalten auch keine id, sondern nur class.

Diese Designs sind sehr kompatibel mit den Browsern und ich brauche keine positions.

sokie · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

lies doch einfach nochmal den Eingangspost. hier geht es doch darum wie man mehrere Elemnte übereinander schichten kann.
Wenn du das ohne verwendung von "position" hinbekommst, sind wir gespannt auf deine Lösung.
ps:das ist natürlich Quark - die Zuweisung von z-index wiin #5 angefragt setzt das verwenden von "position" voraus.

peter_echevers · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

... einfach ab damit in den Container! Container? Jetzt habe ich mit Mühe das Z-Index entdeckt, aber wo bitte ist der Container?

Ganz herzlich
Peter Echevers

Llynyania · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

Habe die Bilder NICHT in ein div gepackt, sondern in ein paragraph.

Sie liegen übereinander, habe sie extra etwas versetzt, damit man das erkennt. Pixelgenau kann man das dann natürlich über die margin-Angaben machen.

Frage ist: was ist aussenherum, wenn man das jetzt irgendwo einbaut. Ggf. können andere Anweisungen darüber beeinflussend wirken.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.oben {
margin 0;
}
.mitte {
margin-top: -30px;
margin-left: 10px
}
.unten {
margin-top: -70px;
}

</style>
</head>

<body>
<p class="oben"><img src="rot.jpg" /></p>
<p class="mitte"><img src="gelb.jpg" /></p>
<p class="unten"><img src="gruen.jpg" /></p>

</body>
</html>

Pixelverwender · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

peter_echevers schrieb:
... einfach ab damit in den Container! Container? Jetzt habe ich mit Mühe das Z-Index entdeckt, aber wo bitte ist der Container?

Als Container wird auch gern das <div>-Element bezeichnet, da es als Container für Inhalte (Bilder, Texte, andere divs) dient.

esupanetz · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

Den Container könnte man mit <div> erklären / übersetzen

Edith sagt - knapp zu langsam

Pixelverwender · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

@Llynyania: Also der IE 8 macht das daraus (Iron, ein Chrome-Derivat, ebenfalls):

Llynyania · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

jou - isch abe aber kein IE8... nanü... ok ok er möchte die Bilder so nicht darstellen, die Position aber schon...

Gut, ich habe alles so kurz wie möglich gehalten, dass der img-tag dem IE mglw. zu kurz geraten, oder ihm der Pfad nicht schmeckt, das war nicht in meinem Beachtungsrahmen.

Kann nur mit Safari und FF dienen, der Winrechner steht im Keller - mea culpa - und da ist nur XP druff.

esupanetz · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

Tja Llynyania,

Seiten sollten schon auch für die neueren Versionen getestet werden ;-)
Und ob der img-tag wirklich schuld ist? Naja....

lG

Eva

peter_echevers · 21.04.2010

AW: Im Dreamweaver CS4 Bilder übereinander legen - kriege ich noch nicht hin!

Vielleicht darf ich mein Problem anhand eines Seitenbeispiels erläutern. Auf meiner Seite habe ich in der Haupttabelle ein Bild - ein animiertes GIF.
Nun kann man deutlich an unteren Bildrand sehen, dass sich die Schrift ebenfalls in der
Animation spiegelt. Könnte ich über dieses Gif (dann ohne Schrift) ein kleineres Bild nur mit der
Schrift legen, wäre dieser unerwünschte Effekt wohl weg, da das kleinere Bild nicht animiert wäre. PE