Having a problem having my category bg adjust height automatically to fit all cat's

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>

Funny thing is I can complete this whole damn website(php mysql…) in just 2 days using tables. I am about to scrap all my work with css on this site and just do it the way I know best… tables!!!

figured it out using css… lol Must be lack of sleep have only four days to do this whole job and on no sleep! Added more columns and rows for each of the elements and now works fine… Durrrrrrrr.

Hi,

You are approaching this the wrong way I’m afraid and you’ve just jumped out of the frying pan and into the fire.:slight_smile: Here are a few suggestions to bear in mind for the future.

Your page is using an unworkable system of absolutely placed elements which are only usable in small doses and not really meant for structural layout in the way that you have used them. use floats and static positioning to lay out the pages and try to maintain the flow of the document so that you don;t gave to explicitly place every single thing as that is very tedious and unworkable.

You also seem to have swapped tables for divs instead of using semantic html elements for your content. Remember CSS is not just “Divs”! The page suffers badly from “divitus” and has no semantic structure. There are no headings, no p elements, no lists, no structure of any kind. Think about the content you are using and then use the correct html element that best describes that content. e.g. heading tags for headings, p elements for paragraphs etc.

Divs are mainly used for grouping elements together and for providing some structure to the page. For example your menu should be a list structure.


<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>

It should be something like this instead:


<ul id="menu">
    <li><a href="home.html">Home Page</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="service.html">Service Department</a></li>
    <li><a href="wholesale.html">Wholesale Request</a></li>
    <li><a href="contact.html">Contact us</a></li>
</ul>

No need for ids on each one and no need for classes on every anchor either as all can be reached via context. It’s an unordered list with elements put back into the flow so each item follows the next logically. You can use margins to create the space and then floating for horizontal alignment.

The css for your whole page could then be reduced down to about 30% of what you are using.

Also remember that if your products and category lists are tabular data then you should use a table for them.

Don’t repeat unnecessary styles. For example the following code:


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;
}


Could be reduced to this.


html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
}
body {background:url(bg.jpg) repeat fixed;}


A saving of about 80%.

Set your main font-family on the body element and it will cascade down into all elements and then you only need to change it where you want something and not keep repeating it over and over again.

You don’t need a table to center that layout. Just use an outer div like so.


#outer{
    width:1019px;
    margin:auto;
    min-height:100%;
}
* html #outer{height:100%}/* ie6 only*/


There is rarely a need to add an empty div just for a border as you could have applied a border to an exisiting element instead for the same effect.


<div id="black_line1"></div>

Sometimes you may need the odd empty element as a hook for styling but usually you can use whatever is already there.

Hope that gives you something to think about :slight_smile: