Thursday 22nd of March 2018 04:39:16 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;

BIG {font-size: 200%; line-height: 1em;}


Anything this useful has to have a drawback, right? As it happens, Internet Explorer 3.x will treat scaling factors as though they were pixel units. Just try to imagine a paragraph with a line-height of 1.5px . It isn't pretty.

Another solution is to set the styles such that lines are no taller is a common typographic convention that a block quote should beitalicized, but that any specially emphasized text within the quoteshould be upright. In order to employ this effect, shown in Figure 5-28, you would use these styles:

BLOCKQUOTE {font-style: italic;}which is the Bold face and which has a numerical weight of700. Figure 5-11 shows us thevisual result of all this.

Figure 5-11

Figure 5-11. Greater weight will usually confer visual boldness

Let's take this all one step further, and add two more rules,plus some markup, to illustrate how all this works (see Figure 5-12 for the results):

/*   assume only two faces for this example: 'Regular' and 'Bold'   */P {font-weight: 100;}   /* looks the same as 'normal' text */
forced to do things like add DIVs to represent

This assumes that you wish to create columns at all, of course. We went to a great deal of effort to get those columns, but was it really worth it? Multiple-column layouts can be very difficult to read on a monitor, since the user may be forced to scroll downward to read the first column, then back up to the top of the second, then down again. Adding the columns was an interesting theoretical exercise, but it may not be the best approach for the Web.H3 {border-bottom: 3px gray solid;}

Figure 7-47

Figure 7-47. Getting the same result in three different ways

You can also leave out some values and have their defaults kick in,like this:

Since no border color is declared, the default value (theelement's foreground) is applied instead, as we can see inFigure 7-48. Just remember that if you leave out aborder style, the default value of none willprevent your border from appearing at all.