Hey guys, I’ve done a very small amount of web design; so please forgive my poor coding.. (I know it can make most of you cringe)
Anyways, I am building a website for a band, and decided to use DIV layers (z-index) to get the effect I want.
I am having a hard time getting it to do what I want it to, and I believe it’s from lack of understanding CSS.
I want to:
1. Have the pale center (w/shadow) image [bgpale.png] repeat down the y axis. (The entire page)
2. Remove all the empty space at the bottom
3. Be able to add content in the [bgpale.png] DIV without having all the other DIV attributes change.
I also have read a few different posts and let me know if what I’m trying to do should be done with a style sheet and a html page…
Thank you so much! I’ve put a bunch of spaces in the [bgpale.png] DIV area just to see if it was working and not repeating.
My Site: http://www.thewillingband.com/index2.html
My Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta name="TITLE" content="The Wiling's Official Site">
<meta name="DESCRIPTION" content=
"The Willing's Official Website">
<meta name="KEYWORDS" content=
"The Willing, the willing, willing, Rave Song Records, ravesongrecords">
<meta name="ROBOTS" content="index,follow">
<meta name="REVISIT-AFTER" content="4 days">
<title>The Willing - Official Website</title>
<style type="text/css">
<!--
P {text-indent: 30pt;}
-->
<!--
#apDiv1 {
background-image: url(http://www.thewillingband.com/pictures/header2.jpg);
position:relative;
overflow:hidden;
width:799px;
height:305px;
top: -424px;
margin-left: auto;
margin-right: auto;
z-index:4;
}-->
<!--
#apDiv2 {
background-image: url(http://www.thewillingband.com/pictures/maingradient.jpg);
position:relative;
overflow:hidden;
width:1200px;
height:408px;
top: -15px;
margin-left: auto;
margin-right: auto;
z-index:2;
}-->
<!--
#apDiv3 {
position:relative;
background-image: url(http://www.thewillingband.com/pictures/bgpale.png);
background-repeat: repeat-y;
overflow:hidden;
top: -740px;
width:817px;
margin-left: auto;
margin-right: auto;
z-index:3;
}-->
<!--
#apDiv4 {
position:relative;
overflow:hidden;
top: -1250px;
width:799px;
height:37px;
margin-left: auto;
margin-right: auto;
z-index:5;
}-->
</style>
</head>
<body bgcolor="#2c0e06">
<div id="apDiv2"></div>
<div id="apDiv1"></div>
<div id="apDiv3">
<br>
<br>
<br>
<br>
<br>
</div>
<div id="apDiv4"><img src="/pictures/fakelinks.jpg" border="0" width="799"></a></div>
</body>
</html>