Monday 29th of May 2017 05:02:38 PM

center a FIXED BOX

This BOX has a fixed width.
It is centered and adjusts to the browser window.
The height adjusts to the content.
more nice and free css templates

body {
background-color: #e1ddd9;
font-size: 12px;
text-align: center;
#inhalt {
text-align: left;
vertical-align: middle;
margin: 0px auto;
padding: 0px;
width: 550px;
background-color: #ffffff;
border: 1px dashed #564b47;

Figure 6-35

Figure 6-35. Setting a wavy top border on H1 elements

Simply by choosing the appropriate image for the job, and employingit in some creative ways, you can set up some truly astonishingappearances. And that isn't the end of what's possible.Now that we know how to keep a background image from repeating, howabout moving it around in the background?


Percentage values refer to a point on both the element and the originimage (see explanation in Section, "Percentage values" later in this chapter).

It's also possible to mix up the types of length value you use.You aren't restricted to using a single length type in a givenrule, as shown here:

H2 {margin: 14px 5em 0.1in 3ex;}  /* value variety! */

Figure 7-9 shows us, with a little extraannotation, the results of this declaration.

7.5.1. Percentage Values and Padding

As stated earlier, it's possible to set percentage values for the padding of an element. Percentages are computed in relation to the width of the parent element, so they can change if the parent element's width changes in some way. For example, assume the following, which is illustrated in Figure 7-59:

P {padding: 10%; background-color: silver;}
<DIV STYLE="width: 200px;">document, half as wide as the document's width and overwritingthe first few elements!

In addition, if the document is scrolled, the paragraph will scrollright along with it. This is because the element's containingblock is the BODY element's content area,not the viewport. If you want to position elements so thatthey're placed relative to the viewport and don't scrollalong with the rest of the document, then the next section is foryou.

The only drawback to this ability is a small one, but you're bound to run into it eventually. Suppose you want to set the top and left margins for H1 elements to be 10 pixels, and the bottom and right margins to be 20 pixels. In that case, you have to write the following:

H1 {margin: 10px 20px 20px 10px;} /* can't be any shorter */

Unfortunately, there is no way to cut down on the number of values needed in such a circumstance.