لطفا منتظر باشید ...
HTML and CSS
By
Molly E. Holzschlag...............................................
Publisher: Addison Wesley ProfessionalPub Date: April 22, 2005ISBN: 0-13-185586-7
Pages: 336
Index
Absolute Positioning: To Another Block
Returning to the earlier example in which I described a containing block for the content block, you can move on to see how an absolutely positioned block is positioned only in relation to its containing block (see Example 12-4).
Example 12-4. Absolutely positioning a block to its containing block
[View full width]
Here, the containing block main is absolutely positioned 50 pixels from the left and 20 pixels from the top. The navigation block isn't positioned at all, but it is contained within the main and, therefore, flows normally within its block. I've provided some minimal style so you can see this coming together. Finally, the content div is absolutely positioned. Watch what happens (see Figure 12-7).
<!DOCTYP176 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&l191 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
#main {
position: absolute;
left: 50px;
top: 20px;
border: 1px solid green;
}
#content {
position: absolute;
left: 100px;
top: 50px;
width: 300px;
border: 1px solid red;
background-color: #ccc;
}
ul, li, a {
list-style-type: none;
display: inline;
text-decoration: none;
}
</style>
</head>
<body>
<div id="main">
<div id="nav">
<ul>
<li><a href="hom176">Home</a></li>
<li><a href="product190">Products</a></li>
<li><a href="service190">Services</a></li>
<li><a href="abou191">About Us</a></li>
<li><a href="contac191">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>The Black Cat</h1>
<p>I married early, and was <a >happy to find</a> in mywife a disposition not uncongenial with my own. Observing my partiality for domestic pets,
</div>
</div>
</body>
</html>
Figure 12-7. Absolutely positioning the content div to its containing block.
element or the browser viewport.
