Board styling - List

The following code is a common style for our website.
Add that code after the html, body selector in the /*** The Essential Code ***/.

pre {
    margin: 0 0 0.7em 0;
    font-family: Consolas, "Liberation Mono", Courier, monospace;	
}
input, select, textarea, td, th {
    color: #646464; 
    font-size: 12px;
    font-family: Roboto, sans-serif; 
}
table {
    border-collapse: collapse;
}
form { 
    margin: 0;
	padding: 0; 
}
a:link {
    color: #2C80D0;
    text-decoration: none;
}
a:visited {
    color: #2C80D0;
    text-decoration: none;
}
a:active {
    color: #2C80D0;
    text-decoration: none;
}
a:hover {
    color: #2C80D0;
    text-decoration: underline;
}

Do not assume that all elements inherit the font set in html and body.
The following line sets the fonts of the elements (input, select, textarea, td) that do not inherit the html and body fonts.
The div does not inherit the html and body fonts, but it does not need to be set to the common style.

border-collapse: collapse; of the table selector causes the border of the cell to overlap with the border of the adjacent cell.

The form's margin and padding have default values.
Since these values are not needed, they are all set to zero.

Remove #content in the /*** Just for Looks ***/.
Open index.html and create a list.html file using the 'Save As'.
Add the following to #content in the list.html.

<div id="content-categories">Small talk</div>
<table class="bbs-table">
<!--  List Heading -->
<tr>
	<th>NO</th>
	<th>TITLE</th>
	<th>DATE</th>
	<th>HIT</th>
</tr>
<!--  List Items start -->
<tr>
	<td>11</td> <!--No-->
	<td>
		<a href="#">Title</a>
		<!--If Attach File exists-->
		<img src="images/attach.png" alt="Attach File" />
		<!--Total Comments-->
		<span class="bbs-strong">[5]</span> 
		</td>
		<td>2011.11.15</td> <!--Creation Date-->
		<td>4555</td> <!--Read-->
</tr>
<!--  List Items end -->             
</table>
<div id="paging">
	<a href="#">[Prev]</a>
	<span class="bbs-strong">6</span> <!--Current Page-->
	<a href="#">[7]</a>
	<a href="#">[8]</a>
	<a href="#">[9]</a>
	<a href="#">[10]</a>
	<a href="#">[Next]</a>
</div>
<div id="list-menu">
	<input type="button" value="New" />
</div>
<form method="get">
	<input type="hidden" name="curPage" value="1" />
	<input type="hidden" name="boardCd" value="free" />
	<div id="search">
		<input type="text" name="searchWord" size="15" maxlength="30" />
		<input type="submit" value="Search" />
	</div>
</form>

list design 1

#content's padding, font size and line-height

Modify #content as shown below.

#content {
	margin-left: 180px;
	margin-right: 210px;
	padding-left: 9px;
	padding-right: 9px;
	font-size: 0.9em;
	line-height: 1.6;
}

Since we added padding, the value of the width property of #content is 592px.
1000 - Sum of left and right margins 390 (180 + 210) - Sum of left and right padding 18 (9 + 9) = 592

list design 2

#content-categories shows the content category at the top of #content.
Add the following to the stylesheets.

#content-categories {
	margin: 0;
	padding-top: 10px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
}

list design 3

Board table heading styling

Set the style of the table to be used on the bulletin board.

.bbs-table {
	width: 100%;
	margin: 0.7em 0 0 0;
}
.bbs-table th {
	color: #92B91C;
	border-top: 1px solid #92B91C;
	border-bottom: 1px solid #92B91C;
}

list design 4

Board table cell styling

.bbs-table td {
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid silver;
	line-height: 1.45;
}
.bbs-table td a {
	color: #555;
	text-decoration: none;
}
.bbs-table td a:hover {
	color:#555;
	text-decoration: underline;
}

list design 5

Adjust the width of the list header as shown below.

<!-- Board list heading -->
<tr>
    <th style="width: 60px;">NO</th>
    <th>TITLE</th>
    <th style="width: 84px;">DATE</th>
    <th style="width: 60px;">HIT</th>
</tr>

list design 6

Add text-align: center to the style property of all list items except the title as shown below.

<!-- List items start -->
<tr>
	<td style="text-align: center;">11</td><!-- No -->
	<td>
		<a href="#">Title</a>
		<!-- If attach file exists -->
		<img src="images/attach.png" alt="Attach File" style="vertical-align: middle;" />
		<!-- Total comments -->
		<span class="bbs-strong">[5]</span>
	</td>
	<td style="text-align: center;">2011.11.15</td>
	<td style="text-align: center;">4555</td>
</tr>
<!-- List items end -->

list design 7

#paging link styling

Add the following to the stylesheets for styling the page move link.

#paging {
    text-align: center;
    font-size: 13px;
}
#paging > a {
    color: #555;
    text-decoration: none;
}
#paging > a:hover {
    color: #555;
    text-decoration: underline;
}

list design 8

To emphasize the comments total number and the current page number on the board,
Add the following to stylesheets.

.bbs-strong {
	color: #FFA500;
	font-weight: bold;
}

list design 9

Place a new post button on the right

#list-menu {
    text-align: right;
}

list design 10

Move the text field and button for search to the center

#search {
	text-align: center;
}

list design 11

References