• Choose a category
• All
• Classic-Fiction

What’s up with the Latin?

The flexible layouts built throughout this chapter require some kind of text so the browser knows how big to make things. The actual text isn’t important, but something needs to be there.

Typesetters have a long tradition of using phony Latin phrases as filler text. Traditionally, this text has begun with the words “Lorem Ipsum,” so it’s called Lorem Ipsum text.

This particular version is semi-randomly generated from a database of Latin words.

If you want, you can also use Lorem Ipsum in your page layout exercises. Conduct a search for Lorem Ipsum generators on the Web to get as much fake text as you want for your mockup pages.

Although Lorem Ipsum text is useful in the screen shots, it adds nothing to the code listings. Throughout this chapter, I remove the Lorem Ipsum text from the code listings to save space. See the original files on the CD-ROM or Web site for the full pages in all their Cesarean goodness.

Nothing at all is remarkable about this XHTML code, but it has a few important features, such as

♦ It’s standards-compliant. It’s good to check and make sure the basic XHTML code is well formed before you do a lot of CSS work with it. Sloppy XHTML can cause you major headaches later.

♦ It contains four divs. The parts of the page that will be moved later are all encased in div elements.

♦ Each div has an ID. All the divs have an ID determined from the sketch.

♦ No formatting is in the XHTML. The XHTML code contains no formatting at all. That’s left to the CSS.

♦ It has no style yet. Although a tag is pointing to a style sheet, the style is currently empty.

Figure 2-2 shows what the page looks like before you add any CSS to it.

Figure 2-2: The plain XHTML is plain indeed; some CSS will come in handy.

Adding preliminary CSS

You can write CSS in your editor, but the Web Developer toolbar’s CSS editor is an especially handy tool because it allows you to see the effects of your CSS immediately. Here’s how to use this tool:

1. Use Firefox for your primary testing.

Firefox has much better standards support than IE. Get your code working in Firefox first. Besides, the extremely handy Web Developer isn’t available for Internet Explorer.

2. Be sure the Web Developer toolbar is installed.

See Chapter 3 of Book I for more information on this wonderful free tool. You use this tool to modify your CSS and see the results immediately in the Web browser.

3. Activate the CSS editor by choosing Tools⇒Edit CSS or pressing Ctrl+Shift+E.

4. Create CSS rules.

Type the CSS rules in the provided window. Throughout this chapter, I show what rules you use and the order in which they go. The key thing about this editor is you can type a rule in the text window, and the page in the browser is immediately updated.

5. Check the results.

Watch the main page for interactive results. As soon as you finish a CSS rule, the Web page automatically refreshes, showing the results of your work.

6. Save your work.

The changes made during an edit session are temporary. If you specified a CSS file in your document, but it doesn’t exist, the Save button automatically creates and saves that file.

Using temporary borders

And now for one of my favorite CSS tricks. . . . Before doing anything else, create a selector for each of the named divs and add a temporary border to each div. Make each border a different color. The CSS might look like this:

#head {

border: 1px black solid;

}

#left {

border: 1px red solid;

}

#right {

border: 1px blue solid;

}

#footer {

border: 1px green solid;

}

You won’t keep these borders, but they provide some very useful cues while you’re working with the layout:

♦ Testing the selectors: While you create a border around