HTML and CSS Reference
In-Depth Information
Figure 6.8
The paragraph is
configured using
absolute positioning
of the <div> is set to 300 pixels. Again, padding and background-color are used to
configure the heading element. The CSS follows:
#content { position: absolute;
left: 200px;
top: 100px;
font-family: Arial,sans-serif;
width: 300px;
h1 { background-color: #cccccc;
padding: 5px;
color: #000000;
The XHTML source code follows:
<h1>Absolute Positioning</h1>
<div id="content">
<p>This paragraph is contained in a div which uses CSS absolute
positioning to be placed 200 pixels in from the left and 100 pixels
down from the top of the browser window. A width of 300 pixels is
also configured.</p>
When working with absolute positioning it is important to be aware that elements not
absolutely positioned will be rendered following normal flow by the browser. Elements
that are absolutely positioned are rendered outside of normal flow. You'll explore this
behavior in the next Hands-On Practice.
Figure 6.9 shows screenshots of two Web pages with similar XHTML content. The Web
page in the upper screenshot does not have any CSS applied. The Web page in the lower
screenshot uses CSS to configure text, color, and the absolute position of a paragraph
element. Launch a text editor and open the Chapter6/starter2.html found in the student
files. When a browser renders the page it will use normal flow and display the XHTML
elements in the same order as they are coded: <h1> , <div> , <p> , and <ul> . Launch a
browser and display the page to verify.
Search WWH ::

Custom Search