CSS and Pop-up Forms

With "Ajax"-style unobtrusive server communication there are many opportunities to take information from users with less disruption to the continuity of their interaction with the Web site. In may cases the use of XMLHttpRequest and processing the server response do not have to be complex, and the CSS for the user interface does not have to be complex either, but it can be be rather specialized and unfamiliar to designers. Let's take a look at the CSS for a simple guestbook implemented as a pop-up form. The user triggers an event that pops up the form, which will submit to the server in the background, without taking the user to a new page.

Register yourself.

Name:
Email:
Birthday:

When the user clicks on the link above, a small form pops up. When the user submits the form successfully, it disappears again, perhaps leaving behind a confirmation message. In this article, let's focus on CSS techniques that can help create this kind of form.

Almost any pop-up is built from an element with absolute positioning. The CSS for this does not have to be complex. Elements with absolute position are often defined inside an element with position: relative, but this is not the only way. In fact if an element has position:absolute but no explicit location (unspecified left, right, top, bottom), CSS will position it at the same point where would appear if it were part of the flow.

In our example, almost all the work is done just by defining the pop-up through a DIV with position: absolute, but in this case we have used one more small trick as well -- using position: relative inside the definition of the pop-up itself. By putting all the displayable content of the pop-up in an element with relative position, we move the location of the element a little bit down and to the right from where it would otherwise appear when visible. The structure of the HTML defining our pop-up is:

 <p>[ Link or other control to invoke pop-up ]
 <div style="position: absolute; display: none;">
  <form style="position: relative; left: 1em; top: 2px;">
   . . . pop-up content goes here . . .
  </form>
 </div>

This simple combination of HTML and CSS define the positioning of our pop-up form. Static content can also be conveniently popped up in this way. In this case you would probably use a second DIV in place of the FORM tag used here.

Connecting with Information

We all seem to find that getting information is a part of getting our needs and desires met. We want to be close to our friends. We are looking for some fun, to get a job done. We'd like to find the tastiest, juiciest, most interesting and best of everything around us, and connecting with information is a part of that. This is search, but also something larger than that.

Search engines are great, but they are so objective and so cold! They give everybody the same answers to the same question. We want answers that match our taste and interests, our values, our sense of what is Good and what is not. So we read blogs, subscribe to RSS feeds we like, we tag things, keep in touch with our favorite communities, and look for sources of information and opinion that work for us.

People have discovered that they like being part of a group with common interests more than hearing a few points of view broadcast to them. We like to feel ourselves in charge of forming our own opinions and deciding what we like, and why not? Participation is often cited as a key feature of the new-style Web. As a trend, I think the desire each of us has to connect with the information as well as the people we personally prefer is one of the really large forces that will continue to shape the Web over time.

Where to?

The Web has changed since the rise of the Big Internet Companies , and for the better. Many of those companies are doing fine, still providing useful services, and even getting better, but there is an awful lot more going on.

Collaboration is big, for example Wikipedia as a major Internet resource. People networking, sharing ideas, sharing photos, just about sharing germs. Open source was already big, but it's just getting bigger and taking a big role in software innovation.

The people are speaking more and louder than ever with Blogging, RSS, and podcasting.

And more and more, the people are sifting, sorting, and rating it with tools like Slashdot, Del.icio.us, or even Digg. In this space, commercial sites offer ratings of just about any product sold at retail, from cars to movies to coffee machines.

Is there a bigger picture behind all of this? Perhaps some principles that illuminate the subject and shows what it's all about? Let's ask, "What do people really do with information?" we search for it, add to it, and update it. We may do this to get a job done or to connect with other people, for entertainment, etc., but these are the activities, the steps in the dance. I'm going to view the changing Web universe this way, for an article or two.