Tuesday 09th of February 2010 03:18:21 AM
MENU
#left {
position: absolute;
left: 0px;
width: 190px;
color: #564b47;
margin: 0px;
Let's consider another example, illustrated in Figure 8-20, where the left margin is set to be negative:
DIV {width: 400px; border: 1px solid black;}P.wide {margin-left: -50px; width: auto; margin-right: 10px;border: 3px solid gray;}
Figure 8-20. Setting a negative left margin
In this case, not only does the paragraph spill beyond the borders ofthe DIV, but also beyond the edge of the browserwindow itself!
padding: 0px;
}
This column inherited it'b background color from the body definition.
The padding ist defined through the p element.
CONTENT
3 columns / menu fixed, content dynamic with head and footer.
3 column layout grid. The navigation column are fixed in width, the content column is dynamic and adjusts
itself to the browser window.
This layout also works with an absolute height template 100% height
more nice and free css templates
html {
padding:0px;
margin:0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
#content {
margin: 0px 190px 0px 190px;
border-left: 2px solid #564b47;
border-right: 2px solid #564b47;
padding: 0px;
background-color: #ffffff;
}
8.3.2.1. Negative margins
As was discussed in the previous chapter,
JPEG's, which appear quickly at coarse resolution and gradually sharpen,
or you can referrence a small, low-resolution version of your image in
the <IMG> tag, e.g. <IMG WIDTH=200 HEIGHT=150 SRC="hi_res.gif"
LOWSRC="low_res.gif">
Another option is to include a small "thumbnail" version of the
image on your page that links to the full-sized version. Then
your visitors can decide for themselves whether to view or skip the full-sized
version. By default, a linked image has a 2-pixel-wide blue border,
but you can use IMG tag's BORDER attribute to
eliminate this (BORDER=0). ordered and
unordered
list items. Thus, you might be able to set an ordered list to use
discs instead of numbers. In fact, the default value of
list-style-type is disc, so you
might theorize that without explicit declarations to the contrary,
all lists (ordered or unordered) will use discs as the bullet for
each item. In fact, that's up to the user agent to decide. Even
if the user agent doesn't have a predefined rule such as
OL {list-style-type:font-weight: bold;}
P {margin-left: 5em; position: relative;}
<P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN>
laoreet dolore magna aliquam erat volutpat.</P>
While this does rely on inserting an extra element, the advantage is
that the SPAN can be placed anywhere in the
paragraph and still have the result depicted in Figure 9-21.
Figure 9-21. Setting a "change bar" with absolute positioning