Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Ebenen über einander drucken.
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Ebenen über einander drucken.

Pages: [1]
geschrieben von Oliver Pradetto am 19.06.2003 - 13:18
Wie kann ich gewährleisten, dass verschiedene Ebenen die übereinanderliegen so ausgedruckt werden, wie diese auf dem Bildschrim angezeigt werden (statt hintereinander)?

Herzliche Grüße
Oliver

Hier mal ein Link zum Verständnis:

http://www.blaudirekt.de/test/DK_Test.html

geschrieben von Schwefel am 19.06.2003 - 23:15
versuch mal das Bild selbst ebenfalls in ein DIV
zu setzen und positioniere beide Elemente per css
und mit verschiedenen z-index's... vielleicht geht's dann...

Oder Du verschnipelst das Bild und bastelst alles
in eine Tabelle rein und läßt dort wo die Adresse hin soll frei.

geschrieben von Oliver Pradetto am 20.06.2003 - 09:26
erste Variante habe ich zunächst mit zwei Ebenen pobiert hat noch nciht geklappt, aber was meinst Du mit "z-indexes"?

Hier ist der aktuelle Code:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Doppelkarte</title>
<style type="text/css" media="screen">
<!--
#Ebene1
{ position: absolute; top: 5px; left: 5px; width:  554px; height:393px; visibility: visible; display: block }
-->
<!--
#Ebene2
{ position: absolute; top: 5px; left: 5px; width:  554px; height:393px; visibility: visible; display: block }
-->
</style>

	</head>

	<body bgcolor="#ffffff">
	<div id="Ebene1"><img src="DK_Bild4.jpg" alt="" height="393" width="554" border="0"></div>
	<div id="Ebene2">
			<table width="556" border="0" cellspacing="0" cellpadding="0" cool gridx="5" gridy="5" height="387" showgridx showgridy usegridx usegridy>
				<tr height="210">
					<td width="555" height="210" colspan="3"></td>
					<td width="1" height="210"><spacer type="block" width="1" height="210"></td>
				</tr>
				<tr height="176">
					<td width="150" height="176"></td>
					<td content csheight="95" width="165" height="176" valign="top" xpos="150">Oliver Pradetto
						<p>Fackenburger Allee 11</p>
						<p>23554 L&uuml;beck</p>
					</td>
					<td width="240" height="176"></td>
					<td width="1" height="176"><spacer type="block" width="1" height="176"></td>
				</tr>
				<tr height="1" cntrlrow>
					<td width="150" height="1"><spacer type="block" width="150" height="1"></td>
					<td width="165" height="1"><spacer type="block" width="165" height="1"></td>
					<td width="240" height="1"><spacer type="block" width="240" height="1"></td>
					<td width="1" height="1"></td>
				</tr>
			</table>
		</div>
	</body>

</html>


Herzliche Grüße
Oliver

geschrieben von Gast am 20.06.2003 - 10:11
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Doppelkarte</title>
</head>
<body bgcolor="#ffffff">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"><img src="images/auge.jpg" alt="" height="393" width="554" border="0"></div>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2">
  <table width="556" border="0" cellspacing="0" cellpadding="0" cool gridx="5" gridy="5" height="387" showgridx showgridy usegridx usegridy>
    <tr height="210"> 
      <td width="555" height="210" colspan="3"></td>
      <td width="1" height="210"><spacer type="block" width="1" height="210"></td>
    </tr>
    <tr height="176"> 
      <td width="150" height="176"></td>
      <td content csheight="95" width="165" height="176" valign="top" xpos="150">Oliver 
        Pradetto 
        <p>Fackenburger Allee 11</p>
        <p>23554 Lübeck</p></td>
      <td width="240" height="176"></td>
      <td width="1" height="176"><spacer type="block" width="1" height="176"></td>
    </tr>
    <tr height="1" cntrlrow> 
      <td width="150" height="1"><spacer type="block" width="150" height="1"></td>
      <td width="165" height="1"><spacer type="block" width="165" height="1"></td>
      <td width="240" height="1"><spacer type="block" width="240" height="1"></td>
      <td width="1" height="1"></td>
    </tr>
  </table>
</div>
</body>
</html>

geschrieben von Oliver Pradetto am 20.06.2003 - 10:47
Ihr seid Genies!

An den Problem habe ich bestimmt eine woche geschwitzt.

So klappt es. Ich weiss zwar nicht was diese z-indexe machen, aber sie funktionieren.

:-)

Danke!!!

Herzliche Grüße
Oliver

geschrieben von Schwefel am 20.06.2003 - 10:49
Die z-index's legen fest in welcher Reihenfolge
die Ebenen übereinander gelegt sind

geschrieben von Gast am 20.06.2003 - 11:03
Hättest Du doch auch als Tabelle mit Hintergrundbild machen können, allerdings muss dann der User das Ausdrucken von Hintergrundbildern aktivieren.

armin


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.