xtos2001
01 Feb 2008, 10:18 AM
Can someone please help. I'm new to making website and CSS. I've spent sooooo many hours trying to get image replacement to work and it seems to fail with every method that's out there. I've tried writing code from scratch, I've tried using one of the CSS layout templates...nothing works. If someone could take a look at this code and point out where my "hopefully" stupid mistake is. I'm trying to have the IR in the header. The JPG size is 900px X 354 px. This code is just the last attempt. Thanks!
index.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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 2 Column - fw-13-2-col</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<span></span>This is the Header
</div>
<!-- End Header -->
<!-- Begin Left Column -->
<div id="leftcolumn">
<a href="#">Download this CSS Layout</a>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
Right Column
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer">
This is the Footer
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
main.css
/*
Created by Keith Donegan of Code-Sucks.com
E-Mail: Keithdonegan@gmail.com
You can do whatever you want with these layouts,
but it would be greatly appreciated if you gave a link
back to http://www.code-sucks.com
*/
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 900px;
}
#header {
width: 900px;
height: 354px;
position: relative;
}
#header span {
background: url(images/top.jpg) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#leftcolumn {
color: #333;
border: 0px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 650px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
border: 0px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 200px;
display: inline;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 0px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 0px;
}
index.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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 2 Column - fw-13-2-col</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<span></span>This is the Header
</div>
<!-- End Header -->
<!-- Begin Left Column -->
<div id="leftcolumn">
<a href="#">Download this CSS Layout</a>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
Right Column
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer">
This is the Footer
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
main.css
/*
Created by Keith Donegan of Code-Sucks.com
E-Mail: Keithdonegan@gmail.com
You can do whatever you want with these layouts,
but it would be greatly appreciated if you gave a link
back to http://www.code-sucks.com
*/
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 900px;
}
#header {
width: 900px;
height: 354px;
position: relative;
}
#header span {
background: url(images/top.jpg) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#leftcolumn {
color: #333;
border: 0px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 650px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
border: 0px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 200px;
display: inline;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 0px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 0px;
}