No replies
eddie22487
Offline
Regular
www.myachi.com
Last seen: 12 years 24 weeks ago
www.myachi.com
Timezone: GMT-6
Joined: 2009-05-13
Posts: 13
Points: 6

Hello everyone, let me start out by explaining what I'm looking for before I go into what the problem is.

I'm looking for a site in which multiple background images will be able to be set and styled on the template of the site. That is, I would like for it to load once, but with the click of each button for the HTML content to change. I thought I was doing this with the code below, but overlooked a huge flaw: I'm using the HTML to declare the DIVs. So, I kicked myself in the face and am trying to think of a different way to do this. I'm new at CSS, but have been reading a lot and have been trying to find a solution to my problem. Can anyone tell me a better way of doing this? (p.s. I'm still working on designing it, so some of the css is shoddy, I know). Thanks Smile

HTML

<!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">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
 
 
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Myachigon Website</title>
 
<!-- Background Framework -->
<div id="bottom_left_border"></div>
<div id="bottom_right_border"></div>
<div id="left_border_bars"></div>
<div id="right_border_bars"></div>
<div id="top_left_corner_panel"></div>
<div id="top_right_corner_panel"></div>
<div id="top_cross_bar"></div>
<div id="banner"></div>
 
 
<!-- Buttons w/ Hover in style.css -->
<a id="Home" href="index.html" title="Home"> <div id="home_btn"> </div></a>
<a id="Store" href="store.html" title="Store"> <div id="store_btn"></div></a>
<a id="Tricks" href="tricks.html" title="Tricks"><div id="tricks_btn"></div></a>
 
<!-- Commercial Movie Clip -->
<div id="commercial_clip"> <embed type="video/quicktime" src="http://media.revver.com/qt;sharer=88328/635350.mov" pluginspage="http://www.apple.com/quicktime/download/" scale="aspect" cache="False" height="175" width="180" autoplay="False"></embed> </div>
 
</head>
 
<body>
 
<div class="container">
</div>
 
 
 
 
</body>
</html>

Style.CSS

body {
  text-align: center;
  background-color: #000;
  background-repeat: no-repeat;
  margin-top:10px;
  margin-bottom:10px;
  color:#666666;
}
 
#bottom_left_border {
	background-image: url(images/bottom_left_border.png);
	background-repeat: no-repeat;
	position: absolute;
	left: 20px;
	bottom: 0;
	width: 156px;
	height: 243px;
}
 
#bottom_right_border {
	background-image: url(images/bottom_right_border.png);
	background-repeat: no-repeat;
	position: absolute;
	right: 20px;
	bottom: 0;
	width: 156px;
	height: 243px;
	z-index: 100;
}
 
#left_border_bars {
	background-image: url(images/left_border_bars.png);
	background-repeat: repeat-y;
	position: absolute;
	left: 60px;
	bottom: 0px;
	width: 71px;
	height: 900px;
	z-index: -100;
}
#right_border_bars {
	background-image: url(images/right_border_bars.png);
	background-repeat: repeat-y;
	position: absolute;
	right: 60px;
	bottom: 0px;
	width: 71px;
	height: 900px;
	z-index: -100;
}
 
#top_left_corner_panel {
	background-image: url(images/top_left_corner_panel.png);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 0%;
	width: 205px;
	height: 193px;
	z-index: 100;
}
 
#top_right_corner_panel {
	background-image: url(images/top_right_corner_panel.png);
	background-repeat: no-repeat;
	position: absolute;
	right: 0px;
	top: 0%;
	width: 185px;
	height: 193px;
	z-index: 100;
}
 
#top_cross_bar {
	background-image: url(images/top_cross_bar.png);
	background-repeat: repeat-x;
	position: absolute;
	height: 40px;
	width: 1440px;
	top: 60px;
	left: 0px;
	z-index: 90;
}
 
#banner {
	background-image: url(images/banner.png);
	background-repeat: no-repeat;
	position: absolute;
	height: 135px;
	width: 405px;
	top: 15px;
	left: 500px;
	z-index: 100;
}
 
#home_btn {
	background-image: url(images/home_btn_1_2.png);
	background-repeat: no-repeat;
 
	position: absolute;
	height: 43px;
	width: 125px;
	top: 30px;
	left: 200px;
	z-index: 95;
}
 
#home_btn:hover{ background-image: url(images/home_btn_2_2.png); }
 
#store_btn {
	background-image: url(images/store_btn_1.png);
	background-repeat: no-repeat;
	position: absolute;
	height: 52px;
	width: 152px;
	top: 30px;
	left: 365px;
	z-index: 95;
}
 
#store_btn:hover { background-image: url(images/store_btn_2.png); }
 
#tricks_btn {
	background-image: url(images/tricks_btn_1.png);
	background-repeat: no-repeat;
	position: absolute;
	height: 52px;
	width: 152px;
	top: 30px;
	left: 530px;
	z-index: 95;
}
 
#tricks_btn:hover { background-image: url(images/tricks_btn_2.png); }
 
 
#commercial_clip {
 
	height: 200px;
	width: 190px;
	top: 10px;
	left: 4px;
}