Image über mehrere Zellen

B

Bammel

Grünschnabel
Hallo Community :),
habe hier schon viel hier gefunden. Leider nicht das was ich gerad brauche.
Ich versuche krampfhaft ein Bild innerhalb einer Tabelle (oder "divtabelle") über mehrere Zellen anzuzeigen. Konkret soll das heißen, ich habe eine dynamische Seite (das heißt position:absolut fällt leider weg). Nun ein Beispiel, möchte ich in der 2. Spalte, 2. Zeile ein Bild einfügen, welches größer ist als die Zelle und verschiebe das dann nach oben. Im Firefox klappt das alles super (sowohl mit Tabelle als auch mit Divs). Der Internet Explorer 6 (kann mir das jmd mit einem neueren IE verifizieren?) macht allerdings die Zelle/div so groß wie das Bild selbst, was mir die ganze Tabelle zerstört.

Zur Veranschaulichung hier ein Screenshot:
beispiele.jpg


Der stark vereinfachte Quellcode mit Divs sieht wie folgt aus:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<STYLE TYPE="text/css">
.divstyle{
	width:182px;
	height:54px;
	float:left;
	border: 1px solid #FAD614;
}
.divzeile{
	width:2080px;
	height:54px;
	float:left;
}
.platzhalter{
overflow:visible;
	position:relative;
	top:-20px;
	left:0px;
	width:182px;
	height:10px;
	z-index:2;
	background-color:yellow;
}
.bild{
	background-image:url(symbol.gif);
	float:none;
	position:relative;
	top:-33px;
	left:0px;
	width:182px;
	height:162px;
	z-index:20;
	background-repeat:no-repeat;
}
</STYLE>
</head>
<body>
<div>
  <div class="divzeile">
	<div class="divstyle">
		1
	</div>
	<div class="divstyle">
		2
	</div>
	<div class="divstyle">
		3
	</div>
  </div>
  <div class="divzeile">
	<div class="divstyle">
		4
	</div>
	<div class="divstyle">
		<div class='platzhalter'>
			<div class='bild'>5</div>
		</div>
	</div>
	<div class="divstyle">
		6
	</div>
  </div>
  <div class="divzeile">
	<div class="divstyle">
		7
	</div>
	<div class="divstyle">
		8
	</div>
	<div class="divstyle">
		9
	</div>
  </div>
</div>
</body>
</html>
Bin über jede Hilfe sehr dankbar. Vielleicht kennt auch jemand noch einen anderen Lösungsansatz. Ich kenne wie gesagt jedoch keinen konkreten Koordinaten, noch darf sich die Tabelle von dem Bild nicht verändern lassen. Wieso geht das nur immer im FF und nie im IE :(

Liebe Grüße, Bammel
 
Zuletzt bearbeitet:
Hallo,
mir sieht das so aus als ob der IE die CSS Höhe deines DIV ignoriert und der des Inhaltes anpasst. Heißt #platzhalter ist so groß wie sein Inhalt .bild.
Leider hab ich grad keinen IE zur Hand um auszuprobieren wie man das umgehen kann.
Aber vielleicht hilft dir schon meine Fehleranalyse weiter.

Viele Grüße
 
Bammel hat gesagt.:
[...]Der Internet Explorer 6 [...] macht allerdings die Zelle/div so groß wie das Bild selbst, was mir die ganze Tabelle zerstört.
Zum Vergrößern anklicken....
Da hast du Recht :). Allerdings hab ich auch schon so einiges ausprobiert. Ausgehend von einer Tabelle mit span, über div im div mit background-image oder einer Tabelle im div (was noch verwirrterere Resultate lieferte:rolleyes:). Ich kenne mich mit CSS auch leider nicht so sehr aus und probiere mehr als, als das ich wüsste was ich da machen :D.

Gruß Bammel
 
Hallo,
ich wollte nochmal fragen ob jemand zufällig eine Lösung hat. Probiere gerne alles aus, ich weiß nur nicht wie man das noch machen könnte. Ausserdem wollte ich noch fragen ob es eine Möglichkeit gibt sich die Webseite unter verschiedenen Browsern anzusehen? Kann man zb IE 6 und IE 8 gleichzeitig installiert haben? Oder gibt es einen Emulator?

Viele Grüße
Bammel
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück