✔ Div Bilder werden nicht angezeigt

[SeeSharpNewBee]

Hi,

ich habe ein problem mit stylesheets und divs, und zwar werden bei background-image:... die bilder nicht angezeigt, ich habe schon mehrere seiten gelesen self-html studiert und gesucht, hat aber alles nichts geholfen, bitte um hifle, sonst verzweifle ich noch.

die stylesheet datei (style.css) im unterordner css:

/*hintergrund*/
div.pheader 	{background-image:url(img/logo.png); background-repeat: no-repeat; background-color: #000; height: 44 px; width: 861 px; float: left;}
div.pmenu	{background-image:url(img/menu.png); background-repeat: repeat-y; background-color: #000; width: 181 px; float: left;}
div.pmain	{background-image:url(img/main.png); background-repeat: no-repeat; background-color: #000; width: 680 px; float: left;}
div.pfooter	{background-image:url(img/footer.png); background-repeat: no-repeat; background-color: #000; height: 33 px; width: 861 px; float: left;}

die php datei (index.inc) im ordner inc:

<?PHP
	echo "<div class='wrap'>\n";
	echo "<div class='pheader'></div>\n";
	echo "<div class='pmenu'></div>\n<div id='pmain'></div>\n";
	echo "<div class='pfooter'></div>\n";
	echo "</div>\n";
?>

Die bilder befinden sich im ordner "img".
Die divs "pmenu" und "pmain" sollen nebeneinander dargestellt werden.

wegen pfad zur bilddatei, meine ordnerstruktur sieht aus wie folgt,
hauptordner
-unterordner "css"
-unterordner "img"
-unterordner "inc"
index.php

Ich bitte um hilfe, da ich schon verzweifle, danke!

 

[Maik]

Entferne mal in den height- und width-Eigenschaften das Leerzeichen zwischen dem Wert und der Einheit:

/*hintergrund*/
div.pheader 	{background-image:url(img/logo.png); background-repeat: no-repeat; background-color: #000; height: 44px; width: 861px; float: left;}
div.pmenu	{background-image:url(img/menu.png); background-repeat: repeat-y; background-color: #000; width: 181px; float: left;}
div.pmain	{background-image:url(img/main.png); background-repeat: no-repeat; background-color: #000; width: 680px; float: left;}
div.pfooter	{background-image:url(img/footer.png); background-repeat: no-repeat; background-color: #000; height: 33px; width: 861px; float: left;}

 

[SeeSharpNewBee]

Danke für deine antwort, aber das hat leider nicht geholfen, woran könnte es noch liegen?

 

[Maik]

Überprüfe mal die Grafik-Referenzen in der CSS-Datei:

div.pheader {
background-image: url(../img/logo.png);
}

div.pmenu	{
background-image: url(../img/menu.png); 
}

div.pmain {
background-image: url(../img/main.png); 
}

div.pfooter {
background-image: url(../img/footer.png); 
}

 

[SeeSharpNewBee]

Ok, danke, das hat geholfen, jedoch werden jetzt nur bild 1,2 und 4 angezeigt, und nummer drei nicht, außerdem hab ich ja "repeat-y" angegeben, doch das wird auch einfach ignoriert, warum das?

/*hintergrund*/
div.pheader 	{background-image:url(../img/logo.png); 	background-repeat: no-repeat; 	background-color: #000; height: 44px; width: 861px;}
div.pmenu		{background-image:url(../img/menu.png); 	background-repeat: repeat-y; 	background-color: #000; height: 39px; width: 181px;}
div.pmain		{background-image:url(../img/main.png); 	background-repeat: repeat-y; 	background-color: #000; height: 39px; width: 680px;}
div.pfooter		{background-image:url(../img/footer.png); 	background-repeat: no-repeat; 	background-color: #000; height: 33px; width: 861px;}

 

[Maik]

Gibt es eine Online-Version der Seite, um das Problem direkt in Augenschein nehmen zu können?

 

[SeeSharpNewBee]

Ja, die onlineversion ist http://www.inlocation.at

Danke!

 

[Maik]

Hier der überarbeitete CSS- und HTML-Code:

/*stylesheet inlocation*/


/*allgemeines*/
body {
background-color: #000;
}

div.wrap {
padding: 0;
margin: 0 auto;
width: 861px;
}

/*hintergrund*/
div.pheader {
background-image:url(../img/logo.png);
background-repeat: no-repeat;
background-color: #000;
height: 44px;
width: 861px;
padding: 0;
margin: 0;
}

div.pmenu {
background-image:url(../img/menu.png);
background-repeat: repeat-y;
background-color: #000;
height: 450px;
width: 181px;
float: left;
padding: 0;
margin: 0;
}

div.pmain {
background-image:url(../img/main.png);
background-repeat: repeat-y;
background-color: #000;
height: 450px;
width: 680px;
float: right;
padding: 0;
margin: 0;
}

div.pfooter {
background-image:url(../img/footer.png);
background-repeat: no-repeat;
background-color: #000;
height: 33px;
width: 861px;
padding: 0;
margin: 0;
clear: both;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>INlocation-was ist angesagt?</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class='wrap'>
     <div class='pheader'></div>
     <div class='pmenu'></div>
     <div class='pmain'></div>
     <div class='pfooter'></div>
</div>

</body>
</html>

 

[SeeSharpNewBee]

Danke, funktioniert super! Hat es eigentlich nur an dem "clear: both" gelegen?

 

[Maik]

Unter anderem lag es an der fehlenden clear-Eigenschaft, desweiteren sorgte aber auch die Eigenschaft margin:0 auto, die für jedes DIV bestimmt wurde, für Verschiebungen im Layout.