Wolfenstein
07 Sep 2009, 04:13 PM
Hi, I am new to the forum as well as to web designing. I am using asp.net master pages and I am trying to make a basic template to use in future projects. However I am new to this and need an experienced eye to show me my errors and offer suggestions.
My goal is to have a 3 column fluid design with header and footer. The left and right column I want 150px. Other thoughts I have yet to do is actually work on the header section. Basicly I want a logo area (on the left side) a place for login registration on the right and below a menu div.
I would like someone to take a look at what code I have. One major problem is there is a space between the left and center content area I would like to free up, but I haven't been able to figure it out yet in the css. So if you would take a look and please show me how to clean it up. Thanks in advance. Just be warned it is an ugly settup as is, and I am trying to figure things out.
<body>
<form id="form1" runat="server">
<div id="header">
<div id="logo" style="background-color: #808080"><h1>SiteName</h1></div>
</div>
<div id="container">
<div id="center" class="column">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
</form>
</body>
</html>
CSS
body {
min-width: 550px; /* 2x LC width + RC width */
background-color: Gray;
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px;
background-color:white; /* RC width */
}
#header {
Width: 100%;
height: 90px;
background-color: yellow;
}
#container .column {
position:relative;
float: left;
top: 0px;
background-color:White;
}
#center {
width: 100%;
}
#left {
width: 150px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
height: 600px;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
background-color: blue;
height: 600px;
}
#footer {
clear: both;
background-color:Teal;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
My goal is to have a 3 column fluid design with header and footer. The left and right column I want 150px. Other thoughts I have yet to do is actually work on the header section. Basicly I want a logo area (on the left side) a place for login registration on the right and below a menu div.
I would like someone to take a look at what code I have. One major problem is there is a space between the left and center content area I would like to free up, but I haven't been able to figure it out yet in the css. So if you would take a look and please show me how to clean it up. Thanks in advance. Just be warned it is an ugly settup as is, and I am trying to figure things out.
<body>
<form id="form1" runat="server">
<div id="header">
<div id="logo" style="background-color: #808080"><h1>SiteName</h1></div>
</div>
<div id="container">
<div id="center" class="column">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
</form>
</body>
</html>
CSS
body {
min-width: 550px; /* 2x LC width + RC width */
background-color: Gray;
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px;
background-color:white; /* RC width */
}
#header {
Width: 100%;
height: 90px;
background-color: yellow;
}
#container .column {
position:relative;
float: left;
top: 0px;
background-color:White;
}
#center {
width: 100%;
}
#left {
width: 150px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
height: 600px;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
background-color: blue;
height: 600px;
}
#footer {
clear: both;
background-color:Teal;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}