My category background needs to be able to expand when someone clicks a main category it will then show all the subcategories of the main category.
I set my category background to 100% thinking it would only be the height of the info inside the div but it isn’t working.
I am not even sure this is the best way to code the site. Can someone look at my code and tell me how I can improve it and how I can get my category background to be fluid to match the height of my category list when they are clicked?
I am going to include both my html and also css. The div is options_bar1_bg
Also did I use the form correctly in my html?
html:
<html>
<head>
<title>29501 Florence Motorsports</title>
<!-- css stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- /css stylesheet -->
</head>
<body id="body">
<table width="1019" height="100%" align="center" class="main">
<tr>
<td>
<div id="header_div">
<div id="header_pic"><img src="header_images/header.gif" width="1019" height="360"></div>
<div id="phone">CALL US AT: (843-669-8565)</div>
<div id="address">2702 TV Road Florence S.C. 29501</div>
<div id="home"><a href="home.html" class="navi_text">HOME PAGE</a></div>
<div id="about"><a href="about.html" class="navi_text">ABOUT US</a></div>
<div id="service"><a href="service.html" class="navi_text">SERVICE DEPARTMENT</a></div>
<div id="wholesale"><a href="wholesale.html" class="navi_text">WHOLESALE REQUEST</a></div>
<div id="contact"><a href="contact.html" class="navi_text">CONTACT US</a></div>
<div id="black_line1"></div>
<div id="search_bar"></div>
<div id="search_icon"><img src="images/search_icon.jpg"></div>
<div id="search_text"><form method=get name=f1 onsubmit="return CheckSearch();" action="SearchResults.php">PRODUCT SEARCH:</div>
<div id="search_term"> <input name=SearchTerm type=text size="70"></div>
<div id="search_where"><select name=where><option value="ItemName">Title</option><option value="ItemDescription">Description</option></select></div>
<div id="search_order1"><select name=ord1><option value="">order by:</option><option value="ItemPrice">Price</option><option value="ItemName">Title</option><option value="AddDate">Date added</option></select></div>
<div id="search_order2"><select name=ord2><option value="asc">asc</option><option value="desc">desc</option></select></div>
<div id="search_button"><input type=submit name=search1 value="Search!" class=sub></form></div>
<div id="options_bar1"><img src="images/options_bar.jpg" width="210" height="32"></div>
<div id="options_bar1_text">Categories</div>
<div id="options_bar1_bg">Categories list here</div>
<div id="main_bar1"><img src="images/main_bar.jpg" width="587" height="32"></div>
<div id="main_bar1_text">Random Products</div>
<div id="options_bar2"><img src="images/options_bar.jpg" width="210" height="32"></div>
<div id="options_bar2_text">Shopping Cart</div>
</div>
</td>
</tr>
</table>
</body>
</html>
css:
<style type="text/css">
<!--
/*body_style*/
html, body {
height:100%;
margin:0px 0px 0px 0px;
background-image:url('bg.jpg');
background-repeat:repeat;
background-attachment:fixed;
border-width:0px;
border-color:064097;
border-style:solid;
}
#body {
height: 100%;
margin:0px 0px 0px 0px;
background-image:url('bg.jpg');
background-repeat:repeat;
background-attachment:fixed;
border-width:0px;
border-color:064097;
border-style:solid;
}
/*set_table_1*/
table.main {
border-width: 1px;
border-spacing: 0px;
padding: 0px;
border-style: solid;
border-color:#000000;
border-collapse: separate;
background-color:#000000;
}
table.main th {
border-width: 0px;
padding: 0px;
border-style: inset;
border-color: 3376D2;
background-color: none;
}
table.main td {
border-width: 0px;
padding: 0px;
border-style: inset;
border-color: 3376D2;
background-color: none;
font-family: "Times New Roman";
text-decoration: none;
color: #FFFBFB;
font-size:12px;
letter-spacing:normal;
font-style:none;
font-weight:bold;
}
a {font-family:Times New Roman, tahoma, verdana; font-size:14px; color:#F67710; text-decoration:none}
a:hover {text-decoration:none; font-style:none; font-weight:none; color:#F78E39;}
a.navi_text {font-family:Arial; font-size:15px; color:#FFEA5F; text-decoration:none font-style:none;}
a.navi_text:hover {text-decoration:underline; font-style:none; font-weight:none; color:#FFEA5F;}
/*header_div*/
#header_div {
position: relative; left:0px; top:0px;
width:1019px; height:100%;
border-width: 0px;
padding: 0px;
border-style: solid;
border-color: transparent;
background-color:#FFEA5F;
}
#header_pic {
position: absolute; left:0px; top:0px;
width:1019px; height:370px; z-index:1;
}
.phone {
position: absolute; left: 50px; top: 5px;
font-family: "Times New Roman";
text-decoration: none;
color: #FFEA5F;
font-size:20px;
letter-spacing:normal;
font-style:normal;
font-weight:bold;
z-index:2;
}
#phone {
position: absolute; left: 50px; top: 5px;
font-family: "Times New Roman";
text-decoration: none;
color: #FFEA5F;
font-size:20px;
letter-spacing:normal;
font-style:normal;
font-weight:bold;
z-index:2;
}
.address {
position: absolute; left: 650px; top: 5px;
width:1019px; height:20px;
font-family: "Times New Roman";
text-decoration: none;
color: #FFEA5F;
font-size:20px;
letter-spacing:normal;
font-style:normal;
font-weight:bold;
z-index:2;
}
#address {
position: absolute; left: 650px; top: 5px;
width:1019px; height:20px;
font-family: "Times New Roman";
text-decoration: none;
color: #FFEA5F;
font-size:20px;
letter-spacing:normal;
font-style:normal;
font-weight:bold;
z-index:2;
}
.home {
position: absolute; left: 797px; top: 105px;
font-family: "Arial";
text-decoration: none;
color: #FFEA5F;
font-size:15px;
letter-spacing:normal;
font-style:none;
font-weight:normal;
z-index:2;
}
#home {
position: absolute; left: 797px; top: 105px;
font-family: "Arial";
text-decoration: none;
color: #FFEA5F;
font-size:15px;
letter-spacing:normal;
font-style:none;
font-weight:normal;
z-index:2;
}
.about {
position: absolute; left: 797px; top: 150px;
font-family: "Arial";
text-decoration: none;
color: #FFEA5F;
font-size:15px;
letter-spacing:normal;
font-style:none;
font-weight:normal;
z-index:2;
}
#about {
position: absolute; left: 797px; top: 150px;
font-family: "Arial";
text-decoration: none;
color: #FFEA5F;
font-size:15px;
letter-spacing:normal;
font-style:none;
font-weight:normal;
z-index:2;
}
.service {
position: absolute; left: 797px; top: 198px;
font-family: "Arial";
text-decoration: none;
color: #FFEA5F;
font-size:15px;
letter-spacing:normal;
font-style:none;
font-weight:normal;
z-index:2;
}
#service {
position: absolute; left: 797px; top: 198px;
font-family: "Arial";
text-decoration: none;
color: #FFEA5F;
font-size:15px;
letter-spacing:normal;
font-style:none;
font-weight:normal;
z-index:2;
}
.wholesale {
position: absolute; left: 797px; top: 245px;
font-family: "Arial";
text-decoration: none;
color: #FFEA5F;
font-size:15px;
letter-spacing:normal;
font-style:none;
font-weight:normal;
z-index:2;
}
#wholesale {
position: absolute; left: 797px; top: 245px;
font-family: "Arial";
text-decoration: none;
color: #FFEA5F;
font-size:15px;
letter-spacing:normal;
font-style:none;
font-weight:normal;
z-index:2;
}
.contact {
position: absolute; left: 797px; top: 292px;
font-family: "Arial";
text-decoration: none;
color: #FFEA5F;
font-size:15px;
letter-spacing:normal;
font-style:none;
font-weight:normal;
z-index:2;
}
#contact {
position: absolute; left: 797px; top: 292px;
font-family: "Arial";
text-decoration: none;
color: #FFEA5F;
font-size:15px;
letter-spacing:normal;
font-style:none;
font-weight:normal;
z-index:2;
}
#black_line1 {
position: absolute; left: 0px; top: 360px;
width:1019px; height:1px;
border-width: 0px;
padding: 0px;
border-style: solid;
border-color:transparent;
background-color:#000000;
z-index:2;
}
#search_bar {
position: absolute; left: 0px; top: 361px;
width:1019px; height:30px;
border-width: 0px;
padding: 0px;
border-style: solid;
border-color: #000000;
background-color: #A8232B;
z-index:2;
}
#search_icon {
position: absolute; left: 5px; top: 363px;
width:26px; height:26px;
z-index:3;
}
#search_text {
position: absolute; left: 36px; top: 365px;
width:200px; height:30px;
font-family: "Times New Roman";
text-decoration: none;
color: #FFEA5F;
font-size:20px;
letter-spacing:normal;
font-style:none;
font-weight:none;
z-index:2;
}
#search_term {
position: absolute; left: 230px; top: 365px;
width:200px; height:30px;
z-index:2;
}
#search_where {
position: absolute; left: 680px; top: 366px;
width:200px; height:30px;
z-index:2;
}
#search_order1 {
position: absolute; left: 778px; top: 366px;
width:200px; height:30px;
z-index:2;
}
#search_order2 {
position: absolute; left: 880px; top: 366px;
width:200px; height:30px;
z-index:2;
}
#search_button {
position: absolute; left: 940px; top: 364px;
width:200px; height:30px;
z-index:2;
}
#options_bar1 {
position: absolute; left: 3px; top: 395px;
width:210px; height:32px;
z-index:3;
}
#options_bar1_text {
position: absolute; left: 10px; top: 400px;
width:210px; height:30px;
font-family: "Times New Roman";
text-decoration: none;
color: #FFEA5F;
font-size:20px;
letter-spacing:normal;
font-style:none;
font-weight:none;
z-index:4;
}
#options_bar1_bg {
position: absolute; left: 3px; top: 426px;
width:208px; height:100%;
border-width: 1px;
padding: 0px;
border-style: solid;
border-color:#000000;
background-color:#BD5338;
z-index:3;
}
#main_bar1 {
position: absolute; left: 216px; top: 395px;
width:587px; height:32px;
z-index:3;
}
#main_bar1_text {
position: absolute; left: 228px; top: 400px;
width:567px; height:30px;
font-family: "Times New Roman";
text-decoration: none;
color: #FFEA5F;
font-size:20px;
letter-spacing:normal;
font-weight:none;
z-index:4;
}
#options_bar2 {
position: absolute; left: 806px; top: 395px;
width:210px; height:32px;
z-index:3;
}
#options_bar2_text {
position: absolute; left: 813px; top: 400px;
width:210px; height:30px;
font-family: "Times New Roman";
text-decoration: none;
color: #FFEA5F;
font-size:20px;
letter-spacing:normal;
font-style:none;
font-weight:none;
z-index:4;
}
</style>