Hi folks
I am developing a master page using CSS/DIV.
Basically, the master page and another ordinary aspx page look OK when viewed inside VWD Express 2008, but when the Default2.aspx page is displayed in the browser, the layout is all wrong.
Here is the source code for the master page:
CODE
<%@ Master Language="VB" CodeFile="CCFAjaxMasterPage.master.vb" Inherits="CCFAjaxMasterPage" %>
<!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 runat="server">
<title>Home Page</title>
<link href="MasterStyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="threecrosses" runat="server">
<asp:Image ID="ThreeCrossesImg" runat="server"
ImageUrl="05_08_11_three-crosses_thumb.jpg" Height="100px"
Width="207px" BorderStyle="None" />
</div>
<div id="coppinglogo" runat="server">
</div>
<div id="secondrow" runat="server">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
<br />
<br />
This is the second row</div>
<div id="navleft" runat="server">
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ImageSet="XPFileExplorer" NodeIndent="15" BackColor="Teal">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False"
HorizontalPadding="0px" VerticalPadding="0px" />
<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="2px" NodeSpacing="0px" VerticalPadding="2px" />
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<div id="content" runat="server">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" runat="server">
This is just the footer</div>
</form>
</body>
</html>
And here is the CSS stuff:
CODE
body
{
margin:0px;
padding:0px;
}
#threecrosses
{
float:left;
width: 20%;
height: 98px;
}
#coppinglogo
{
float:left;
width: 80%;
height: 100px;
}
#secondrow
{
background: #FF0000;
width: 100%;
height: 100px;
position: relative;
}
#navleft
{
clear:both;
background: #008080;
width: 25%;
height: auto;
position: relative;
}
#content
{
background: #C0C0C0;
float: left;
width: 75%;
height: auto;
position: relative;
}
#footer
{
clear: both;
background: #FF0000;
float: left;
width: 133%;
height: 100px;
position: relative;
display: inline;
}
This is the code for the Default2.aspx page:
CODE
<%@ Page Language="VB" MasterPageFile="~/CCFAjaxMasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<p>
This is some content for the Default2 web page.</p>
</asp:Content>
Unfortunately, the navleft section is being displayed all the way from Left to Right on the screen instead of just taking up 25% on the left hand side. The text in the content part is being displayed underneath the bottom of the navleft section instead of on the right hand side of the navleft section.
So, if anybody could show me where I have blundered, I would be most appreciative.
Kind regards
Ross
This post has been edited by ross_petersen: 27 Jun, 2008 - 06:46 PM
27 Jun, 2008 - 02:41 PM
| 