I am developing an email application and aiming for the inbox layout to be similar to that of Mac Mail.
The emails are fetched from a database using ajax, outputting to XML. I then loop through the entries to extract the necessary elements.
My concern lies with the CSS implementation. I intend to structure the elements using <ul> and <li>, possibly nested like this:
<ul>
<li>
<ul>
<li class="from">Mike @ Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul>
<li class="from">Jame @ Gmail</li>
<li class="subject">Out Of Office</li>
<li class="date">12/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
.from {
}
.subject {
}
.date {
}
.preview {
}
My uncertainty revolves around whether I should reference the <ul> and <li> items within the CSS. Additionally, I'm unsure about the specific requirements to achieve the desired look.
PLEASE DO NOT RESPOND TO THIS POST. I BELIEVE I HAVE FIGURED IT OUT. ONCE I AM SATISFIED WITH THE RESULT, I WILL SHARE IT HERE FOR FUTURE REFERENCE...
Admitting defeat, here is my progress so far:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.inboxPanel {
width: 420px;
}
ul.inbox {
width: 100%;
list-style-type: none;
}
ul.message {
list-style-type: none;
display: block;
}
.from {
width: 50%;
border: 1px solid #ccc;
font-weight: 700;
float: left;
display: inline-block;
}
.subject {
border: 1px solid #ccc;
}
.date {
width: 50%;
border: 1px solid #ccc;
float: right;
display: inline-block;
}
.preview {
border: 1px solid #ccc;
}
</style>
<title></title>
</head>
<body>
<div class="inboxPanel">
<ul class="inbox">
<li>
<ul class="message">
<li class="from">Mike @ Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
// More code
</ul>
</div>
</body>
</html>