Step 1
I want to write PHP code that will read a log file of some sort and then create an HTML display for it. The display needs to look like an SMS text messaging system such as is seen on the iPhone.
I only need the timestamps, addresses, and bubbles. The navigation stuff is meaningless in the context of a log viewer since messages are not created or sent using this interface. This is for the auto emailer program and it handle sending and receiving messages automatically.
My first attempt at this is a simple HTML document used to test the CSS features available and how they look on different browsers. I am relying on things like the max-width value to make this work. My sample HTML document has dummy data, no pictures, and borders to show the tables.
This shows me that tables within divs works properly, at least with Chrome, IE 8, and Firefox.
Here is the HTML I used to generate the document above:
<!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" xml:lang="en">
<head>
<style type="text/css">
body { margin: 0px 0px; padding: 0px; text-align:center; }
table { border-collapse: collapse; }
#Content
{
width:650px;
margin: 0px auto;
text-align: left; /* Counteract to IE5/Win Hack */
padding: 0px;
border: 1px dashed #333;
overflow: auto;
}
.incoming { margin-top: 10px; margin-bottom: 10px; clear: both; }
.outgoing { margin-top: 10px; margin-bottom: 10px; clear: both; float:right; }
.precell { border: 1px solid white; max-width: 450px; }
.cell { border: 1px solid red; }
.textcell { max-width: 450px; }
.message { text-align: center; }
.message table { margin: 0px auto; }
</style>
</head>
<body>
<div id="Content">
<div class="message">
<table>
<tr><td class="cell">a</td><td class="cell">b</td><td class="cell">c</td></tr>
<tr><td class="cell">d</td><td class="call textcell">This is a message.</td><td class="cell">f</td></tr>
<tr><td class="cell">g</td><td class="cell">h</td><td class="cell">i</td></tr>
</table>
</div>
<div class="incoming">
<table>
<tr><td class="cell">a</td><td class="cell">b</td><td class="cell">c</td></tr>
<tr><td class="cell">d</td><td class="call textcell">This is the text that will display for a message. It might not work right in IE 8 because of the maximum width setting but we can hope it works.</td><td class="cell">f</td></tr>
<tr><td class="cell">g</td><td class="cell">h</td><td class="cell">i</td></tr>
</table>
</div>
<div class="outgoing">
<table>
<tr><td class="precell">a</td><td class="precell">Address goes here</td><td class="precell">c</td></tr>
<tr><td class="cell">a</td><td class="cell">b</td><td class="cell">c</td></tr>
<tr><td class="cell">d</td><td class="call textcell">This is the text that will display for a message. It might not work right in IE 8 because of the maximum width setting but we can hope it works.</td><td class="cell">f</td></tr>
<tr><td class="cell">g</td><td class="cell">h</td><td class="cell">i</td></tr>
</table>
</div>
<div class="outgoing">
<table>
<tr><td class="precell">a</td><td class="precell">Address goes here</td><td class="precell">c</td></tr>
<tr><td class="cell">a</td><td class="cell">b</td><td class="cell">c</td></tr>
<tr><td class="cell">d</td><td class="call textcell">Short text.</td><td class="cell">f</td></tr>
<tr><td class="cell">g</td><td class="cell">h</td><td class="cell">i</td></tr>
</table>
</div>
<div class="incoming">
<table>
<tr><td class="cell">a</td><td class="cell">b</td><td class="cell">c</td></tr>
<tr><td class="cell">d</td><td class="call textcell">This is the text that will display for a message. It might not </td><td class="cell">f</td></tr>
<tr><td class="cell">g</td><td class="cell">h</td><td class="cell">i</td></tr>
</table>
</div>
</div>
</body>
[Wow. I am using the Windows Live Writer and it went into an endless loop a moment ago. Thank goodness it has some sort of auto-save feature or I would have to type all of this again up to this point.]
My next step is to create the images that will fill in the cells of the tables. I will post again one I have a dummy document that looks like the final document will look.