Originally Posted by
ralph.m
Can you post a link to your site? We need to see the code to know what's going on.
Otherwise, all we can suggest is that you check your file paths etc.
Sorry! I forgot. I will post my code now. Let's help me.
HTML
PHP Code:
<!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-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/affablebean.css" />
<title>Affable Bean</title>
</head>
<body>
<div id="main">
<div id="header">
<div id="widgetBar">
<div class="headerWidget">
[language toggle]
</div><!-- end .headerWidget -->
<div class="headerWidget">
[cart]
</div><!-- end .headerWidget -->
<a href="#">
<img src="img/logo.png" id="logo" alt="Affable Bean logo" />
</a>
<a href="#">
<img src="img/logoText.png" id="logoText" alt="the affable bean" />
</a>
</div><!-- end #widgetBar -->
</div><!-- end #header -->
<div id="indexLeftColumn">
<div id="welcomeText">
<p>[welcome to my shop]</p>
</div><!-- end #welcomeText -->
</div><!-- end #indexLeftColumn -->
<div id="indexRightColumn">
<div class="categoryBox" id="logoProduct1">
<a href="#">
<span class="categoryLabelText">dairy</span>
<img src="img/layer.png" alt="" />
</a>
</div><!-- end .categoryBox -->
<div class="categoryBox" id="logoProduct2">
<a href="#">
<span class="categoryLabelText">meats</span>
<img src="img/layer.png" alt="" />
</a>
</div><!-- end .categoryBox -->
<div class="categoryBox" id="logoProduct3">
<a href="#">
<span class="categoryLabelText">bakery</span>
<img src="img/layer.png" alt="" />
</a>
</div><!-- end .categoryBox -->
<div class="categoryBox" id="logoProduct4">
<a href="#">
<span class="categoryLabelText">fruit & veg</span>
<img src="img/layer.png" alt="" />
</a>
</div><!-- end .categoryBox -->
</div><!-- end #indexRightColumn -->
<div id="footer">
<hr />
<p id="footerText">Contact © 2012 KTPM-K4 </p>
</div><!-- end #footer -->
</div><!-- end #main -->
</body>
</html>
CSS
PHP Code:
/**** MAIN SETTING ****/
body {
font-family: Arial, Helvetica, sans-serif;
width: 850px;
text-align: center;
margin: 20px auto;
color: #444;
}
hr {
border: 0;
background-color: #333;
height: 1px;
}
table {
margin: 0 20px;
border-spacing: 0;
text-align: center;
border: solid 1px #f5eabe;
}
a {
color: inherit;
text-decoration: underline;
}
a:hover { text-decoration: none }
a:visited { color: inherit }
img { border: none }
input, select { margin: 5px }
li { margin: 10px 0 }
label { line-height: 30px }
label.error {
font-size: smaller;
line-height: 20px;
font-style: italic;
}
/* general styles */
#main { background: #f7f7e9 }
#singleColumn {
margin: 20px 30px;
text-align: left;
}
.lightBlue { background-color: #edf8f7 }
.white { background-color: #fff }
.bubble {
font-weight: bold;
background-color: #f5eabe;
padding: 5px;
color: inherit;
display: inline;
border-radius: 4px;
}
.hMargin { margin: 0 30px }
.smallText { font-size: small }
.reallySmallText { font-size: xx-small }
.header {
background-color: #c3e3e0;
height: 30px;
}
.error {
color: #c00;
font-style: italic;
}
.tableHeading {
font-weight: bold;
background-color: #edf8f7;
}
/**** END MAIN SETTING ****/
/* styles for elements contained in the header, i.e.,
shopping cart widget, language toggle, and logo */
#header {
width: 850px;
height: 250px;
background: url('img/stalk.png') no-repeat 28px 28px;
}
#logo {
float: left;
margin-left: 30px;
margin-top: 30px;
}
#logoText {
float: left;
margin: 20px 0 0 70px;
/* font styles apply to text within img alt attribute */
font-family: 'American Typewriter', Courier, monospace;
font-size: 50px;
color: #333;
}
#widgetBar {
height: 50px;
width: 850px;
float: right;
}
#cart {
position: absolute;
margin: 5px 0 0 2px;
}
.horizontalMargin {
margin-left: 28px;
margin-right: 5px
}
#viewCart {
text-align: left;
width: 210px;
}
.headerWidget {
width: 194px;
margin: 20px 0;
font-size: small;
float: right;
line-height: 25px;
}
/* footer styles */
#footer {
height: 60px;
width: 350px;
clear: left;
}
#footerText { margin-top: 5px }
/* index page styles */
#indexLeftColumn {
text-align: left;
height: 400px;
width: 350px;
float: left;
}
#indexRightColumn {
text-align: left;
height: 400px;
width: 500px;
float: left;
}
#welcomeText {
margin: 30px 5px 0 30px;
line-height: 1.4em;
}
.categoryBox {
height: 176px;
width: 212px;
margin: 21px 14px 6px;
float: inherit;
border-radius: 15px;
}
#logoProduct1 {
background-image: url('img/categories/dairy.jpg');
background-repeat: no-repeat;
}
#logoProduct2 {
background-image: url('img/categories/meats.jpg');
background-repeat: no-repeat;
}
#logoProduct3 {
background-image: url('img/categories/bakery.jpg');
background-repeat: no-repeat;
}
#logoProduct4 {
background-image: url('img/categories/fruit & veg.jpg');
background-repeat: no-repeat;
}
/* Safari - disables underline for category boxes on index page */
.categoryBox a { text-decoration: none }
.categoryLabel {
position: absolute;
background-color: #fff;
opacity: 0.7;
height: 40px;
width: 210px;
margin: 2px;
}
.categoryLabelText {
position: absolute;
line-height: 150%;
font-size: x-large;
margin: 3px 10px;
}
.categoryImage {
padding: 1px;
border:solid 1px #555;
}
Thank for watching!
CSS background image not showing up?
Posting Permissions
Reply With Quote
Bookmarks