✔ Bilder überlappen

[I am hungry]

Tach ersmal,

ich scheiter grade an dem Problem ein Bild über ein anderes rüber zu legen.
Hab schon viel versucht aber sie werden nur getrennt angezeigt.

Kann mir einer dabei irgendwie helfen?

Als CSS-Code:

#name{
margin-top: 0px;
float: middle;
background-image:url(bild.jpg) no-repeat center;
}

THX!

 

[Maik]

Hi,

vermutlich sprichst du wohl hiervon, denn obiger CSS-Code ist davon weit entfernt, zumal ich keine Regelmenge für das zweite Bild entdecke:

<span class="wrapper">
  <img src="bild1.png" class="img1" alt="" />
  <img src="bild2.png" class="img2" alt="" />
</span>

span.wrapper {
position:relative;
display:block;
}
span.wrapper img.img1 {
display:block;
}
span.wrapper img.img2 {
position:absolute;
top:10px; /* mußt du auf deine Vorstellungen anpassen */
left:10px; /* mußt du auf deine Vorstellungen anpassen */
}

Übrigens gibt es in der CSS-Spezifikation keinen Wert middle für die float-Eigenschaft - siehe hierzu Positionierung des Floats: die 'float'-Eigenschaft.

mfg Maik

 

[I am hungry]

Ok, danke.

Das klappt schonmal.

Und Wie krige ich das gleiche mit einer Tabelle hin?

Habe die navi in einer Tabelle gemacht und möchte das ein bild unter der navi ist.

 

[Maik]

Zeig bitte erstmal den Code deiner Tabelle und Navigation, sowie, wenn vorhanden, das dazugehörige Stylesheet, denn in eine Glaskugel kann ich gerade nicht gucken

mfg Maik

 

[I am hungry]

ok^^


HTML-Code:

<span class="wrapper">
 
<table border="0" align="center" cellpadding="0" cellspacing="0">  


<!--Navigationsleiste -->

<tr> 

						<td>  <img src="left.png" alt="left">  </td>  

					<td>  <a href="index.html"><img src="Home1.png" alt="Home" /></a>  </td>  

				<td> <a href="wir.html"><img src="Wir.png" alt="Wir" /></a>  </td>  

			<td>  <a href="jobs.html"><img src="Jobs.png" alt="Jobs" /></a>  </td>

		<td>  <a href="produkte.html"><img src="Produkte.png" alt="Produkte" /></a>  </td>

	<td>  <img src="right.png" alt="right"> </td>
	


</tr> 

  <img src="back.png" class="img1" alt="" />    <!--Bild1 -->
  <img src="panel.png" class="img2" alt="" />	<!--Bild2 -->


</span>

Und der CSS-Code:

span.wrapper {
position:relative;
display:block;
}
span.wrapper img.img1 {
display:block;
position:absolute;
top:100px; /* mußt du auf deine Vorstellungen anpassen */
left:100px; /* mußt du auf deine Vorstellungen anpassen */
}
span.wrapper img.img2 {
position:absolute;
top:100px; /* mußt du auf deine Vorstellungen anpassen */
left:100px; /* mußt du auf deine Vorstellungen anpassen */
}

Habe beim CSS-Code img1 auch das mit dem positionieren gegeben, hoffe das ich das auch richtig gemacht hab.

Also die Bilder sollen alle noch unter der Navi liegen das die Navi ebend drauf liegt.

 

[Maik]

Also so dürfte das nichts werden, mit der Tabelle und so

Gibt's davon auch ein, mitunter "zerupftes", Online-Beispiel, damit man mal diese beiden übereinander gelegten Bildern gesehen hat (Dimensionen, u.ä)?

mfg Maik

 

[I am hungry]

Ja, normalerweise schon.

Aber der Server von meinem Webspace Anbieter ist momentan down.

Habe das mit den Bildern jetzt einwandfrei hinbekommen die übereinander zu legen.

Nur ebend diese Navi noch nicht.

So wie auf dem zweitem bild solls dann nachher aussehen und auf dem erstem erkennt man wo die Navi gelandet ist :-D

 

[Maik]

Nur damit hier keine Mißverständnisse aufkommen: Wo sind die beiden Bilddateien "back.png" und "panel.png" in den Schnappschüssen enthalten?

mfg Maik

 

[I am hungry]

Also, back sind die Farbkleckse im Hintergrund und panel das weiße Teil was darüber liegt. Also das Design an sich.

 

[Maik]

Tja, da hast du dich dann aber absolut mißverständlich ausgedrückt.

Also die Bilder sollen alle noch unter der Navi liegen das die Navi ebend drauf liegt.

Demnach gehört deine Tabelle überhaupt nicht in meinen Code-Vorschlag, sondern dieser im Markup deiner Tabelle eine Tabellenzeile (<tr>...</tr>) darunter eingebunden.

Blos, wieso erzeugst du diesen Effekt nicht direkt in deinem Grafikprogramm, und nutzt ihn in einer einzigen Bilddatei, die sich dann bequem als Hintergrundbild weiterverwenden lässt?

So mußt du schauen, wie du nun wiederum den Inhalt über die beiden Bilder legst.

Daraus ergibt sich dann aber auch das Folgeproblem, dass der "grafische Hintergrund" auf den Inhaltsumfang überhaupt nicht reagieren wird, will heißen, wenn dieser die vorgegebene Bildhöhe überschreitet, überlappt er die Bilder an deren unteren Rand.

mfg Maik