Saturday 01st of October 2016 05:26:11 PM

Nice and Free CSS Templates

top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em;
top: 60%; bottom: 10%; left: 60%; right: 10%; margin: 0;

Again, the similarity would be only visual in nature.

By using negative values, it is possible to position an element outside its containing block. For example, the following values will lead to the result shown in Figure 9-3:

top: -5em; bottom: 50%; left: 75%; right: -3em;
Figure 9-3

Figure 9-3. Positioning an element beyond its containing block

This site contains free css templates for your website - Just copy and paste and there you have a stunning website !

Menu und content

Menu fixed, content

Menu und content

3 columns all

4 columns all

Menu floating

Menu fix, Inhalt u.
Head dynamic

3 columns fix

dynamic mit
Head und Footer

fixed BOX centered

dynamic BOX

fixed Box total
much of the background image beyond the bottom of the browser window,as shown in Figure 6-53.

Figure 6-53

Figure 6-53. The background image appears too low to be seen fully

Furthermore, even assuming that the background image is initiallyvisible, it always scrolls with the document. Perhaps you don'twant to see what Figure 6-54 depicts:

Doing this has two immediate effects, as we can see from Figure 6-55. The first is that the background does notscroll along with the document. The second is that the position of them here -- being stuck in grayscale as we are -- however,we'll try to give you some idea of what you can do. Here are afew ideas to get you started.

This is a simple style sheet, as shown in Figure 6-19:

BODY {color: rgb(0%,50%,0%); background-color: #CCFFCC;}H1, H2 {color: yellow; background-color: rgb(0,51,0);}
Figure 6-19

Figure 6-19. The results of a simple style sheet

This style sheet is more sophisticated (shown in Figure 6-20):


UL {list-style-type: square;}OL {list-style-type: lower-roman;}
marginIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This setsthe size of the overall margin of an element. Vertically adjacentmargins of block-level elements are collapsed to be as large as thelargest margin, whereas inline elements effectively do not takemargins (they are allowed, but have no effect on page layout). Onlythe left and right margins of inline elements have any effect, andare not collapsed. Margins set on floated elements are not collapsedhyperlinks, as depicted in Figure 6-24. Of course, if you want to be able to see thetiling pattern, the image will probably need to be pretty small.After all, individual letters aren't that large!

A.grid {background-image: url(smallgrid.gif);}<P>This paragraph contains <A HREF="..." CLASS="grid">an anchor with abackground image</A> which is tiled only within the anchor.</P>
Figure 6-24

Figure 6-24. A background image on an inline element

There are a number of ways to employ this technique. You might place