Board styling - List

The following are standard styles for our website. Add these 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 html and body fonts. Elements such as input, select, textarea, td do not inherit html and body fonts. So you should specify their font styles separately. Although not set above, also div doesn't inherit html and body fonts.

The border-collapse: collapse; make adjacent cells have shared borders.

The form's margin and padding have default values. For delicate design, removed the default margin and padding of form elements.

Remove #content in /*** Just for Looks ***/.

Open index.html and create a list.html file using the Save As editor menu.

Add the following to #content of 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="chat" />
  <div id="search">
    <input type="text" name="searchWord" size="15" maxlength="30" />
    <input type="submit" value="Search" />
  </div>
</form>

list design 1

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 added padding, #content's width 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 show the content's category on 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

Add the following to style the table's heading of the 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

Add the following to style table cells of the board.

.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 list headings 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 style="text-align: center" to list's item except the title.

<!-- 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

Add the following to style 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

Add the following and emphasize the comments' total number and the current page number using this.

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

list design 9

Place the New button on the right.

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

list design 10

Center the text field and button for searching.

#search {
  text-align: center;
}

list design 11

References

Board styling - List

CSS Layout