CssZenGarden读书笔记3(064)

http://www.csszengarden.com/?cssfile=064/064.css

主要讨论一下头部图片的定位问题，使用到的图片包括：
bg2.gif

falsecreek.jpg

granville.jpg

h1.gif

seal.png

 下面是Xhtml结构：

<div id="container">
    <div id="intro">
        <div id="pageHeader">
            <h1><span>css Zen Garden</span></h1>
            <h2><span>The Beauty of CSS Design</span></h2>
        </div>
   </div>
</div>
<div id="extraDiv1"><span></span></div>
<div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div>

如何将这些图片组装起来？
这些图片分别应用在那个html元素上？
#pageHeade中没有足够的元素，所以还需要使用额外的#extraDiv1，#extraDiv2，#extraDiv3
作者将bg2.gif应用在好h1上，将csszengarden文字(h1.gif)应用在h2上.

#container {
    width: 770px;
    margin: 0 auto;
    border-left: double 3px #332511;
    border-right: double 3px #332511;
    position: relative;
}    
 
h1 {
    width: 770px;
    height: 166px;
    margin: 0;
    background: #000 url(images/bg2.gif) no-repeat
    top left;
    margin: 0;    
   text-indent: -2000px;

}
    
h2 {
    width: 244px;
    height: 42px;
    background: #000 url(images/h1.gif) no-repeat
    top left;
    margin: 0;
    text-indent: -2000px;
    position: absolute;
    top: 120px;
    margin-left: 495px;
}   

哼哼，到正题了，关键的问题是剩下的三个图片如何定位的问题。注意，整个页面(#container）居中显示（即随着
窗口的大小变化内容会移动位置，这意味着不能相对于body定位）。#extraDiv1，#extraDiv2，#extraDiv3又在
#container外（这意味着不能相对于#container定位），如何定位这些元素就是个大问题。问题的症结在于页面是
居中的，故如果能让这些元素居中，再做适当的调整，问题就解决了。
如何使绝对定位的元素居中，作者创造性使用了这样的方法：将父元素定位于页面的左边，并将其宽度设为100%（即
该父元素的父元素的宽度，这里是body）。然后让设置子元素居中（这里是span）,代码如下（作者的代码考虑了浏览器
缺陷，比较复杂，简单的代码如下）：

#extraDiv1 {
    position: absolute;
    top: 41px;
    left: 0;
    width: 100%;
}  
#extraDiv1 span {
    background: url(images/granville.jpg) no-repeat
    top left;
    display: block;
    margin: 0 auto;
    height: 123px;
    width: 770px;
}   

#extraDiv2 {
    position: absolute;
    top: 41px;
    left: 0;
    width: 100%;
}   
#extraDiv2 span {
    background: url(images/falsecreek.jpg) no-repeat 
    top right;
    display: block;
    margin: 0 auto;
    height: 70px;
    width: 770px;
}  
 
#extraDiv3 {
    position: absolute;
    top:  0;
    left: 0;
    width: 100%;
}
#extraDiv3 span {
    background: url(images/seal.png) no-repeat
    top right;
    display: block;
    margin: 0 auto;
    width: 770px;
    height: 94px;     
}