Log in

View Full Version : Can not display images by CSS


thientanchuong
06-22-2010, 12:24 PM
I use css to code my web layout and I also can view all images on Dreamweaver.

http://img684.imageshack.us/img684/8162/html1.jpg

However, when I view my web layout on Browsers( Firefox, IE), nothing appears.

http://img266.imageshack.us/img266/6919/html2.jpg

My code for HTML is:


<html>
<head>
<title>Hung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="/template/style.css">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="whitebody">

</div>
<div id="footer"></div>
</div>
</body>
</html>

And MY CSS CODE is:


body{
color:#FFF;
margin: 0px;
padding:0px;
}

#container{
background-position:center;
}
#header{
background:url(/template/images/header.gif);
background-repeat: no-repeat;
width: 800px;
height: 80px;
}

#menu{
background-image:url(/template/images/menu.gif);
background-repeat:no-repeat;
width: 800px;
height: 55px;
}

#whitebody{
background-image:url(/template/images/backgroundbdoy.gif);
background-repeat:no-repeat;
width: 800px;
height: 441px;
}

#footer{
background-image:url(/template/images/footer.gif);
background-repeat:no-repeat;
width: 800px;
height: 24px;
}


If the paths of images are wrong, I can not view on Dreamweaver but I can.

What wrong have I done ? please let me know and possibly give me a solution as you can.

Thank you very much.
azoomer
06-22-2010, 02:47 PM
Did you try to remove the slash / like this:
background:url(template/images/header.gif);
thientanchuong
06-22-2010, 02:54 PM
Yes, I did, but no image appears
azoomer
06-22-2010, 03:09 PM
I see you are on wamp. When you open the file on localhost, have you tried to view the souorce code ? I just wonder if there is any html markup on the page now if you rightclick an press: view page source
auntnini
06-22-2010, 08:22 PM
What is "wamp"?

In basic HTML, if you are in a sub-folder and want to access another folder, you use 2 dots before the slash "to dig yourself out of the sub-folder" -- so it would be

../images/footer.gif

I imagine this would be true with "wamp" (whatever that is).
azoomer
06-22-2010, 09:20 PM
auntnini ! Wamp is a server that you can install locally on your pc. It has apache, php and mySQL modules. It's very useful for running php without having to upload to a server online. Also you can run installations like wordpress and drupal on it. There is en equivalent server called Xamp and also one called Mamp for mac. My question was aimed at finding out if his server setup is working.