What's wrong with this CSS/HTML code? If I try to add an image it doesn't show...

D

Dave Smith

New member
...(like it can't find the image)? There is nothing wrong with the image location it just doesn't show. Here is my code. The code basically uses CSS to draw an iMac computer. Then I used 2 images one of the apple logo and one of the Mac OS wallpaper. These display fine as I do them as background images within the CSS file. But I now just want to add simple <img> tags within <a> tags but none of the images ever show up. It acts like it can't find the images but the location in the code is always right. Can anybody advise me on how to make the images show. I would really appreciate your help.

Thank you so much in advance for any help that you can give me

HTML
-------------------------------------------------------------------------------------------------------------------------------------------
<!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">
<head><title>CSS iMac</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="all" />

</head><body>

<div id="imac">
<div id="body">
<div id="screen">
<div id="viewport">
<a href="#url" class="icon1"><img src="images/lip.png" alt="" /></a>
<a href="#url"><img src="images/lip.png" alt="" /></a>
<a href="#url"><img src="images/lip.png" alt="" /></a>
<a href="#url"><img src="images/lip.png" alt="" /></a>
<a href="#url"><img src="images/lip.png" alt="" /></a>
<a href="#url"><img src="images/lip.png" alt="" /></a>
<a href="#url"><img src="images/lip.png" alt="" /></a>
<a href="#url"><img src="images/lip.png" alt="" /></a>
</div></div>
<span>&nbsp</span></div>
<div id="stand1"></div>
<div id="stand2"></div>
</div>

</body>
</html>

CSS
-----------------------------------------------------------------------------------------------------------------------------------------
body{
margin:0;
padding:0;
font-size:1.3em;
font-family:arial, verdana, sans-serif;
}

#imac{
width:31.7em;
position:absolute;
top:30px;
left:30px;
text-align:center;
-webkit-perspective:500;
}


#body{
background:#D1D2D5;/*#999B9F*/
-webkit-border-radius: 0.8em;
-moz-border-radius: 0.8em;
border-radius: 0.8em;
padding-bottom:2.9em;
position:relative;
top:0;
left:0;
z-index:1000;
background:-webkit-gradient(radial, -500 -100, 0, -200 175, 575, from(#999B9F), to(#D1D2D5));

border-bottom:1px solid #ACADB1;
box-shadow:0px 0px 1px #efefef;
margin:0;
}

#body span{
font-family:Impact, arial, verdana, sans-serif;
color:#000;
line-height:115%;
display:block;
position:absolute;
bottom:1em;
left:49%;
width:100%;
text-shadow:1px 1px 1px #fff;
background-image:url('../images/logo.png');
background-repeat:no-repeat;
}

#screen{
background:rgb(0,0,0);
height:19em;
-webkit-border-top-left-radius:0.8em;
-webkit-border-top-right-radius:0.8em;
-webkit-border-bottom-left-radius:0;
-webkit-border-bottom-right-radius:0;
-moz-border-radius-topleft:0.8em;
-moz-border-radius-topright:0.8em;
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0;
border-top-left-radius:0.8em;
border-top-right-radius:0.8em;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border:2px solid #000;
background:-webkit-gradient(radial, 100 75, 275, 0 175, 500, from(#000000), to(#242424));
}

#viewport{
background:#3A2756;
background-image:url('../images/wallpaper.jpg');
width:93%;
height:88%;
margin:1.1em 0 0 1.1em;
border:1px solid #000;
position: relative;
top:0;
left:0;
overflow:hidden;
}

a,a:active,a:visited{color:#fff;text-decoration:none;}

#stand1{
background:rgb(204,204,204);
height:3em;
width:7em;
margin:0 auto 0 auto;
background: -webkit-gradient(linear, left top, left bottom, from(#5A5B5D), to(#cccccc));
background:-moz-linear-gradient(0% 4% 270deg,#5A5B5D, #CCCCCC, #C7C7C7 100%);

}

#stand2{
background:rgb(204,204,204);
height:0.5em;
width:11em;
background:-webkit-gradient(radial, 0 0, 325, 100 44, 50, from(#FCFCFC), to(#CFCFCF), color-stop(.3,#B8B8B8),color-stop(.8,#FFFFFF));
background:-moz-linear-gradient(0% 0% 329deg,#FCFCFC, #CFCFCF, #C7C7C7 19%,#999999 31%,#D4D4D4 65%);
-webkit-borde
 
Back
Top