Home arrow XML arrow Page 2 - Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client
XML

Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client


In this article, the first of three parts, you will start creating a simple web-based POP 3 client using AJAX, which will use "XMLHttpRequest" objects to retrieve messages from a mail server.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 126
March 29, 2006
TABLE OF CONTENTS:
  1. · Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client
  2. · Styling the web-based POP 3 client: writing the CSS declarations
  3. · Defining the POP3 client's structure: coding the (X)HTML markup
  4. · Creating the skeleton of the client-side application layer: defining generic JavaScript functions

print this article
SEARCH DEVARTICLES

Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client - Styling the web-based POP 3 client: writing the CSS declarations
(Page 2 of 4 )

As I explained before, writing the required CSS declarations for properly styling the POP 3 client is really a breeze. Since its user interface is comprised of only three DIV elements, most of the CSS styles will be applied to them. In addition I will declare some CSS classes to improve the look of the control buttons. In accordance with this, the CSS rules that control the visual presentation of my web-based POP 3 client are as follows:

body {
            margin: 10px 0 0 0;
}
#serverinfo {
            width: 700px;
            height: 22px;
            padding: 2px 5px 2px 5px;
            border-top: 2px solid #000;
            border-left: 2px solid #000;
            border-right: 2px solid #000;
            background: #9cf;
            margin-left: auto;
            margin-right: auto;
            font: bold 11px Verdana, Arial, Helvetica, sans-
serif;
            color: #000;
}
#mailcontainer {
            width: 700px;
            height: 520px;
            padding: 2px 5px 2px 5px;
            border: 2px solid #000;
            background: #eee;
            margin-left: auto;
            margin-right: auto;
            font: 12px normal Arial, Helvetica, sans-serif;
            color: #000;
            overflow: auto;
}
#navbar {
            width: 700px;
            height: 22px;
            padding: 2px 5px 2px 5px;
            border-left: 2px solid #000;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            background: #9cf;
            margin-left: auto;
            margin-right: auto;
}
form {
            display: inline;
}
.inputbox {
            width: 150px;
            border: 1px solid #000;
            background: #eee;
}
.formbutton {
            width: 70px;
            height: 20px;
            font: bold 11px Verdana, Arial, Helvetica, sans-
serif;
            color: #000;
}

As shown above, I've used three different contextual selectors for styling each of the different sections that makes up the client program, by including the "#serverinfo," "#mailcontainer," and "#navbar" selectors respectively. In a similar way, I've added some styles to the user input fields and the control buttons together, so they look a little more appealing. You can change their appearance by coding your own CSS rules, in accordance with your personal preferences.

All right, since the CSS code listed above isn't rocket science, let's get rid of these boring details, and jump to the next section. There, we will write the (X)HTML markup in question, which conforms the actual building blocks for creating the front-end of the POP3 client application.


blog comments powered by Disqus
XML ARTICLES

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials