Jd_Johnson8
08-01-2006, 01:16 PM
Ok, I went away and came back and figured out my problem - it helps to put the whole path of where the image is, and not just the image name. - sorry it took me posting to figure it out!
I hope this is the right place to post this. While trying to familiarize myself with the CSS and content positioning, I have been expirimenting a bit. I found the Sliding Doors of CSS tutorial on Alistapart.com and have been trying to create it. I have the following code put together for a CSS style sheet:
/* CSS Document */
body {
background: #fff;
margin: 0;
padding: 20px;
color: #000;
font: x-small/1.5em Georgia, Serif;
voice-family: "\"}\""; voice-family: inherit;
font-size: small;
}
html>body {font-size small;}
#header {
float: left;
width: 100%;
background: #999999;
font-size: 93%;
line-height: normal;
}
#header ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
}
#header li {
float: left;
background: url("Img_2.gif") no-repeat right top;
margin: 0;
padding: 0 0 0 9px;
}
#header a {
float: left;
display: block;
background: url("Img_1.jpg") no-repeat left top;
padding: 5px 15px 4px 6px;
text-decortation: none;
font-weight: bold;
color: Yellow;
}
#header #current {
background-image: url("Img_3.gif");
}
#header #current a {
background-image: url("Img_4.gif");
padding-bottom: 5px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
I have the following code put together for the html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="Test_One.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<ul>
<li><a href="#">Band Heaters</a></li>
<li id="current"><a href="#">Ceramic Band Heaters</a></li>
<li><a href="#">Construction Styles</a></li>
<li><a href="#">Terminations</a></li>
<li><a href="#">Clamping Options</a></li>
<li><a href="#">Ordering Information</a></li>
<li><a href="#">Product Listing</a></li>
</ul>
</div>
</body>
</html>
No matter what I do, the background images don't want to appear. I put the code together in Dreamweaver 8 on my G5 Mac. I have viewed it in IE-5 and Safari on the mac, and in IE-6 on the pc. The background images don't show up in any of them. Can anyone eyeball my code and see if i'm missing something? It looks right in dreamweaver to me...and I'm just stumped...
Thanks!
Jd
I hope this is the right place to post this. While trying to familiarize myself with the CSS and content positioning, I have been expirimenting a bit. I found the Sliding Doors of CSS tutorial on Alistapart.com and have been trying to create it. I have the following code put together for a CSS style sheet:
/* CSS Document */
body {
background: #fff;
margin: 0;
padding: 20px;
color: #000;
font: x-small/1.5em Georgia, Serif;
voice-family: "\"}\""; voice-family: inherit;
font-size: small;
}
html>body {font-size small;}
#header {
float: left;
width: 100%;
background: #999999;
font-size: 93%;
line-height: normal;
}
#header ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
}
#header li {
float: left;
background: url("Img_2.gif") no-repeat right top;
margin: 0;
padding: 0 0 0 9px;
}
#header a {
float: left;
display: block;
background: url("Img_1.jpg") no-repeat left top;
padding: 5px 15px 4px 6px;
text-decortation: none;
font-weight: bold;
color: Yellow;
}
#header #current {
background-image: url("Img_3.gif");
}
#header #current a {
background-image: url("Img_4.gif");
padding-bottom: 5px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
I have the following code put together for the html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="Test_One.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<ul>
<li><a href="#">Band Heaters</a></li>
<li id="current"><a href="#">Ceramic Band Heaters</a></li>
<li><a href="#">Construction Styles</a></li>
<li><a href="#">Terminations</a></li>
<li><a href="#">Clamping Options</a></li>
<li><a href="#">Ordering Information</a></li>
<li><a href="#">Product Listing</a></li>
</ul>
</div>
</body>
</html>
No matter what I do, the background images don't want to appear. I put the code together in Dreamweaver 8 on my G5 Mac. I have viewed it in IE-5 and Safari on the mac, and in IE-6 on the pc. The background images don't show up in any of them. Can anyone eyeball my code and see if i'm missing something? It looks right in dreamweaver to me...and I'm just stumped...
Thanks!
Jd