M
myzm
Hi there,
I am using MS Visual web developer with their eCommerse template. They
are using Jello Mold template style. I don't want 3 columns. So I
deleted all code related to the right column. But I can still see
something at the right bottom side. Can anyone help me?
Thanks.
CSS:
html, body, div, p, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, li, dl,
dt, dd, td, form, fieldset, a, img, button {
margin: 0;
padding: 0;
border: 0;
}
/* 'Jello Mold' page construction technique based on
http://www.positioniseverything.net/articles/jello.html */
body {
margin: 0;
padding: 0 386px;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size:76%;
background-image:url(Images/bg_tile.jpg);
background-repeat:repeat-x;
background-color:#FFFFFF;
color:#333333;
}
h1, h2, h3, h4, h5, h6 {color:#573922;}
/*Typographics styles adapted from
http://www.thenoodleincident.com/tutorials/typography/ */
h1 {
margin:0;
font-size: 1.6em;
font-weight: normal;
}
h2 {
margin: 0.5em 0;
font-size: 1.5em;
font-weight: normal;
}
h3 {
margin: 0.5em 0;
font-size: 1.4em;
font-weight: normal;
}
h4 {
margin: 0.5em 0;
font-size: 1.2em;
font-weight: bold;
}
h5 {
margin: 0.5em 0;
font-size: 1.0em;
font-weight: bold;
}
h6 {
margin: 0.5em 0;
font-size: 0.8em;
font-weight: bold;
}
p {
margin: 1em 0;
line-height:1.4;
}
a {
text-decoration:underline;
color:#F369B1;
}
a:hover {text-decoration:none;}
#sizer {
width: 58%;
max-width: 192px;
margin: 10px auto 0 auto;
padding: 0;
}
#expander {
position: relative;
min-width: 772px; /* Critical Safari fix! */
margin: 0 -386px 0 -386px;
background: #FFFFFF;
background-image:url(Images/column_bg.gif);
background-repeat:repeat-y;
background-position:top right;
}
/* Holly hack for IE \*/
* html #expander { height: 0; }
/* */
#wrapper {
width: 100%; /* helps IE get the child percentages right. */
/*border-bottom:1px solid #EBE4DE;*/
border-bottom:1px solid ;
text-align:left;
background-image:url(Images/column_bg.gif);
background-repeat:repeat-y;
}
/* http://positioniseverything.net/easyclearing */
..clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
..clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
..clearfix {display: block;}
/* End hide from IE-mac */
#skiptocontent{
position:absolute;
margin-left:-1000px;
}
#leftcolumn{
float:left;
width:152px;
margin-right:-3px; /* IE 3px display bug fix (in conjunction with the
rule following below)*/
background-color:#EBE4DE;
font-size:0.9em;
}
html>body #leftcolumn{margin-right:0;}
#leftcoltop{
height:40px;
background-color:#FAECE8;
background-image:url(Images/leftcoltop.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
#loginbox {
min-height:124px;
margin:2px;
padding:5px 0.5em;
border:1px solid #493221;
background-color:#FFFFFF;
background-image:url(Images/colgradient_short.jpg);
background-repeat:repeat-x;
color:#6D584D;
}
* html #loginbox {height:124px;}
#loginbox h4 {margin:0;}
#leftbarcontainer {
margin:2px;
padding:4em 0.5em;
border:1px solid #6D5B4D;
background-color:#FFFFFF;
}
#subnav {
padding-bottom:1em;
overflow:hidden;
}
#subnav a {}
#subnav a:hover {text-decoration:underline;}
..leftbaritem {padding:2em 0.5em;}
#searchbox {
position:relative;
height:130px;
padding:5px 0.5em;
margin-bottom:-2px;
background-color:#FFFFFF;
background-image: url(Images/searchbox_bg.jpg);
background-repeat: no-repeat;
}
#searchbox div {
position:absolute;
bottom:0.5em;
text-align:right;
}
#loginbox .txtBox, #searchbox .txtBox {
border:1px solid #64493E;
background-color:#FFFFFF;
font-size:1em;
}
/*#rightbarcontainer {
margin:2px;
padding:4em 0.5em;
border:1px solid #EAA6CB;
background-color:#FFFFFF;
background-image:url(Images/rightbarcontainer_bg.gif);
background-repeat:no-repeat;
}
..rightbaritem{
padding:2em 0.5em;
background-image:url(Images/rightbarheader.gif);
background-repeat:no-repeat;
}*/
#centercolumn{
height:1%;
margin:0;
/*background-image:url(Images/centercolrightcorner.gif); */
background-repeat:no-repeat;
background-position:top right;
}
html>body #centercolumn {
height:auto;
margin-left:152px;
/*margin-right:152px;*/
margin-right:0px;
}
#centercoltop{
height:18px;
/*background-image:url(Images/centercolleftcorner.gif);*/
background-repeat:no-repeat;
}
html>body #centercoltop {height:19px;}
#mainnav {
height:22px;
background-color:transparent;
font-size:1em;
background-image:url(Images/mainnav_bg.gif);
background-repeat:repeat-x;
background-position:bottom left;
}
html>body #mainnav {height:21px;}
#mainnav a {}
#mainnav a:hover {}
#mainnav table {text-align:right;}
#mainnav .item {
padding:0em 1em;
border-top:6px solid #FFFFFF;
font-weight:bold;
color:#6D584D;
}
html>body #mainnav .item {border-top:6px solid transparent;}
#mainnav .hover{}
#mainnav .selected {
border-top:6px solid #FAEBE7;
background-image:url(Images/mainnavselected.gif);
background-repeat:repeat-x;
}
html>body #mainnav .selected {border-top:6px solid #FAEBE7;}
#header {
position:relative;
height:134px;
margin:2px;
border:1px solid #493221;
background-color:#FFFFFF;
background-image:url(Images/header_bg.jpg);
background-repeat:no-repeat;
background-position:top right;
}
#maincontent {
margin:2px;
padding:4em 2em;
border:1px solid #EAA6CB;
background-image:url(Images/maincontent_bg.gif);
background-repeat:no-repeat;
background-position:top right;
}
#maincontent .teaser {
margin:-0.7em 0 0 0;
color:#A68866;
}
#maincontent h2:before{content: url(Images/magnolia_small.gif);}
#maincontent fieldset {
margin-bottom:1em;
padding:1em;
border:1px dotted #EEA2CD;
color:#573922;
}
#maincontent legend {background-color:#FFFFFF;}
* html #maincontent legend {padding:0.5em;}
#maincontent label {line-height:2em;}
#maincontent .txtBox {
border:1px solid #DDD1C4;
font-size:1em;
background-color:#F5F2EF;
}
html>body #maincontent .txtBox {font-size:1.2em;}
#maincontent .txtBox:focus {background-color:#FFFFFF;}
#maincontent caption {
text-align:left;
font-weight:bold;
}
#maincontent table tr td {padding: 0.2em 0.5em;}
..button {
border:1px solid #64493E;
color:#6D584D;
background-color:#FAEBE7;
font-size:smaller;
}
..imgfloatright {
float:right;
display:inline;
margin: 0.25em 0 0.25em 1em;
}
..imgfloatleft {
float:left;
display:inline;
margin: 0.25em 1em 0.25em 0;
}
div.readmore {
text-align:right;
}
#footer {
margin:2px;
padding:0.5em;
font-size:smaller;
}
#footer a {padding:0 0.5em;}
@media print {
body {
margin:0;
padding:0;
font-size:11pt;
line-height:13pt;
background:#FFFFFF !important;
}
#sizer {
margin:0;
width:auto !important;
}
#expander {
margin:0 !important;
background: none;
}
#wrapper {
border-bottom-style:none;
background:none;
}
a {
color:#666666;
text-decoration:underline;
}
#leftcolumn, #maincontent h2:before {display:none;}
#centercolumn {
width:100%;
margin:0 !important;
background:none;
}
#centercoltop {
height:auto;
background:none;
}
#header {
margin:0;
border:none;
height:auto;
background:none;
}
/*If the logo is a transparent gif it will look rather unsightly on
paper, so you can turn
it off here. */
#header img {display:none;}
#maincontent {
margin:0;
border:none;
background:transparent;
}
#maincontent .teaser {font-style:italic;}
#maincontent fieldset {border:none;}
#maincontent .txtBox {background:none;}
}
Master.template
<%@ Master Language="C#" AutoEventWireup="true" %>
<!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" lang="en" xml:lang="en">
<head runat="server">
<title></title>
<!-- Conditional comment to give IE/5/6/Win the javascript hack that
helps them do max-width. -->
<!--[if IE]>
<style type="text/css">
#sizer {
width:expression(document.body.clientWidth > 1156 ? "192px" : "58%"
);
}
</style>
<![endif]-->
<!-- Box model fixes for IE 5.0 and 5.5 -->
<!--[if IE 5]>
<style type="text/css">
td, th {font-size:76%;}
#rightcoltop {height:40px;}
#leftcoltop {height:40px;}
#searchbox {height:140px;}
#header {height:138px;}
#subnav table td a {font-size:smaller;}
</style>
<![endif]-->
<!-- IE7-specific fixes -->
<!--[if IE 7]>
<style type="text/css">
@import url(<asp:Literal runat="server" Text="<%$
Themes:StylesheetTheme(~/Assets/CSS/{0}_ie7.css) %>" />);
</style>
<![endif]-->
</head>
<body>
<div id="sizer">
<div id="expander">
<div id="wrapper" class="clearfix">
<form id="mainForm" runat="server">
<a href="#maincontent" id="skiptocontent" title="Click this link
to navigate directly to this page's content.">Skip to main content</a>
<div id="leftcolumn">
<div id="leftcoltop"><%-- Leave blank. --%></div>
<div id="loginbox">
<%-- Sample login control. --%>
<asp:Login ID="Login1" runat="server" Width="120px">
<LayoutTemplate>
<h4>Log In</h4>
<asp:Label ID="UserNameLabel" runat="server"
AssociatedControlID="UserName"><u>U</u>ser Name:</asp:Label><br />
<asp:TextBox ID="UserName" runat="server" AccessKey="u"
TabIndex="60" Columns="15" />
<asp:RequiredFieldValidator ID="UserNameRequired"
runat="server" ControlToValidate="UserName"
ErrorMessage="User Name is required." ToolTip="User Name is
required." ValidationGroup="Login1">*</asp:RequiredFieldValidator><br
/>
<asp:Label ID="PasswordLabel" runat="server"
AssociatedControlID="Password"><u>P</u>assword:</asp:Label><br />
<asp:TextBox ID="Password" runat="server" AccessKey="p"
TabIndex="61" TextMode="Password" Columns="15" />
<asp:RequiredFieldValidator ID="PasswordRequired"
runat="server" ControlToValidate="Password"
ErrorMessage="Password is required." ToolTip="Password is
required." ValidationGroup="Login1">*</asp:RequiredFieldValidator><br
/>
<asp:CheckBox ID="RememberMe" runat="server" Text="Remember
me." TabIndex="62" AccessKey="r" /><br />
<span style="color: red">
<asp:Literal ID="FailureText" runat="server"
EnableViewState="False" />
</span>
<div align="right">
<asp:Button ID="LoginButton" runat="server"
CommandName="Login" Text="Log In" ValidationGroup="Login1"
TabIndex="62" AccessKey="l" />
</div>
</LayoutTemplate>
</asp:Login>
</div>
<div id="leftbarcontainer">
<div id="leftbar">
<asp:ContentPlaceHolder runat="server" ID="subnavigation">
<%-- Optional subnavigation. --%>
<div id="subnav">
<asp:TreeView runat="server" ID="subnavTreeview"
SkinID="subnavTreeview">
<Nodes>
<asp:TreeNode Text="Beverages"
NavigateUrl="~/Products.aspx?category=1" ToolTip="Soft drinks, coffees,
teas, beers, and ales">
<asp:TreeNode Text="Condiments"
NavigateUrl="~/Products.aspx?category=2" ToolTip="Sweet and savory
sauces, relishes, spreads, and seasonings" />
<asp:TreeNode Text="Confections"
NavigateUrl="~/Products.aspx?category=3" ToolTip="Desserts, candies,
and sweet breads" />
</asp:TreeNode>
<asp:TreeNode Text="Dairy Products"
NavigateUrl="~/Products.aspx?category=4" ToolTip="Cheeses">
<asp:TreeNode Text="Grains/Cereals"
NavigateUrl="~/Products.aspx?category=5" ToolTip="Breads, crackers,
pasta, and cereal" />
<asp:TreeNode Text="Meat/Poultry"
NavigateUrl="~/Products.aspx?category=6" ToolTip="Prepared meats" />
</asp:TreeNode>
<asp:TreeNode Text="Produce"
NavigateUrl="~/Products.aspx?category=7" ToolTip="Dried fruit and bean
curd">
<asp:TreeNode Text="Seafood"
NavigateUrl="~/Products.aspx?category=8" ToolTip="Seaweed and fish" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder runat="server" ID="leftbarcontent">
<%-- Sample content of the left sidebar. Use the
following structure for your
own:
<div class="leftbaritem">
<h4>Headline</h4>
<p>Content goes here</p>
</div>
--%>
<div class="leftbaritem">
<h4>
Featured Products</h4>
<p style="text-align:center;">
<asp:Image runat="server" ID="product1"
SkinID="productImage1" /></p>
<p>
Donec ornare dolor nec ipsum.</p>
<div class="readmore">
<a href="javascript:;" title="More info">Pellentesque
»</a></div>
<p style="text-align:center;">
<asp:Image runat="server" ID="product2"
SkinID="productImage2" /></p>
<p>
In hac habitasse platea dictumst.</p>
<div class="readmore">
<a href="javascript:;" title="More info">Mauris diam est
»</a></div>
</div>
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<div id="centercolumn">
<div id="centercoltop"><%-- Leave blank. --%></div>
<div id="mainnav" align="right">
<asp:SiteMapDataSource runat="server" ID="mainnavSitemap" />
<asp:Menu ID="mainMenu" SkinID="mainMenu"
DataSourceID="mainnavSitemap" Orientation="Horizontal" runat="server"
StaticDisplayLevels="2" MaximumDynamicDisplayLevels="0"
StaticSubMenuIndent="0" />
</div>
<div id="header">
<asp:HyperLink ID="lnkHome" runat="server" ToolTip="Return to
homepage" NavigateUrl="~/Default.aspx">
<asp:Image runat="server" ID="logo" SkinID="logoImage" />
</asp:HyperLink>
</div>
<div id="maincontent">
<asp:ContentPlaceHolder runat="server" ID="content">
<%-- Main page content goes here. Some sample content
follows.--%>
</asp:ContentPlaceHolder>
</div>
<div id="footer">
© 2006 <a href="javascript:;" title="Terms of
Use">Terms of Use</a> | <a href="javascript:;" title="Privacy
Statement">Privacy
Statement</a> | <a href="javascript:;" title="Contact
Us">Contact Us</a> | <a href="javascript:;" title="Sample
link # 4">Link 4</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I am using MS Visual web developer with their eCommerse template. They
are using Jello Mold template style. I don't want 3 columns. So I
deleted all code related to the right column. But I can still see
something at the right bottom side. Can anyone help me?
Thanks.
CSS:
html, body, div, p, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, li, dl,
dt, dd, td, form, fieldset, a, img, button {
margin: 0;
padding: 0;
border: 0;
}
/* 'Jello Mold' page construction technique based on
http://www.positioniseverything.net/articles/jello.html */
body {
margin: 0;
padding: 0 386px;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size:76%;
background-image:url(Images/bg_tile.jpg);
background-repeat:repeat-x;
background-color:#FFFFFF;
color:#333333;
}
h1, h2, h3, h4, h5, h6 {color:#573922;}
/*Typographics styles adapted from
http://www.thenoodleincident.com/tutorials/typography/ */
h1 {
margin:0;
font-size: 1.6em;
font-weight: normal;
}
h2 {
margin: 0.5em 0;
font-size: 1.5em;
font-weight: normal;
}
h3 {
margin: 0.5em 0;
font-size: 1.4em;
font-weight: normal;
}
h4 {
margin: 0.5em 0;
font-size: 1.2em;
font-weight: bold;
}
h5 {
margin: 0.5em 0;
font-size: 1.0em;
font-weight: bold;
}
h6 {
margin: 0.5em 0;
font-size: 0.8em;
font-weight: bold;
}
p {
margin: 1em 0;
line-height:1.4;
}
a {
text-decoration:underline;
color:#F369B1;
}
a:hover {text-decoration:none;}
#sizer {
width: 58%;
max-width: 192px;
margin: 10px auto 0 auto;
padding: 0;
}
#expander {
position: relative;
min-width: 772px; /* Critical Safari fix! */
margin: 0 -386px 0 -386px;
background: #FFFFFF;
background-image:url(Images/column_bg.gif);
background-repeat:repeat-y;
background-position:top right;
}
/* Holly hack for IE \*/
* html #expander { height: 0; }
/* */
#wrapper {
width: 100%; /* helps IE get the child percentages right. */
/*border-bottom:1px solid #EBE4DE;*/
border-bottom:1px solid ;
text-align:left;
background-image:url(Images/column_bg.gif);
background-repeat:repeat-y;
}
/* http://positioniseverything.net/easyclearing */
..clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
..clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
..clearfix {display: block;}
/* End hide from IE-mac */
#skiptocontent{
position:absolute;
margin-left:-1000px;
}
#leftcolumn{
float:left;
width:152px;
margin-right:-3px; /* IE 3px display bug fix (in conjunction with the
rule following below)*/
background-color:#EBE4DE;
font-size:0.9em;
}
html>body #leftcolumn{margin-right:0;}
#leftcoltop{
height:40px;
background-color:#FAECE8;
background-image:url(Images/leftcoltop.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
#loginbox {
min-height:124px;
margin:2px;
padding:5px 0.5em;
border:1px solid #493221;
background-color:#FFFFFF;
background-image:url(Images/colgradient_short.jpg);
background-repeat:repeat-x;
color:#6D584D;
}
* html #loginbox {height:124px;}
#loginbox h4 {margin:0;}
#leftbarcontainer {
margin:2px;
padding:4em 0.5em;
border:1px solid #6D5B4D;
background-color:#FFFFFF;
}
#subnav {
padding-bottom:1em;
overflow:hidden;
}
#subnav a {}
#subnav a:hover {text-decoration:underline;}
..leftbaritem {padding:2em 0.5em;}
#searchbox {
position:relative;
height:130px;
padding:5px 0.5em;
margin-bottom:-2px;
background-color:#FFFFFF;
background-image: url(Images/searchbox_bg.jpg);
background-repeat: no-repeat;
}
#searchbox div {
position:absolute;
bottom:0.5em;
text-align:right;
}
#loginbox .txtBox, #searchbox .txtBox {
border:1px solid #64493E;
background-color:#FFFFFF;
font-size:1em;
}
/*#rightbarcontainer {
margin:2px;
padding:4em 0.5em;
border:1px solid #EAA6CB;
background-color:#FFFFFF;
background-image:url(Images/rightbarcontainer_bg.gif);
background-repeat:no-repeat;
}
..rightbaritem{
padding:2em 0.5em;
background-image:url(Images/rightbarheader.gif);
background-repeat:no-repeat;
}*/
#centercolumn{
height:1%;
margin:0;
/*background-image:url(Images/centercolrightcorner.gif); */
background-repeat:no-repeat;
background-position:top right;
}
html>body #centercolumn {
height:auto;
margin-left:152px;
/*margin-right:152px;*/
margin-right:0px;
}
#centercoltop{
height:18px;
/*background-image:url(Images/centercolleftcorner.gif);*/
background-repeat:no-repeat;
}
html>body #centercoltop {height:19px;}
#mainnav {
height:22px;
background-color:transparent;
font-size:1em;
background-image:url(Images/mainnav_bg.gif);
background-repeat:repeat-x;
background-position:bottom left;
}
html>body #mainnav {height:21px;}
#mainnav a {}
#mainnav a:hover {}
#mainnav table {text-align:right;}
#mainnav .item {
padding:0em 1em;
border-top:6px solid #FFFFFF;
font-weight:bold;
color:#6D584D;
}
html>body #mainnav .item {border-top:6px solid transparent;}
#mainnav .hover{}
#mainnav .selected {
border-top:6px solid #FAEBE7;
background-image:url(Images/mainnavselected.gif);
background-repeat:repeat-x;
}
html>body #mainnav .selected {border-top:6px solid #FAEBE7;}
#header {
position:relative;
height:134px;
margin:2px;
border:1px solid #493221;
background-color:#FFFFFF;
background-image:url(Images/header_bg.jpg);
background-repeat:no-repeat;
background-position:top right;
}
#maincontent {
margin:2px;
padding:4em 2em;
border:1px solid #EAA6CB;
background-image:url(Images/maincontent_bg.gif);
background-repeat:no-repeat;
background-position:top right;
}
#maincontent .teaser {
margin:-0.7em 0 0 0;
color:#A68866;
}
#maincontent h2:before{content: url(Images/magnolia_small.gif);}
#maincontent fieldset {
margin-bottom:1em;
padding:1em;
border:1px dotted #EEA2CD;
color:#573922;
}
#maincontent legend {background-color:#FFFFFF;}
* html #maincontent legend {padding:0.5em;}
#maincontent label {line-height:2em;}
#maincontent .txtBox {
border:1px solid #DDD1C4;
font-size:1em;
background-color:#F5F2EF;
}
html>body #maincontent .txtBox {font-size:1.2em;}
#maincontent .txtBox:focus {background-color:#FFFFFF;}
#maincontent caption {
text-align:left;
font-weight:bold;
}
#maincontent table tr td {padding: 0.2em 0.5em;}
..button {
border:1px solid #64493E;
color:#6D584D;
background-color:#FAEBE7;
font-size:smaller;
}
..imgfloatright {
float:right;
display:inline;
margin: 0.25em 0 0.25em 1em;
}
..imgfloatleft {
float:left;
display:inline;
margin: 0.25em 1em 0.25em 0;
}
div.readmore {
text-align:right;
}
#footer {
margin:2px;
padding:0.5em;
font-size:smaller;
}
#footer a {padding:0 0.5em;}
@media print {
body {
margin:0;
padding:0;
font-size:11pt;
line-height:13pt;
background:#FFFFFF !important;
}
#sizer {
margin:0;
width:auto !important;
}
#expander {
margin:0 !important;
background: none;
}
#wrapper {
border-bottom-style:none;
background:none;
}
a {
color:#666666;
text-decoration:underline;
}
#leftcolumn, #maincontent h2:before {display:none;}
#centercolumn {
width:100%;
margin:0 !important;
background:none;
}
#centercoltop {
height:auto;
background:none;
}
#header {
margin:0;
border:none;
height:auto;
background:none;
}
/*If the logo is a transparent gif it will look rather unsightly on
paper, so you can turn
it off here. */
#header img {display:none;}
#maincontent {
margin:0;
border:none;
background:transparent;
}
#maincontent .teaser {font-style:italic;}
#maincontent fieldset {border:none;}
#maincontent .txtBox {background:none;}
}
Master.template
<%@ Master Language="C#" AutoEventWireup="true" %>
<!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" lang="en" xml:lang="en">
<head runat="server">
<title></title>
<!-- Conditional comment to give IE/5/6/Win the javascript hack that
helps them do max-width. -->
<!--[if IE]>
<style type="text/css">
#sizer {
width:expression(document.body.clientWidth > 1156 ? "192px" : "58%"
);
}
</style>
<![endif]-->
<!-- Box model fixes for IE 5.0 and 5.5 -->
<!--[if IE 5]>
<style type="text/css">
td, th {font-size:76%;}
#rightcoltop {height:40px;}
#leftcoltop {height:40px;}
#searchbox {height:140px;}
#header {height:138px;}
#subnav table td a {font-size:smaller;}
</style>
<![endif]-->
<!-- IE7-specific fixes -->
<!--[if IE 7]>
<style type="text/css">
@import url(<asp:Literal runat="server" Text="<%$
Themes:StylesheetTheme(~/Assets/CSS/{0}_ie7.css) %>" />);
</style>
<![endif]-->
</head>
<body>
<div id="sizer">
<div id="expander">
<div id="wrapper" class="clearfix">
<form id="mainForm" runat="server">
<a href="#maincontent" id="skiptocontent" title="Click this link
to navigate directly to this page's content.">Skip to main content</a>
<div id="leftcolumn">
<div id="leftcoltop"><%-- Leave blank. --%></div>
<div id="loginbox">
<%-- Sample login control. --%>
<asp:Login ID="Login1" runat="server" Width="120px">
<LayoutTemplate>
<h4>Log In</h4>
<asp:Label ID="UserNameLabel" runat="server"
AssociatedControlID="UserName"><u>U</u>ser Name:</asp:Label><br />
<asp:TextBox ID="UserName" runat="server" AccessKey="u"
TabIndex="60" Columns="15" />
<asp:RequiredFieldValidator ID="UserNameRequired"
runat="server" ControlToValidate="UserName"
ErrorMessage="User Name is required." ToolTip="User Name is
required." ValidationGroup="Login1">*</asp:RequiredFieldValidator><br
/>
<asp:Label ID="PasswordLabel" runat="server"
AssociatedControlID="Password"><u>P</u>assword:</asp:Label><br />
<asp:TextBox ID="Password" runat="server" AccessKey="p"
TabIndex="61" TextMode="Password" Columns="15" />
<asp:RequiredFieldValidator ID="PasswordRequired"
runat="server" ControlToValidate="Password"
ErrorMessage="Password is required." ToolTip="Password is
required." ValidationGroup="Login1">*</asp:RequiredFieldValidator><br
/>
<asp:CheckBox ID="RememberMe" runat="server" Text="Remember
me." TabIndex="62" AccessKey="r" /><br />
<span style="color: red">
<asp:Literal ID="FailureText" runat="server"
EnableViewState="False" />
</span>
<div align="right">
<asp:Button ID="LoginButton" runat="server"
CommandName="Login" Text="Log In" ValidationGroup="Login1"
TabIndex="62" AccessKey="l" />
</div>
</LayoutTemplate>
</asp:Login>
</div>
<div id="leftbarcontainer">
<div id="leftbar">
<asp:ContentPlaceHolder runat="server" ID="subnavigation">
<%-- Optional subnavigation. --%>
<div id="subnav">
<asp:TreeView runat="server" ID="subnavTreeview"
SkinID="subnavTreeview">
<Nodes>
<asp:TreeNode Text="Beverages"
NavigateUrl="~/Products.aspx?category=1" ToolTip="Soft drinks, coffees,
teas, beers, and ales">
<asp:TreeNode Text="Condiments"
NavigateUrl="~/Products.aspx?category=2" ToolTip="Sweet and savory
sauces, relishes, spreads, and seasonings" />
<asp:TreeNode Text="Confections"
NavigateUrl="~/Products.aspx?category=3" ToolTip="Desserts, candies,
and sweet breads" />
</asp:TreeNode>
<asp:TreeNode Text="Dairy Products"
NavigateUrl="~/Products.aspx?category=4" ToolTip="Cheeses">
<asp:TreeNode Text="Grains/Cereals"
NavigateUrl="~/Products.aspx?category=5" ToolTip="Breads, crackers,
pasta, and cereal" />
<asp:TreeNode Text="Meat/Poultry"
NavigateUrl="~/Products.aspx?category=6" ToolTip="Prepared meats" />
</asp:TreeNode>
<asp:TreeNode Text="Produce"
NavigateUrl="~/Products.aspx?category=7" ToolTip="Dried fruit and bean
curd">
<asp:TreeNode Text="Seafood"
NavigateUrl="~/Products.aspx?category=8" ToolTip="Seaweed and fish" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder runat="server" ID="leftbarcontent">
<%-- Sample content of the left sidebar. Use the
following structure for your
own:
<div class="leftbaritem">
<h4>Headline</h4>
<p>Content goes here</p>
</div>
--%>
<div class="leftbaritem">
<h4>
Featured Products</h4>
<p style="text-align:center;">
<asp:Image runat="server" ID="product1"
SkinID="productImage1" /></p>
<p>
Donec ornare dolor nec ipsum.</p>
<div class="readmore">
<a href="javascript:;" title="More info">Pellentesque
»</a></div>
<p style="text-align:center;">
<asp:Image runat="server" ID="product2"
SkinID="productImage2" /></p>
<p>
In hac habitasse platea dictumst.</p>
<div class="readmore">
<a href="javascript:;" title="More info">Mauris diam est
»</a></div>
</div>
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<div id="centercolumn">
<div id="centercoltop"><%-- Leave blank. --%></div>
<div id="mainnav" align="right">
<asp:SiteMapDataSource runat="server" ID="mainnavSitemap" />
<asp:Menu ID="mainMenu" SkinID="mainMenu"
DataSourceID="mainnavSitemap" Orientation="Horizontal" runat="server"
StaticDisplayLevels="2" MaximumDynamicDisplayLevels="0"
StaticSubMenuIndent="0" />
</div>
<div id="header">
<asp:HyperLink ID="lnkHome" runat="server" ToolTip="Return to
homepage" NavigateUrl="~/Default.aspx">
<asp:Image runat="server" ID="logo" SkinID="logoImage" />
</asp:HyperLink>
</div>
<div id="maincontent">
<asp:ContentPlaceHolder runat="server" ID="content">
<%-- Main page content goes here. Some sample content
follows.--%>
</asp:ContentPlaceHolder>
</div>
<div id="footer">
© 2006 <a href="javascript:;" title="Terms of
Use">Terms of Use</a> | <a href="javascript:;" title="Privacy
Statement">Privacy
Statement</a> | <a href="javascript:;" title="Contact
Us">Contact Us</a> | <a href="javascript:;" title="Sample
link # 4">Link 4</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>