✔ background-image wird nicht angezeigt

N

Nerolein

Mitglied
Hallo,

egal was ich mache er will mein background image nicht annehmen. wenn ich den <img> tag benutz ist meine "css" tabelle nicht mehr dynamisch.
Sprich die Bilder liegen über der tabelle und sie wird nicht mehr größer.

PHP: 
$query = mysql_query("SELECT * FROM gs_screenshots WHERE AuthorId = '".checkUserId()."'") or die(mysql_error());
		while($row=mysql_fetch_array($query)) {
			
			echo "<a href=\"".$row['ImgDesc']."".$row['ImgName']."\"><div style=\"float:left; margin-left:30px; width:50%; background-image: url(..".$row['ImgDesc']."".$row['ImgName']."\"></div></a>";
			
		}

Seitenquelltext seigt an:

Code: 
<a href="./pictures/screenshots/thumb/Aion0007.jpg"><div style="float:left; margin-left:30px; width:50%; background-image: url(./pictures/screenshots/thumb/Aion0007.jpg"></div>

Und wenn ich http://81.89.97.218/game-screen/pictures/screenshots/thumb/Aion0004.jpg öffne, geht es auch problemlos.

Mir will momenan nicht einleuchten, warum es nicht funktioniert. Vieleicht weiß jemand von euch Rat =)
 
Hi,

am Ende von background-image fehlt die schliessende )-Klammer, womit alle Browser diese Eigenschaft nicht korrekt zu Ende parsen.

Einen zweiten Rat hab ich auch noch gratis für dich :)

Sofern du das HTML-Dokument nicht als HTML5 ausgibst, ist das Einbetten eines Block-Elements in einem Inline-Element nicht zulässig - siehe hierzu die Element-Referenz für Inline-Elemente.

mfg Maik
 
Code: 
echo "<a href=\"".$row['ImgDesc']."".$row['ImgName']."\"><div style=\"float:left; margin-left:30px; width:50%; background-image: url(..".$row['ImgDesc']."".$row['ImgName'].")\"></div></a>";

Funktioniert genauso wenig.
 
Da wir uns hier nicht im PHP-Forum befinden, sei doch bitte so gut, und poste die HTML-Ausgabe des verarbeiteten PHP-Scripts.

Bei mir funktioniert es tadellos.

mfg Maik
 
Dann liegt's bei dir schlichtweg daran, dass das Element inhaltsleer ist.

Wo kein Inhalt existiert, zeigen die Browser nunmal keinen Hintergrund, sofern das Element keine height-Formatierung besitzt.

Welchen Dokumenttyp hast du übrigens für dein HTML-Dokument deklariert?

mfg Maik
 
Sorry =)

Seitenquelltext:

Code: 
<a href="./pictures/screenshots/thumb/Aion0007.jpg"><div style="float:left; margin-left:30px; width:50%; background-image: url(.../pictures/screenshots/thumb/Aion0007.jpg)"></div></a>

// EDIT:

Warum soll es inhaltsleer sein? wenn ich den pfad im browser direkt öffne geht es und wenn ichs per <img> einbinde genauso.
Und die Mysql tabelle ist auch gefüllt.
 
Ah ja... deshalb ist das <div>-Element inhaltsleer:
HTML: 
<div ...><!-- Und wo versteckt sich hier der Inhalt? --></div>


mfg Maik
 
Warum muss <div></div> nen inhalt haben? Das Bild sollte doch auch so angezeigt werden.

bei

HTML: 
<div class=\"table_head\"></div>

Funktioniert es ja auch ohne das was drin steht. Der einzigste unterschied besteht darin das es im oberen beispiel direkt definiert wird und nicht in einer css datei.
 
Ich fasse nochmal die gewonnenen Erkenntnisse zusammen, da du meinen bisherigen Worten und Ratschlägen scheinbar keinen Glauben schenkst, obwohl ich im Vergleich zu dir genau weiß, wovon ich hier rede. Über 10 Jahre praktische Tätigkeit sollten da wohl als "Referenz" ausreichen.


  • Im <a>-Element darf kein <div>-Element eingebettet werden - es sei denn du deklarierst für das Dokument den Doctype "HTML5".

  • Dein <div>-Element besitzt keinen Inhalt, aber ebenso wenig eine Höhenangabe, womit keiner der Browser seinen Hintergrund darstellt.

  • Um auf Punkt 1 zurückzukommen, nachfolgend die valide HTML-Version, die das <div> überhaupt nicht erfordert. Wenn das <a>-Element weiterhin keinen Inhalt erhält, ist eben eine height-Regel vonnöten - hier hab ich mal rein zu Demozwecken height:1em gewählt, damit du in den Genuß kommst, das Hintergrundbild vom Browser angezeigt zu bekommen.
HTML: 
<a href="./pictures/screenshots/thumb/Aion0007.jpg" style="float:left; margin-left:30px; width:50%; height:1em; background-image: url(./pictures/screenshots/thumb/Aion0007.jpg)"></a>

mfg Maik
 
Oh tut mir leid.

Das mit der "height" Formatierung hab ich überlesen, ich hab mich nur gewundert warum in <div></div> ein Inhalt stehen sollte damit das Bild angezeigt werden soll. Nun geht es zwar, aber das Hauptproblem was ich mit <img> hatte ist immernoch da. Ich habe gemeint, er reicht wenn ich die "bilder" im Hintergrund setzte, damit die "CSS Tabelle" dynamisch bleibt aber da habe ich wohl falsch gedacht.

Als kleine Demonstation, habe ich ein Screenshot beigefügt damit man sieht, was ich meine.

Um vollständigkeitshalber poste ich mal die komplette "CSS Tabelle".

Code: 
		echo "<div class=\"table_head\"></div>";
		echo "<div class=\"table_content\">";
			$query = mysql_query("SELECT * FROM gs_screenshots WHERE AuthorId = '".checkUserId()."'") or die(mysql_error());
		while($row=mysql_fetch_array($query)) {
			
			echo "<a href=\"".$row['ImgDesc']."".$row['ImgName']."\"><div style=\"float:left; margin-left:30px; width:100px; height:70px; background-image: url(".$row['ImgDesc']."".$row['ImgName'].")\"></div></a>";
			
		}
		echo "</div>";
		echo "<div class=\"table_footer\"></div>";

Code: 
.login_table_head {
	background-image: url("../table/login_table_head.png");
	width: 305px;
	height: 26px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	vertical-align: top;
}

.login_table_content {
	background-image: url("../table/login_table_content.png");
	width: 305px;
	min-height: 80px;
}

.login_table_footer {
	background-image: url("../table/login_table_footer.png");
	background-repeat: no-repeat;
	width: 305px;
	height: 34px;
}

Wenn die Tabelle mit Text gefüllt ist, ist sie dynamisch wie sie auch sein sollte.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück