I’ve been working in ColdFusion for the last couple of years, but I’m trying to brush up on .NET. I have a pretty simple page design in mind, but I’m not able to get it to render accurately when using themes and a master page in .NET. Here’s my code to render the page in pure HTML and CSS:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
*, html {
padding: 0;
margin: 0;
position: relative;
}
body {
background-color: #333;
font-family: Verdana, Geneva, sans-serif;
}
#pgHead {
width: 912px;
margin: 12px auto 0 auto;
padding: 12px 12px;
background-color: #777;
color: #f8f8f8;
-webkit-border-radius: 6px;
-mox-border-radius: 6px;
border-radius: 6px;
}
#pgHead h1 {
text-shadow: #333 6px 3px 6px;
}
#wrapper {
width: 860px;
height: 640px;
overflow: visible;
padding: 12px 20px 25% 20px;
margin-bottom: -25%;
background: white url(images/bg.gif) center top repeat-y;
margin: 0 auto;
}
#leftNav {
width: 120px;
height: auto;
padding: 0 6px/* 800px 6px;
margin-bottom: -800px*/;
float: left;
clear: left;
}
#mainCont {
width: 702px;
height: auto;
padding: 0 12px/* 800px 12px;
margin-bottom: -800px*/;
float: left;
clear: right;
}
#mainCont * {
margin-top: 6px;
margin-bottom: 6px;
}
#ftr {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
#ftr p {
text-align: center;
font-size: 11px;
width: 880px;
margin: 0 auto;
padding: 3px;
background: white URL(images/bg_ftr.png) center top no-repeat;
color: #f8f8f8;
}
</style>
</head>
<body>
<div id="pgHead">
<h1>My .NET Site, 3.5 Framework</h1>
</div>
<div id="wrapper">
<div id="leftNav">
<p>This is the left navigation bar.</p>
</div>
<div id="mainCont">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor vincit, no nummy. Now is the time for all good men to come to the aid of their country. The quick brown fox jumped over the lazy dogs.</p>
<p>Now is the time for all good men to come to the aid of their country. Lorem ipsum dolor vincit, no nummy. The quick brown fox jumped over the lazy dogs.</p>
<p>The quick brown fox jumped over the lazy dogs. Lorem ipsum dolor vincit, no nummy. Now is the time for all good men to come to the aid of their country. </p>
</div>
<div id="ftr">
<p>Copyright © 2011, nosnetrom.com<br />
All rights reserved.</p>
</div>
</div>
</body>
</html>
In .NET, I find myself having to put a lot of the CSS attributes inline within the master page. I also had to change the HTML structure, as it wouldn’t render correctly with nested <DIV> elements. To top it all off, I’m still unable to get the background image to render in the page footer. :mad: Here’s the CSS and master page as I had to manipulate it for .NET.
*, html
{
margin: 0;
padding: 0;
font-family: Verdana, Helvetica, Sans-Serif;
position: relative;
}
body
{
background-color: #333;
}
.wrapper
{
position: relative;
background-color: #fff;
width: 860px;
height: 100%;
float: none;
clear: both;
padding: 50px 20px;
margin: 0 auto 12px auto;
background-image: url("../../images/bg.gif");
background-position: left top;
background-repeat: repeat-y;
}
.pgHead
{
position: relative;
width: 900px;
background-color: #777;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 6px auto 0 auto;
float: none;
clear: both;
padding: 18px 12px;
}
.pgHead h1, .ftr p
{
color: #ffffff;
}
.ftrWrapper
{
position: relative;
float: none;
clear: both;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
.ftr
{
position: relative;
font-size: 75%;
line-height: 110%;
text-align: center;
width: 840px;
margin: 0 auto;
background-image: url(br_ftr.png);
}
.leftNav
{
position: inherit;
width: 120px;
padding: 6px;
margin: 12px 12px auto 0;
float: left;
clear: left;
background-color: inherit;
}
.mainCont
{
position: inherit;
width: 702px;
float: left;
clear: right;
padding: 6px;
background-color: inherit;
}
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="pgHead">
<asp:ContentPlaceHolder id="pageHead" runat="server">
</asp:ContentPlaceHolder>
</div>
<div
id="wrapper"
style="background-color: #ffffff; width: 860px; height: auto;
float: none; clear: both; padding: 24px 20px 40% 20px; margin: 0 auto 12px auto;
background-image: url(bg.gif); background-position: left top;
background-repeat: repeat-y; overflow: visible;">
<asp:ContentPlaceHolder id="wrapperContents" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="ftr" style="position: absolute; bottom: 0; font-size: 75%; line-height: 110%; text-align: center; width: 840px; margin: -32px auto 0 auto; background-image: url(br_ftr.png); background-position: center top; background-repeat: no-repeat;">
<asp:ContentPlaceHolder id="footer" runat="server">
<p runat="server">Copyright ¡ 2011, Nosnetrom.com<br />
All rights reserved</p>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Are there some peculiarities about .NET and nested divs and background images that I need to learn? TIA for any help anyone can lend!