...
PDA

extending the left div navigation

jarv
01-12-2010, 11:40 AM
As you can see in teh picture below, the more items I add to my shopping basket, the more the page extends, I would like the left side (brown navigation) area to extend too I have tried height:100%; that doesn't work?!
Can someone please help?
http://www.mutecms.com/pc.jpg


<!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">
<head>
<title>Home</title>
</head>
<body >
<div id="pagecontainer">
<div id="header">
<div style="font-size:10px; margin-top:2px; text-align:right;">
<table style="margin:0 0 0 auto;">
<tr>
<td style="padding-right:8px; vertical-align:bottom;"><a href="index.asp?display=basket"><img src="images/build/basket.png" style="width:17px; height:26px;" alt="Shopping Basket"></a></td>
<td style="padding-bottom:4px; vertical-align:bottom;"><a href="index.asp?display=basket">Shopping Basket: Items 3</a></td>

<td style="padding-left:8px; padding-bottom:5px; vertical-align:bottom;"><a href="index.asp?display=checkout" class="on" style="font-weight:bold;">Proceed to checkout</a></td>

<td style="padding-left:4px; padding-bottom:7px; vertical-align:bottom;"><a href="index.asp?display=checkout"><img src="images/build/checkoutarrow.png" alt="Checkout Now"></a></td>

</tr>
</table>
</div>
<div id="topnavigation">
<a href="index.asp?pageID=1" title="Home" class="on" >
HOME
</a>
&nbsp;&nbsp;
<a href="index.asp?pageID=96" title="Heritage" class="off" >
HERITAGE
</a>
&nbsp;&nbsp;
<a href="index.asp?pageID=97" title="Collection" class="off" >
COLLECTION
</a>
&nbsp;&nbsp;
<a href="index.asp?pageID=99" title="How To Buy" class="off" >
HOW TO BUY
</a>
&nbsp;&nbsp;
<a href="index.asp?pageID=100" title="Contact Us" class="off" >
CONTACT US
</a>
</div>
</div>
<table cellspacing="0" cellpadding="0" id="shadows">
<tr>
<td colspan="3" style="height:11px;"><img src="images/build/shadow/ShadowTop.jpg" style="width:1024px;" /></td>
</tr>
<tr>
<td style="width:22px; vertical-align:top; background-image:url(images/build/shadow/shadow2L.jpg);"><img src="images/build/shadow/shadow1L.jpg" /></td>
<td rowspan="2">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<div id="maincontent">
<div id="leftnavigation">
<a href="index.asp?pageID=97&col_category=1&display=thumb"
title="Contact Us"
class="off" >DRESSES
</a>
<br /><img src="images/build/collectiondelim.png" />
<a href="index.asp?pageID=97&col_category=2&display=thumb"
title="Contact Us"
class="off" >JACKETS
</a>
<br /><img src="images/build/collectiondelim.png" />
<a href="index.asp?pageID=97&col_category=3&display=thumb"
title="Contact Us"
class="off" >SKIRTS
</a>
<br /><img src="images/build/collectiondelim.png" />
<a href="index.asp?pageID=97&col_category=4&display=thumb"
title="Contact Us"
class="off" >TROUSERS
</a>
<br /><img src="images/build/collectiondelim.png" />
<a href="index.asp?pageID=97&col_category=5&display=thumb"
title="Contact Us"
class="off" >TOPS
</a>
<br /><img src="images/build/collectiondelim.png" />
<a href="index.asp?pageID=97&col_category=6&display=thumb"
title="Contact Us"
class="off" >SUITS AND TAILORING
</a>
<br /><img src="images/build/collectiondelim.png" />
<a href="index.asp?pageID=97&col_category=7&display=thumb"
title="Contact Us"
class="off" >OCCASION WEAR
</a>
<br /><img src="images/build/collectiondelim.png" />
<a href="index.asp?pageID=97&col_category=8&display=thumb"
title="Contact Us"
class="off" >EVENING WEAR
</a>
<br /><img src="images/build/collectiondelim.png" />
<a href="index.asp?pageID=97&col_category=9&display=thumb"
title="Contact Us"
class="off" >FOR A WEDDING
</a>
<br /><img src="images/build/collectiondelim.png" /></div>
<style>
#checkoutbox {color:black;}
#buttonstop { position:absolute; right:20px; top:18px; }
.proceedtocheckout { }
</style>
<div id="buttonstop">
<form method="post" action="index.asp?display=checkout" name="tocheckout" style="float: right; clear: both; padding-right:30px">
<table style="margin:10px 0px;" >
<tr>
<td style="width:45%; text-align:center;"><a href="index.asp?pageID=97&display=main&Col_Category=1&productID=38" title="Continue Shopping"><img src="images/buttons/ContinueShoppingOff.png" onmouseover="this.src='images/buttons/ContinueShoppingOn.png';" onmouseout="this.src='images/buttons/ContinueShoppingOff.png';" border="0"></a></td>
<td style="width:10%;">&nbsp;</td>
<td style="width:45%; text-align:center;"><a href="index.asp?display=checkout" title="Proceed to checkout"><img src="images/buttons/ProceedToCheckoutOff.png" onmouseover="this.src='images/buttons/ProceedToCheckoutOn.png';" onmouseout="this.src='images/buttons/ProceedToCheckoutOff.png';" border="0"></a></td>
</tr>
</table>
</form>
</div>
<ul id="steps1">
<li class="current">SHOPPING BASKET</li>
</ul>
<table cellpadding="0" cellspacing="0" border="0" class="cont_body_table" style="width:568px;margin-right:8px;">
<tr>
<td>&nbsp;</td>
<td width="100%" class="cont_body_tall_t">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cont_body_tall_l">&nbsp;</td>
<td width="100%" class="cont_body_td vam">
<form name="updateAHScart" method="post" action="">
<table width="720" style="margin:58px 30px 30px 30px;">
<div id="topheader1">Current subtotal: &pound;1,467.00<span>Item Price</span></div>
<tr>
<td style="padding:10px 0px;" width="200">
<img src="images/upload/Lace03_009thumb.png" alt="Picture of product" />
</td>
<td valign="top" style="padding:10px 0px;">
<span style="text-transform: uppercase;">Cord Lace</span><br /><br />

Size: <strong>8</strong><br />
Color: <strong>Blue</strong><br /><br /><br />
Qty: <strong><img alt="Click here to reduce or remove your items" src="images/minus.gif" onClick="doQuantity('down', 'qty0')" style="cursor:pointer; ">
<input type="text" readonly name="qty" value="1" style="height:17px; border: 0px; width: 10px; border: #000 1px solid; width:20px; text-align:center;" id="qty0">
<img alt="Click here to increase the number of items in your basket" src="images/plus.gif" onClick="doQuantity('up', 'qty0')" style="cursor:pointer; "></strong>
stock level <strong>4</strong>

</td>
<td>&nbsp;</td>
<td valign="top" style="padding:10px 0px; text-align:right;">
&pound;369.00
</td>
</tr>
<tr>
<td height="1" colspan="4" bgcolor="#A36B7A"></td>
</tr>


<div id="topheader1">Current subtotal: &pound;1,467.00<span>Item Price</span></div>
<tr>
<td style="padding:10px 0px;" width="200">
<img src="images/upload/Lace01_002thumb.png" alt="Picture of product" />
</td>
<td valign="top" style="padding:10px 0px;">
<span style="text-transform: uppercase;">Cord Lace</span><br /><br />

Size: <strong>12</strong><br />
Color: <strong>Red</strong><br /><br /><br />
Qty: <strong><img alt="Click here to reduce or remove your items" src="images/minus.gif" onClick="doQuantity('down', 'qty1')" style="cursor:pointer; ">
<input type="text" readonly name="qty" value="1" style="height:17px; border: 0px; width: 10px; border: #000 1px solid; width:20px; text-align:center;" id="qty1">
<img alt="Click here to increase the number of items in your basket" src="images/plus.gif" onClick="doQuantity('up', 'qty1')" style="cursor:pointer; "></strong>
stock level <strong>5</strong>

</td>
<td>&nbsp;</td>
<td valign="top" style="padding:10px 0px; text-align:right;">
&pound;549.00
</td>
</tr>
<tr>
<td height="1" colspan="4" bgcolor="#A36B7A"></td>
</tr>


<div id="topheader1">Current subtotal: &pound;1,467.00<span>Item Price</span></div>
<tr>
<td style="padding:10px 0px;" width="200">
<img src="images/upload/Lace01_002thumb.png" alt="Picture of product" />
</td>
<td valign="top" style="padding:10px 0px;">
<span style="text-transform: uppercase;">Cord Lace</span><br /><br />

Size: <strong>12</strong><br />
Color: <strong>Blue</strong><br /><br /><br />
Qty: <strong><img alt="Click here to reduce or remove your items" src="images/minus.gif" onClick="doQuantity('down', 'qty2')" style="cursor:pointer; ">
<input type="text" readonly name="qty" value="1" style="height:17px; border: 0px; width: 10px; border: #000 1px solid; width:20px; text-align:center;" id="qty2">
<img alt="Click here to increase the number of items in your basket" src="images/plus.gif" onClick="doQuantity('up', 'qty2')" style="cursor:pointer; "></strong>
stock level <strong>5</strong>

</td>
<td>&nbsp;</td>
<td valign="top" style="padding:10px 0px; text-align:right;">
&pound;549.00
</td>
</tr>
<tr>
<td height="1" colspan="4" bgcolor="#A36B7A"></td>
</tr>


</td>
<tr>
<td style="padding:10px 0px; font:arial;" colspan="3">For delivery information please <a href="delivery.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=320&width=500&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox"><span>click here ></span></a>
<td style="text-align:right;" title="Sub Total">Subtotal:&nbsp;&pound;1,467.00</td>
</tr>
</table>
</form>



<style>
#notreadytobuy { background-color:#000000 !important; color:#ffffff; font-size:12px; font-weight:bold; width:145px; }
#readytobuy { background-color:#000000 !important; color:#ffffff; font-size:12px; font-weight:bold; width:145px; }
.selectedheader { color:#A36B7A; }
</style>

<form method="post" action="index.asp?display=checkout" name="tocheckout" style="float: right; clear: both; padding-right:30px">
<table style="margin:10px 0px;" >
<tr>
<td style="width:45%; text-align:center;"><a href="index.asp?pageID=97&display=main&Col_Category=1&productID=38" title="Continue Shopping"><img src="images/buttons/ContinueShoppingOff.png" onmouseover="this.src='images/buttons/ContinueShoppingOn.png';" onmouseout="this.src='images/buttons/ContinueShoppingOff.png';" border="0"></a></td>
<td style="width:10%;">&nbsp;</td>
<td style="width:45%; text-align:center;"><!--<input type="submit" name="order" value="Proceed to checkout" id="readytobuy" />--><a href="javascript:document.tocheckout.submit();" title="Proceed to checkout"><img src="images/buttons/ProceedToCheckoutOff.png" onmouseover="this.src='images/buttons/ProceedToCheckoutOn.png';" onmouseout="this.src='images/buttons/ProceedToCheckoutOff.png';" border="0"></a></td>
</tr>

</table>
</form>

</table>



<!-- BEGIN CHECKOUT CALL TO HSBC -->

<!-- END CHECKOUT CALL TO HSBC -->
</div>

</td>
<td style="width:21px; vertical-align:top; background-image:url(images/build/shadow/shadow2R.jpg);"><img src="images/build/shadow/shadow1R.jpg" /></td>

</tr>
<tr>
<td style="height:53px; vertical-align:bottom; background-image:url(images/build/shadow/shadow2L.jpg);"><img src="images/build/shadow/shadow3L.jpg" /></td>
<td style="height:53px; vertical-align:bottom; background-image:url(images/build/shadow/shadow2R.jpg);"><img src="images/build/shadow/shadow3R.jpg" /></td>
</tr>
<tr>

<td colspan="3" style="height:13px;"><img src="images/build/shadow/ShadowBottom.jpg" style="width:1024px;" /></td>
</tr>
</table>

<div class="footer">

<div id="bottomnavigation">


<a href="index.asp?pageID=101" title="Terms and Condictions" class="off" >
TERMS AND CONDITIONS
</a>
&nbsp;&nbsp;
<a href="index.asp?pageID=114" title="Delivery information" class="off" >
DELIVERY INFORMATION
</a>

&nbsp;&nbsp;
<a href="index.asp?pageID=103" title="Site Map" class="off" >
SITE MAP
</a>


</div>

<div id="companycontainer">&copy; Copyright 2010&nbsp;
<br/><br/><span style="color:#999999">Created by:</span>
</div>
</div>

</div>
<!-- include file="includes/__accessBackOffice.asp" --></body>
</html>



css

#maincontent {
display:inline;
width:981px;
min-height:520px;
float:left;
background-color:#FFFFFF;
overflow:hidden;
position:relative;
}
#leftnavigation {
width:133px;
min-height:490px;
padding:30px 20px 0px 20px;
float:left;
font-size: 10px;
background-color:#D9CEBB;
background-image:url('../images/build/pclogo.png');
background-position:bottom left;
background-repeat:no-repeat;
}
harrierdh
01-12-2010, 03:16 PM
There is a good article here about this.

http://www.positioniseverything.net/articles/onetruelayout/equalheight
The reaper
01-12-2010, 04:22 PM
Yes that is a good article, I've read it many times myself. Did that cover what you needed?
jarv
01-13-2010, 09:39 AM
Yes that is a good article, I've read it many times myself. Did that cover what you needed?

looks like it might work, I'll give it a try in a mo!
jarv
01-13-2010, 09:54 AM
thinking about it... it might not work as the leftnavigation is inside the maincontainer?! but I haven't tried it yet?!
jarv
01-13-2010, 11:27 AM
I cannot do it the way it said on the article as it pushes my logo right down!

I have separated my left menu out into 3 divs now, #leftnavigation, #leftmenu and #pclogo it has moved down a bit more but still doesn't hit the bottom of the #maincontent:


<div id="leftnavigation">
<div id="leftmenu">
<%
While NOT rs.EOF
response.write(delim)
rsID = rs("ID")
'rsPageTitle = rs.Fields.Item("PageTitle").Value
'rsLinkName = getAddress & "index.asp?pageID=" & qsPageID & "&catID=" & rsID & "&display=thumb"
%>
<a href="<%= getAddress & "index.asp?pageID=97&col_category=" & rsID & "&display=thumb"%>"
title="<%=(rsPageTitle)%>"
class="<%=IIF(cint(rsLinkName)=cint(rsID),"on","off")%>" ><%=(ucase(rs("CName")))%>
</a>
<%
delim = "<br /><img src=""images/build/collectiondelim.png"" />"
rs.MoveNext() :: Wend
%>
<br /><img src="images/build/collectiondelim.png" />
</div>
<div class="cl">&nbsp;</div>

<div id="pclogo">&nbsp;</div>

</div>

CSS

.cl {
clear: both;
}
#leftnavigation {
float:left;
font-size: 10px;
background-color:#D9CEBB;
}

#leftmenu {
width:133px;
min-height:490px;
padding-top:30px;
padding-right:20px;
padding-bottom:0px;
padding-left:20px;
float:left;
font-size: 10px;
}

#pclogo {
width:66px;
background-color:#D9CEBB;
background-image:url('../images/build/pclogo.png');
background-position:bottom left;
background-repeat:no-repeat;
height:89px;
}
Excavator
01-13-2010, 05:51 PM
I cannot do it the way it said on the article as it pushes my logo right down!

Could the Faux Column method be a possible solution for you? It is mentioned in that article that harrierdh linked you to, I have a demo of it here (http://nopeople.com/CSS/faux_columns/index.html).

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum