Wel, als in Visual Studio een webpagina ontwikkelt kan je toch zien hoe die er in een webbrowser gaat uitzien?
Wel, die preview verschilt gigantisch van wat ik te zien krijg in de browser
Masterpage :
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="IpaMain.master.cs" Inherits="People_Work.Pages.Master.IpaMain" %>
<!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" lang="EN">
<!--
_________________________________________________________
| |
| DESIGN + http://fullahead.org |
| DATE + 2005.05.12 |
| COPYRIGHT + free use if this notice is kept in place |
|_________________________________________________________|
-->
<head runat="server">
<title>HR Managment intranet</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<link href="../css/StyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="../Images/icons/favIcon.ico" type="image/x-icon" style="width: 32px; height: 32px" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<!-- the tooltip -->
<div id="dynatip"> </div>
<div id="placeholder"></div>
<!-- Main site container -->
<div id="siteBox">
<form id="frmMain" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- Main site header : holds the img, title and top tabbed menu -->
<div id="header">
<!-- top rounded corner -->
<img alt="corner" height="10" src= "../Images/template/corner_tl.gif" style="float:right;" />
<!-- Site title and subTitle -->
<span class="title">
<span class="white">HR Management</span>
<span class="subTitle">Intranet</span>
</span>
<img src="../Images/Ipalogo.gif" alt="corner" style="float:right;" />
</div>
<!-- Content begins -->
<div id="content">
<!-- Who are you -->
<div id="identification">
<asp:Label ID="lblName" runat="server" font-italic="True" font-Bold="True" font-size="10" font-underline="True"></asp:Label>
<br/>
<asp:Label ID="lblLoginID" runat="server" font-italic="True" font-size="8"></asp:Label>
<br/>
<br/>
<div id="access">
<table>
<tr>
<td>
<asp:Label ID="lblAccessDescription" Text="Level:" font-Bold="True" font-Underline="True" font-size="8" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="lblAccess" font-size="8" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
<br/>
</div>
<!-- Left side menu : side bar links/news/search/etc. -->
<div id="contentLeft">
<asp:Panel ID="pnl_leftPanel" runat="server">
<asp:ContentPlaceHolder id="leftPanel" runat="server">
<asp:Menu ID="mnuMain" runat="server" OnMenuItemClick="mnuMain_MenuItemClick">
</asp:Menu>
</asp:ContentPlaceHolder>
</asp:Panel>
<!-- Creates the rounded corner on the bottom of the left menu -->
<div class="bottomCorner">
<img alt="bottom corner" class="vBottom" src="../Images/template/corner_sub_br.gif" />
</div>
</div>
<!-- Right side main content -->
<div id="contentRight" align="center">
<table style="font-size: 0.6em">
<tr>
<td style="vertical-align: top">
<asp:Panel ID="pnl_midPanel" runat="server" Width="100%">
<asp:ContentPlaceHolder id="midPanel" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</td>
<td style="vertical-align: top;width:210px">
<asp:Panel ID="pnl_rightPanel" runat="server">
<asp:ContentPlaceHolder id="rightPanel" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</td>
</tr>
</table>
<!-- Creates bottom left rounded corner -->
<img alt="bottom corner" class="vBottom" src="../Images/template/corner_sub_bl.gif" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<!-- Footer begins -->
<div id="footer">
<div id="footerLeft">  <a href="http://intranet" target="_blank">Intranet</a></div>
<div id="footerRight"> </div>
</div>
</form>
</div>
</body>
</html>
:
<%@ Page Title="" Language="C#" MasterPageFile="~/Pages/Master/IpaMain.Master" AutoEventWireup="true" CodeBehind="Persons.aspx.cs" Inherits="People_Work.Pages.Management.NewPerson" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<asp:Content ID="Main" ContentPlaceHolderID="midPanel" runat="server">
<div id="Persons">
<ajaxToolkit:TabContainer ID="PersonsData" runat="server" ActiveTabIndex="0" >
<asp:TabPanel runat="server" HeaderText="Personal data" ID="tabData" >
<ContentTemplate>
<table width="100%">
<!-- Persons -->
<tr>
<td width="15%" style="text-align: right">
<asp:Label runat="server" ID="lblFirstName" Text="First name:" Style="text-align: right" font-Bold="true" forecolor="black"/>
</td>
<td width="40%" style="text-align: left" >
<asp:TextBox runat="server" ID="txtFirstName" Width="97%" ></asp:TextBox>
</td>
<td width="45%">
<asp:RequiredFieldValidator id="txtFirstName_Required" runat="server" ErrorMessage="Required!" ControlToValidate="txtFirstName" Style="color:red;text-align:left"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator id="txtFirstName_Length" runat="server" ControlToValidate="txtFirstName" ErrorMessage="Maximum 200 characters"
ValidationExpression=".{0,200}" Style="color:red;text-align:left">
</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td width="15%" style="text-align: right">
<asp:Label runat="server" ID="lblLastName" Text="Last name:" Style="text-align: right" font-Bold="true" forecolor="black" />
</td>
<td width="40%" style="text-align: left" >
<asp:TextBox runat="server" ID="txtLastName" Width="97%" ></asp:TextBox>
</td>
<td width="45%">
<asp:RequiredFieldValidator id="txtLastName_Required" runat="server" ErrorMessage="Required!" ControlToValidate="txtLastName" Style="color:red;text-align:left"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator id="txtLastName_Length" runat="server" ControlToValidate="txtLastName" ErrorMessage="Maximum 200 characters"
ValidationExpression=".{0,200}" Style="color:red">
</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td width="15%" style="text-align: right">
<asp:Label runat="server" ID="lblEMail" Text="E-mail:" Style="text-align: right" font-Bold="true" forecolor="black" />
</td>
<td width="40%" style="text-align:left">
<asp:TextBox runat="server" ID="txtEMail" Width="97%" ></asp:TextBox>
</td>
<td width="45%">
<asp:RequiredFieldValidator id="txtEMail_Required" runat="server" ErrorMessage="Required!" ControlToValidate="txtEMail" Style="color:red;text-align:left"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator id="txtEMail_Format" runat="server" ControlToValidate="txtEMail" ErrorMessage="You must enter an email address"
ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" Style="color:red;text-align:left">
</asp:RegularExpressionValidator>
<asp:RegularExpressionValidator id="txtEMail_Length" runat="server" ControlToValidate="txtEMail" ErrorMessage="Maximum 450 characters"
ValidationExpression=".{0,450}" Style="color:red;text-align:left">
</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td width="15%" style="text-align: right">
<asp:Label runat="server" ID="lblLoginID" Text="Login:" Style="text-align: right" font-Bold="true" forecolor="black" />
</td>
<td width="40%" style="text-align: left">
<asp:TextBox runat="server" ID="txtLoginID" Width="97%" ></asp:TextBox>
</td>
<td width="45%">
<asp:RequiredFieldValidator id="txtLoginID_Required" runat="server" ErrorMessage="Required!" ControlToValidate="txtLoginID" Style="color:red;text-align:left"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator id="txtLoginID_Length" runat="server" ControlToValidate="txtLoginID" ErrorMessage="Maximum 45 characters"
ValidationExpression=".{0,45}" Style="color:red;text-align:left">
</asp:RegularExpressionValidator>
</td>
</tr>
<!-- Telephones -->
<tr>
<td width="15%" style="text-align: right">
<asp:Label runat="server" ID="lblFixedNumber" Text="Telephone:" Style="text-align: right" font-Bold="true" forecolor="black" />
</td>
<td width="40%" style="text-align: left">
<asp:TextBox runat="server" ID="txtFixedNumber" Width="97%" ></asp:TextBox>
</td>
<td width="45%">
<asp:RegularExpressionValidator id="txtFixedNumber_Length" runat="server" ControlToValidate="txtFixedNumber" ErrorMessage="Maximum 12 characters"
ValidationExpression=".{0,12}" Style="color:red;text-align:left">
</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td width="15%" style="text-align: right">
<asp:Label runat="server" ID="lblMobileNumber" Text="GSM:" Style="text-align: right" font-Bold="true" forecolor="black" />
</td>
<td width="40%" style="text-align: left">
<asp:TextBox runat="server" ID="txtMobileNumber" Width="97%" ></asp:TextBox>
</td>
<td width="45%">
<asp:RegularExpressionValidator id="txtMobileNumber_Length" runat="server" ControlToValidate="txtMobileNumber" ErrorMessage="Maximum 12 characters"
ValidationExpression=".{0,12}" Style="color:red;text-align:left">
</asp:RegularExpressionValidator>
</td>
</tr>
</table>
<!-- Contracts -->
<table width="100%">
<tr>
<td width="15%" style="text-align: left"></td>
<td width="10%" style="text-align: left"></td>
<td width="15%" style="text-align: left">
<asp:Label runat="server" ID="lblStartDate" Text="StartDate:" Style="text-align: left" Font-Bold="true" ForeColor="black"/>
</td>
<td width="15%" style="text-align: left">
<asp:Label runat="server" ID="lblEndDate" Text="EndDate:" Style="text-align: left" Font-Bold="true" ForeColor="black"/>
</td>
<td width="45%"></td>
</tr>
<tr>
<td width="15%" style="text-align: right">
<asp:Label runat="server" ID="lblContract" Text="Contractnr.:" Style="text-align: left" Font-Bold="true" ForeColor="black"/>
</td>
<td width="10%" style="text-align: left">
<asp:TextBox runat="server" ID="txtContract" Width="90%" ></asp:TextBox>
</td>
<td width="15%" style="text-align: center">
<asp:TextBox runat="server" ID="txtStartDate" Width="90%" ></asp:TextBox>
<asp:CalendarExtender ID="calendarStartDate" TargetControlID="txtStartDate"
runat="server" ClearTime="True" Format="dd/MM/yyyy"
TodaysDateFormat="d MMMM, yyyy" />
</td>
<td width="15%" style="text-align:center">
<asp:TextBox runat="server" ID="txtEndDate" Width="90%" ></asp:TextBox>
<asp:CalendarExtender ID="CalendarEndDate" TargetControlID="txtEndDate"
runat="server" ClearTime="True" Format="dd/MM/yyyy"
TodaysDateFormat="d MMMM, yyyy" />
</td>
<td width="45%">
<asp:RequiredFieldValidator id="txtContract_Required" runat="server" ErrorMessage="Required!" ControlToValidate="txtContract"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator id="txtContract_Length" runat="server" ControlToValidate="txtContract" ErrorMessage="Maximum 45 characters"
ValidationExpression=".{0,45}" Style="color:red">
</asp:RegularExpressionValidator>
<asp:CompareValidator id="txtStartDate_Format" runat="server" Type="Date" Operator="DataTypeCheck" ControlToValidate="txtStartDate"
ErrorMessage="Please enter a valid date." Style="color:red"></asp:CompareValidator>
<asp:RequiredFieldValidator id="txtStartDate_Required" runat="server" ErrorMessage="Required!" ControlToValidate="txtStartDate" Style="color:red"></asp:RequiredFieldValidator>
<asp:CompareValidator id="txtEndDate_Format" runat="server" Type="Date" Operator="DataTypeCheck" ControlToValidate="txtEndDate" ErrorMessage="Please enter a valid date." Style="color:red"></asp:CompareValidator>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td width="15%"></td>
<td width="20%" style="text-align:left">
<asp:Label runat="server" ID="lblDepartment" Text="Department:" Style="text-align: left" Font-Bold="true" ForeColor="black" />
</td>
<td width="20%" style="text-align:left">
<asp:Label runat="server" ID="lblContractType" Text="Type Contract:" Style="text-align: left" Font-Bold="true" ForeColor="black" />
</td>
<td width="45%" style="text-align: left"></td>
</tr>
<tr>
<td width="15%"></td>
<td width="20%" style="text-align: left" >
<asp:DropDownList ID="drpDepartments" runat="server" Width="97%"></asp:DropDownList>
</td>
<td width="20%" style="text-align: left">
<asp:DropDownList ID="drpContracts" runat="server" Width="97%"></asp:DropDownList>
</td>
<td width="45%" style="text-align: left"></td>
</tr>
</table>
<table width="100%">
<tr>
<td width="15%" style="text-align: left"></td>
<td width="20%" style="text-align: left"></td>
<td width="20%" style="text-align: left"></td>
<td width="45%"></td>
</tr>
<tr>
<td width="15%" style="text-align: left"></td>
<td width="20%" style="text-align: left">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="70%"
onclick="btnCancel_Click" />
</td>
<td>
<asp:Button ID="btnOK" runat="server" Text="OK" Width="70%"
onclick="btnOK_Click"/>
</td>
<td width="45%"></td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="Assets" ID="tabAssets">
<ContentTemplate>
<div style="min-width: 100%; width: 100%">
<table width="100%">
<tr>
<td width="100%">
<asp:Gridview AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None"
BorderWidth="1px" CellPadding="3" GridLines="Horizontal" HorizontalAlign="Center" ID="grdAssets"
OnRowDataBound= "grdAssets_RowDataBound"
OnPageIndexChanging="grdAssets_PageIndexChanging"
onsorting="grdAssets_Sorting" runat="server"
Width="100%"
ShowHeaderWhenEmpty="True">
<AlternatingRowStyle BackColor="#F7F7F7" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<SortedAscendingCellStyle BackColor="#F4F4FD" />
<SortedAscendingHeaderStyle BackColor="#5A4C9D" />
<SortedDescendingCellStyle BackColor="#D8D8F0" />
<SortedDescendingHeaderStyle BackColor="#3E3277" />
<Columns>
<asp:CommandField ShowSelectButton="True" ItemStyle-CssClass="HiddenColumn" HeaderStyle-CssClass="HiddenColumn"/>
<asp:BoundField DataField="AssetId" ItemStyle-CssClass="HiddenColumn" HeaderStyle-CssClass="HiddenColumn" />
<asp:BoundField DataField="AssetDescription" Visible="True" HeaderText="Asset Description" ReadOnly="True" SortExpression="AssetDescription"/>
<asp:BoundField DataField="PersonId" ItemStyle-CssClass="HiddenColumn" HeaderStyle-CssClass="HiddenColumn" />
<asp:BoundField DataField="Value" Visible="True" HeaderText="Value" ReadOnly="True" SortExpression="Value" />
<asp:BoundField DataField="AssetTypeId" ItemStyle-CssClass="HiddenColumn" HeaderStyle-CssClass="HiddenColumn" />
<asp:BoundField DataField="AssetTypeDescription" Visible="True" HeaderText="Asset Type Description" ReadOnly="True" SortExpression="TypeDescription" />
</Columns>
</asp:Gridview>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="Picture" ID="tabPicture">
</asp:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</asp:Content>
<asp:Content ID="Picture" ContentPlaceHolderID="rightPanel" runat="server" >
<asp:Image ID="downloadedImage" runat="server" src="../Images/Ipalogo.gif" alt="corner" style="float:right;"/>
</asp:Content>
:
/*
_________________________________________________________
| |
| DESIGN + http://fullahead.org |
| DATE + 2005.05.12 |
| COPYRIGHT + free use if this notice is kept in place |
|_________________________________________________________|
*/
.content
{
position: relative;
top: 10px;
}
/* -- Main layout styles -- */
body {
margin: 1em 1em 1em 1em;
padding: 0px;
font-family: verdana, sans-serif;
font-size: 1.0em;
background-color: #FFF;
}
#siteBox
{
position: fixed;
/*float: left; */
min-width: 100%;
width: 100%;
color: #FFFFFF;
}
/* -- Header layout/display styles -- */
#header {
float: left;
width: 100%;
height: 4em;
background: #25509F url(../images/template/hdr.jpg) no-repeat bottom left;
}
/* -- Header title and subTitle layout/display styles -- */
.title {
float: left;
padding: 1em 30px 0 2em;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
text-align: right;
line-height: 0.75em;
letter-spacing: -0.15em;
color: #FC0;
}
/* -- Content layout/display styles -- */
#content {
float: left;
width: 100%;
padding: 1em 0 1em 0;
background-color: #FFFFFF;
}
#contentLeft {
float: left;
width: 15%;
margin-bottom: 1em;
background: #777 url(../images/template/corner_sub_tr.gif) no-repeat top right;
}
#contentRight {
float: right;
width: 82%;
background: #FFFFFF url(../images/template/corner_sub_tl.gif) no-repeat top left;
}
.header, .subHeader {
display: block;
clear: both;
font-weight: bold;
font-size: 0.8em;
text-transform: lowercase;
color: #FC0;
border-bottom: 1px solid #FFFFFF;
}
/* -- Image alignment classes -- */
.imgLeft, .imgRight {
margin: 5px;
}
.imgLeft {
float: left;
margin-left: 0px;
}
.imgRight {
float: right;
margin-right: 0px;
}
/*------------------------------------------------------------------------ */
#dynatip
{
background-color: #000000;
border: medium solid #FFFFFF;
display: none;
font-size: 12px;
padding: 25px;
color: #fff;
width: 200px;
}
#dynatip.bottom
{
background-color: #000000;
border: medium solid #FFFFFF;
padding-top: 40px;
height: 55px;
z-index: 1000;
}
#dynatip.bottom
{
}
.HiddenColumn{display:none;}