Click here to Skip to main content
15,881,860 members
Articles / Web Development / CSS

Building a Web Message Board using Visual Studio 2008, Part I - The Basic Message Board

Rate me:
Please Sign up or sign in to vote.
4.90/5 (83 votes)
30 Dec 2007CPOL47 min read 374.9K   3.7K   333  
This article builds a web based message board and uses several new technologies introduced with Visual Studio 2008 such as LINQ, WCF Web Programming, WCF Syndication, ASP.NET ListView, ASP.NET DataPager etc.
html
{
	padding: 8px;
	
}
body 
{
	background-color: White;
	margin: 4px 6px 6px 6px;
	font: message-box;
	border: solid 1px #4b4b4b;
}
h1
{
	background-image: url(headerGradient.jpg);
	height: 24px;
	font-family: Sans-Serif;
	font-size: medium;
	padding: 2px 0 0 4px;
	margin: 0;
	border-bottom: solid 1px #4C535C;
}
#mainControlBar
{
	padding: 4px;
	border-bottom:  solid 1px #4C535C;
	position: relative;
	height: 18px;
	overflow: hidden;
}
.ThemeSelector
{
	font: messagebox;
}
#controlBar
{
	padding: 4px 0 2px 100px;
	font: message-box;
	position: relative;
	
	border-bottom: solid 1px #4C535C;
	z-index: 9999;
	
}

#searchPanel
{
	width: 18em;
}
.searchText
{
	top: 0;
	position: absolute;
	height: 14px;
	width: 11em;
}
#themeSelectorPanel
{
	top: 2px;
	height: 20px;
	font: messagebox;
	margin-left: 2px;
	position: absolute;
	right: 10px;
}
br
{
	display: none;
}
.header
{
	background-image:  url(headerGradient2.jpg);
	height: 20px;
	border-bottom: solid 1px #4C535C;
	font: message-box;
}
.searchButton
{
	left: 160px;
	position: absolute;
	width: 5em;
}
.header, .message
{
	padding-right: 30em;
	position: relative;

}
.postedBy b, .datePosted b
{
	display: none;
}
.message .datePosted,
.header .datePosted
{
	position: absolute;
	width: 11em;
	overflow: hidden;
	right: 1em;
	height: 1.25em;
	padding-left: 1em;

}
.header .datePosted,
.header .postedBy
{
	border-left: solid 1px #4C535C;
	margin-top: 2px;
}
.header .subject
{
	margin: 4px;
}
.message .postedBy,
.header .postedBy
{
	position: absolute;
	width: 11em;
	overflow: hidden;
	right: 13em;
	height: 1.25em;
	padding-left: 1em;
}
.message .text
{
	text-indent: 1em;
	color: Blue;
	margin: 1em;
}
.message h2
{
	font: message-box;
	padding: 0;
	margin: 2px 32em 0 0;
}
.message .datePosted, .message .postedBy
{
	top: 2px;
}
.message
{
	padding: 1px;
	margin: 2px;
	border-bottom: dotted 1px #DDE0E3;
}
#newMessageLink
{
	position: absolute;
	left: 4px;
	top: 4px;
}
#newMessagePanel
{
	margin: 30px auto 10px 10px;
	
	width: 600px;
	border: solid 1px #DDE0E3;
	position: relative;
	padding: 1em;
}
#newMessagePanel h2
{
	position: relative;
	top: -1.75em;
	width: 10em;
	left: 15px;
	margin: 0;
	padding: 0;
	background-color: White;
	font-size: small;
	text-align: center;
}

.subjectTextBox
{
	width: 520px;
	position: absolute;
	left: 70px;
}
#subjectPanel, #textPanel
{
	position: relative;
}
#subjectPanel
{
	height: 30px;
}
#textPanel
{
	height: 335px;
}
.textTextBox
{
	width: 520px;
	position: absolute;
	left: 70px;
	height: 320px;	
}
#buttonPanel
{
	padding-left: 70px;
}
#textValidationPanel,
#subjectValidationPanel
{
	margin-left: 70px;
	margin-bottom: 4px;
}
.messageView
{
	width: 100%;
	margin: 1em;
}

.messageView h2
{
	font-size: 14pt;
	margin-bottom: 0;
}
.messageView b
{
	display: none;
}
.messageView .postedBy
{
	font-size: large;
}
.messageView .datePosted b
{
	color: #A29DE0;
	display: inline;
}

.messageView .text
{
	font-family: verdana;
	font-size: 9pt;
	margin: 1em 2em 1em 0em;
	border-top: solid 1px black;
	padding: 1em 1em 1em 0;
}
.controlBar
{
	border-bottom: solid 1px black;
	padding: 4px 4px 4px 4px;
	height: 21px;
}
.Login-Login,
.Login-Register
{
	margin: auto;
}
.Login-Register-Header
{
	font-weight: bold;
	text-align: center;
}
ul.LinkList
{
	margin: 0;
	list-style-image: none;
	list-style: none;
	padding: 0;
}
ul.LinkList li
{
	float:left;
	margin-right: 5px;
	list-style-image: none;
}
#SettingsPanel
{
	padding: 1em;
}
#SettingsPanel h2
{
	font-size: small;
	margin: 0 0 1em 0;
}
#TimeZonePanel
{
	margin-bottom: 1em;
}
.TimeZoneList
{
	margin-left: 1em;
}
ul.LinkList li img
{

	vertical-align: middle;
	margin-right: 2px;
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions