I am trying to implement the faux column method using a master page with the CSS presented in the book (with some height changes which may be the problem). My header graphic is 700px by 180 px. The navigation area is 700px by 30px and does not use a graphic. The very top graphic containing the name is not present in my code. The master page looks correct in the designer but renders with the navigation area covering the bottom 40px of the header and extending about 10px past the header, footer and body_right areas. Here is my code:
Code for master page:
Code:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="TLC.master.vb" Inherits="TullahomaLionsClub.TLC" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Tullahoma Lions Club</title>
<link href="TLCStyle1.css" rel="stylesheet" type="text/css" />
<link runat="server" rel="stylesheet"
href="~/CSS/Import.css"
type="text/css" />
<!--[if lt IE 7]>
<link runat="server" rel="stylesheet"
href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css">
<![endif]-->
<link href="myStyleSheet.css" rel="stylesheet" type="text/css" />
<link href="TLCMenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id= "pageWrapper">
<div id="headerGraphic">
</div>
<div id="navigationArea">
<asp:Menu CssSelectorClass="TLCMenu" ID="Menu1" runat="server"
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
Width="690px"
StaticDisplayLevels="2"
BackColor="#B5C7DE"
DynamicHorizontalOffset="2"
Font-Names="Verdana"
Font-Size="1em"
ForeColor="#284E98"
Height="24px"
StaticSubMenuIndent="10px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
<DynamicMenuStyle Width="100px" BackColor="#B5C7DE" />
<StaticSelectedStyle BackColor="SandyBrown" ForeColor="Gold" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" ForeColor="Gold" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
<div id="bodyArea">
<div id="bodyLeft">
<asp:LoginView ID="LoginView1" runat="server">
<RoleGroups>
<asp:RoleGroup Roles="Admin">
<ContentTemplate>
<asp:HyperLink ID="linkAdmin" runat="server" NavigateUrl="~/Admin/Default.aspx">Website Admin</asp:HyperLink>
<br />
</ContentTemplate>
</asp:RoleGroup>
<asp:RoleGroup Roles="Member">
</asp:RoleGroup>
<asp:RoleGroup Roles="KingLion">
</asp:RoleGroup>
</RoleGroups>
<AnonymousTemplate>
<asp:HyperLink ID="loginHyperlink" runat="server" NavigateUrl="~/login.aspx">Login</asp:HyperLink>
</AnonymousTemplate>
</asp:LoginView>
</div>
<div id="bodyRight">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" ParentLevelsDisplayed="2" >
</asp:SiteMapPath>
<br />
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="footerArea">© 2009: Tullahoma Lions Club, 407 Lions Club Lane, Tullahoma TN 37388 (931) 455-9351</div>
</div>
</div>
</form>
</body>
</html>
Main CSS file:
Code:
body
{
padding-bottom: 1%;
background-color: #b4cbe0;
/*background-color: #4d6267; */
margin: 0%;
padding-left: 1%;
padding-right: 1%;
height: 98%;
padding-top: 1%;
}
#headerGraphic
{
background-image: url(Images/HeaderImage.jpg);
width: 700px;
float: none;
height: 180px;
clear: both;
position: static;
background-repeat: no-repeat;
background-color:Navy
}
#navigationArea
{
/*background-image: url(Images/Header_bottom.jpg); */
position: static;
text-align: right;
width: 690px;
background-repeat: no-repeat;
font-family: Arial;
height: 26px;
color: yellow;
font-size: 1em;
vertical-align: middle;
font-weight: bold;
padding-bottom: 0px;
margin: 0%;
padding-left: 0%;
padding-right: 10px;
float: none;
clear: both;
padding-top: 0.3em;
background-color: #b4cbe0;
}
#bodyArea
{
float: left;
background-image: url(Images/sidebarGraphic.jpg);
background-color: white;
width: 700px;
background-repeat: repeat-y;
}
#bodyLeft
{
position: static;
text-align: center;
padding-bottom: 10px;
padding-left: 10px;
width: 130px;
padding-right: 10px;
font-family: Arial;
float: left;
color: white;
clear: left;
font-size: 0.7em;
vertical-align: top;
padding-top: 10px;
}
#bodyRight
{
clear: right;
padding-right: 10px;
padding-left: 10px;
font-size: 0.8em;
float: right;
padding-bottom: 10px;
vertical-align: top;
width: 530px;
color: #477897;
padding-top: 10px;
font-family: Arial;
position: static;
text-align: justify;
overflow:visible
}
#footerArea
{
/*background-image: url(Images/Header_bottom.jpg); */
position: static;
text-align: center;
width: 700px;
background-repeat: no-repeat;
font-family: Arial;
float: none;
height: 30px;
color: black;
clear: both;
font-size: 0.7em;
vertical-align: middle;
font-weight: bold;
}
.header
{
font-size: 1.3em;
float: left;
width: 100%;
color:#b4cbe0;
border-bottom:#b4cbe0 .13em solid;
font-family: 'Arial Black';
font-variant: small-caps;
}
#pageWrapper
{
width: 700px;
margin: auto;
border: solid 1pt #000;
}
The menu CSS:
Code:
.TLCMenu .AspNet-Menu-Horizontal
{
position: relative;
z-index: 300;
}
.TLCMenu ul.AspNet-Menu /* Tier 1 */
{
float: right;
}
.TLCMenu ul.AspNet-Menu ul /* Tier 2 */
{
width: 9em;
left: 0%;
background: #eeeeee;
z-index: 400;
}
.TLCMenu ul.AspNet-Menu ul li /* Tier 2 list litems */
{
width: 8.9em;
border:1px solid #cccccc;
float: left;
clear: left;
height: 100%;
}
.TLCMenu ul.AspNet-Menu ul ul /* Tier 3 */
{
top: -0.5em;
left: -6em;
}
.TLCMenu li /* all list items */
{
font-size: x-small;
}
.TLCMenu li:hoveer, /* list items being hovered over */
.TLCMenu li.AspNet-Menu-Hover
{
background: #477897;
}
.TLCMenu a, /* all anchors and spans (nodes with no link) */
.TLCMenu span
{
color: #477897;
padding: 4px 12px 4px 8px;
background: transparent url(arrowright.gif) right center no-repeat;
}
.TLCMenu li.AspNet-Menu-Leaf a, /* leaves */
.TLCMenu li.AspNet-Menu-Leaf span
{
background-image: none !important;
}
.TLCMenu li:hover a, /* hovered text */
.TLCMenu li:hover span,
.TLCMenu li.AspNet-Menu-Hover a,
.TLCMenu li.AspNet-Menu-Hover span,
.TLCMenu li:hover li:hover a,
.TLCMenu li:hover li:hover span,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.TLCMenu li:hover li:hover li:hover a,
.TLCMenu li:hover li:hover li:hover span,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
color: White;
background: transparent url(activeArrowRight.gif) right center no-repeat;
}
.TLCMenu li:hover li a, /* The tier above this one is hovered */
.TLCMenu li:hover li span,
.TLCMenu li.AspNet-Menu-Hover li a,
.TLCMenu li.AspNet-Menu-Hover li span,
.TLCMenu li:hover li:hover li a,
.TLCMenu li:hover li:hover li span,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
{
color: #477897;
background: transparent url(activeArrowRight.gif) right center no-repeat;
}
I've tried for hours to find what is causing this. I would greatly appreciate suggestions on where the error is and how to fix it. Thanks.
CSS does not render properly
Solution.
