Saturday 22nd of November 2008 06:47:16 AM

Nice and Free CSS Templates

Figure 7-51. Borders on inline elements

The borders have to go somewhere. This is where they went.

Again, all of this is only true for the top and bottom sides of inline elements; the left and right sides are a different story. We'll start by considering the simple case of a small inline element within a single line, as depicted in Figure 7-52.

Figure 7-52. An inline element

Here, if we set values for the left or right border, not only will they be visible, but they'll displace the text around them, as

This site contains free css templates for your website - Just copy and paste and there you have a stunning website !
Menu und content dynamic	Menu fixed, content dynamic	Menu und content dynamic
3 columns all dynamic	4 columns all dynamic	Menu floating
Menu fix, Inhalt u. Head dynamic	3 columns fix centered	dynamic mit Head und Footer
fixed BOX centered	dynamic BOX centered	fixed Box total centered

H1 {border-style: solid; border-color: red green blue yellow;}

Figure 7-43. One border, many colors

As previously discussed, if no colors are defined, then the defaultcolor is the foreground color of the element. Thus, the followingdeclaration will be displayed as shown in Figure 7-44:

P.shade1 {border-style: solid; border-width: thick; color: gray;}P.shade2 {border-style: solid; border-width: thick; color: gray;border-color: black;}

Figure 7-44

Figure 7-44. Border colors based on the element's foreground (top) and the value of the border-color property (bottom)

Figure 7-65

Figure 7-65. Floating images with margins

(To resurrect the old paper-and-plastic analogy, the plastic margins around an image never overlap the plastic surrounding other elements.)

If you do float a text element, realize that unless you declare a width for that element, the CSS specification says that its width will tend toward zero. Thus, aoverflow: scroll;}

Figure 9-9

Figure 9-9. Invoking a scrollbar with overflow

If scroll is used, the panning mechanisms (e.g., scrollbars)should always be rendered. To quote the specification, "thisavoids any problems with scrollbarsappearing or disappearing in a dynamic environment." Thus, evenif the element has sufficient space to display all of its content,the scrollbars would still appear. In addition, when printing a pageor otherwise displaying the document in a paged medium, the content

Figure 8-54. Top-aligning text

What's happened here is that the top of the "tall"text's inline box is aligned with the top of the line box.Since the "tall" text has equal values forfont-size and line-height, itscontent height and inline box are the same thing. However, considerthis:

<P STYLE="font-size: 12px; line-height: 12px;">