Friday 23rd of June 2017 05:25:05 AM

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

The borders are placed as they are because the border edge of inlineelements is controlled by the font-size, not theline-height. In other words, if aSPAN element has a font-size of12pt and a line-height of36pt, its content area is 12pthigh, and the content area is what will be surrounded with theborder.

This behavior can be altered by assigning padding to the inline 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

This would be no different than declaring overflow-clip: auto. It's more interesting to shift the clipping area, of course. For example:

DIV#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;
overflow: hidden; overflow-clip: rect(0.5em, 4em, 6.5em, 1em);}

This sets the clipping area inward half an em from the top and bottom, and one em from the right and left. This would cause a result something like that shown in Figure 9-11, where a dashed line has been added to illustrate the edges of the clippingshown in Figure 5-27, and the only difference thereis a single point in size.

Figure 5-27

Figure 5-27. Same font, same style, different sizes

There isn't much that can be done about this, unfortunately,save better font handling by operating systems. Usually, the italicand oblique fonts look exactly the same in web browsers.

Still, font-style can be useful. For example, itis a common typographic convention that a block quote should beyou wanted (for whatever reason) to clip the top 10 pixels of an image:

<IMG SRC="foo.gif" STYLE="clip: rect(10px, auto, auto, 0);">

The auto values will set the clipping rectangle's bottom to align with the bottom of the image, and the right edge to the right edge of the image. The value of 0 for left keeps the left edge of the clipping rectangle against the left edge of the image, but the 10px for top moves the top edge