Tuesday 21st of October 2014 12:18:18 PM

Nice and Free CSS Templates

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
will be set to be whatever is needed to reach the required total (that is, the content width of the parent element). The following markup is displayed as shown in Figure 8-13:

P {margin-left: 100px; margin-right: 100px; width: auto;}
Figure 8-13

Figure 8-13. Automatic width

This is the most common case, in fact, since it is equivalent to setting the margins and not declaring anything for the width. The result of this markup is exactly the same as that shown in Figure 8-13:


<IMG ALIGN=RIGHT HEIGHT=42 WIDTH=39 HSPACE=5 VSPACE=5 BORDER=0SRC="tinyearth.gif"></A>The University of Delaware SpatialAnalysis Lab is a proud sponsor of this website.  The animatedGIF image is also a link.  By default, a linked image has a 2-pixelwide blue border, but I suppressed that with the BORDER=0 attribute inthe IMG tag.

If you wanted to make sure that a document uses italic text in familiar ways, you could write a style sheet like this:

P {font-style: normal;}
EM, I {font-style: italic;}

As we can see in Figure 5-25, these styles would make paragraphs use an upright font, as usual, and cause the EM and I elements to use an italic font -- again, as usual. bold, so that it's easier to distinguish from its neighbors:

<P STYLE="margin: -1.75em 0 0 0; font-weight: bold;">
This paragraph has a negative top margin...
</P>

We can see in Figure 7-18 that the paragraph has been pulled up so far that it's practically overlapping the end of the previous paragraph. This is the expected effect.

In a like manner, setting a negative value on the other sides will is one major difference between margins and padding when it comes to inline elements. Let's turn things around and talk about left and right padding first off. Here, if we set values for the left or right padding, they will be visible, as Figure 7-60 makes apparent.

B {padding-left: 10px; padding-right: 10px; background: silver;}
Figure 7-60

Figure 7-60. Padding on an inline element

Note the extra background space that appears on either end of the boldfaced text. There's your padding.