CSS间距问题

时间：2012-07-14 22:53:48

标签： css

我有一个大图，我试图在我的内容背后。目前，图形不是放在我的内容之后，而是放在它下面，这在内容的底部和页脚之间留下了很大的差距。参考的大图是底部的水彩鸟。内容是简历文本。请记住，简历文本是一个扩展的手风琴链接。我需要帮助关闭这个空间。

http://imip.rvadv.com/index3.html

CSS：

#bottom-graphic-container {
margin:0;
padding:0;
background:#fff url(../images/bg-bottom.jpg) bottom left no-repeat;
height:313px;

}

.wrapper{
max-width:920px;
margin:25px auto 0 auto;
padding:0;
width:100%;
z-index:1;
}
.st-accordion ul li.st-open > a{
/*margin-top:70px;*/
}

.st-open:last-child .st-content {
padding-bottom: 0;
}

.st-content{
padding: 5px 0px 100px 0px;
}
.st-content p {
font-size:  14px;
font-family:  Georgia, serif;
font-style: normal;
line-height:22px;
padding: 0px 4px 15px 4px;
}

.st-accordion{
width:100%;
min-width:270px;
margin:0 auto;

}
.st-accordion ul li{
overflow: hidden;
padding:0 30px;
}
.st-accordion ul li:first-child{
overflow:visible;
list-style-type:none;
}
.st-accordion ul li:last-child{


}
.st-accordion ul li > a{
font-family: 'Trocchi', serif;
text-shadow: 1px 1px 1px #fff;
color:#688993;
line-height:44px;
font-size: 36px;
display: block;
text-decoration:none;
-webkit-transition:  color 0.2s ease-in-out;
-moz-transition:  color 0.2s ease-in-out;
-o-transition:  color 0.2s ease-in-out;
-ms-transition:  color 0.2s ease-in-out;
transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
color:#18232e;
}

HTML：

        <div class="wrapper">
           <!-- <div class="chirp">chirp</div>-->
            <div id="st-accordion" class="st-accordion">
                <ul>
                    <li>
                        <a href="#aboutme" id="chirp" class="chirp">Chirp. Would you like to know about me?<h2>Read the official birdwatcher's guide.</h2></a>
                        <div class="st-content"><p>content goes here</p>
                        </div>
                    </li>
                    <li>
                        <a href="#portfolio" id="birdseye">A bird's eye view of my endeavors<h2>and other flights of fancy, also known as my portfolio.</h2></a>
                        <div class="st-content">
                            <p>Portfolio Goes Here.</p>

                        </div>
                    </li>
                                            <li>
                        <a href="#resume" id="migration">My migration pattern<h2> and other common facts, otherwise known as my resume.</h2></a>
                        <div class="st-content"><p>content goes here</p>

                        

                </ul>
            </div>
        </div>
    </div>
    <!--bottom graphics-->

    <div id="bottom-graphic-container"></div>
    <!--Footer-->
    <div id="footer-container">
        <div id="footer-content-container">
            <div id="footer-copy">Tiffani Hollis, Creative Professional (404)931.6057 <a href="mailto:thollis@i-make-it-pretty.com"> thollis@i-make-it-pretty.com</a></div>
            <div id="signature"><img src="images/signature.png"></div>
        </div>
    </div>

2 个答案:

答案 0 :(得分：2)

我复制了您的网站本地，并且能够为您解决此问题。

参考： jsFiddle 1 （注意：由于@ font-face相同的域名订单规则，这些字体不会显示。）

解决方案用于更改 Corner Bird 的HTML订单，以便此ID名称为#bottom-graphic-container的Div将包含Accordion内容（类名为.wrapper）。

然后，对CSS进行了若干修改/配置以允许正确操作。值得注意的是，我将 页脚 和 Corner Bird Div设置为position:fixed;，因此它总是紧贴在底部。当 页脚 后面有链接或恢复文字时，预期的浏览器scrollbar开始播放。

进一步澄清： Corner Bird是“ back-layer ”，Accordion是“中间层”，页脚是“前层”。他们现在都和睦相处。的： - d

由于Corner Bird现在落后于 Accordion div，bg-background.jpg正在剪切到标题图像。解决方案是将此图像转换为 PNG with Transparency 。我使用开源 irfanview 。我也把PNG包括在内，或者你也可以自己制作。

完成所有工作后，您的网站将按照您的预期运作。在 IE8 ， Firefox 和 Chrome 中进行了测试，没有任何问题。 （旁注：在IE8中我没有测试@ font-face字体）。

以下是您的网页的屏幕截图，其中浏览器窗口调整为较小的尺寸： enter image description here

修改后的HTML： 

<!--bottom graphics--><!-- Think of this as "bottom-back-layer" since various layers are at play here. -->
<div id="bottom-graphic-container">

    <!--Footer-->
    <div id="footer-container"><!-- Think of this as "bottom-front-layer". That said, back-layer and front-layer are also 'top' and 'bottom' too (nothing overlaps). -->
        <div id="footer-content-container">
            <div id="footer-copy">
              <!-- Removed personal info -->
            </div>
            <div id="signature"><img src="images/signature.png"></div>
        </div>
    </div>

</div> <!--Closing tag for bottom graphics-->

修改后的CSS： 

.wrapper{
  width: 920px;
  max-width:920px;
  margin: 0 auto;
  padding: 0;
  margin-bottom: 65px;            /* Once the last item in Accordion menu is behind Footer, margin-bottom:65px; will provide Browser main scrollbar if hidden. */
  position: relative;             /* position:relative required with z-index below. (or absolute can be used with more CSS settings */
  z-index: 1;                     /* A z-index of 1 is used since it's higher than '#bottom-graphic-container' (0 z-index) so Accordion Links are clickable */
}

#bottom-graphic-container {
  width:100%;
  height:313px;
  background-image:url(../images/bg-bottomTrans.png);    /* Use transparent PNG image. This CSS rule has color #fff removed as well. */
  background-repeat: no-repeat;
  position: fixed;
  bottom: 94px;                                          /* The height used here is the height of 'bg-footer.png' image. */
  /* border: 1px solid red;  */                          /* Use for troubleshooting since image, even when transparent, may prevent interaction with content under it. */
}

#footer-container {
  width:100%;
  height:94px;                                           
  background-image:url(../images/bg-footer.png);
  background-repeat: repeat-x;
  position: fixed;
  bottom:0;
  z-index: 10;                                           /* A z-index of 10 will allow the footer to cover the Accordion Links. */
}

#resume-container ul li{
  list-style-type:disc;
  list-style-position:inside;
  line-height:20px;
  font-size:  14px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  padding-left:20px;
  margin-right:80px;
}                                                        /* this closing '}' was missing */

带有透明度背景图片文件的修改后的PNG：
bg-bottomTrans.png

最终更新：由于上面的jsFiddle是 一种方法 来满足这个问题，这里有一个完整的不同根据OP的要求提供方法。

参考： jsFiddle 2

底部图形和页脚是最后一个Accordion项目（简历）的一部分。注意将位于底部的项目向上移动到更靠近顶部将在大型监视器的网页底部创建空白空间（确保最大化您的浏览器）。要更改距离，请调整底部图形和页脚的CSS bottom属性，如CSS中所述。

这就是为什么上面的第一种方法将它们固定，因此无论浏览器高度如何，都能实现统一的外观。注意：Font-face具有相同的域原始策略规则，因此它们不会在jsFiddle中呈现。

要访问jsFiddle编辑页面，请从地址栏中删除/show/。

HTML和CSS面板是您的代码。

我在CSS部分中添加了注释，HTML部分更改包括：

1。 Div id="masthead-container"现在包含其他项目。
2。其他项目为：class="wrapper"，id="bottom-graphic-container"和id="footer-container
3. 在jsFiddle中查看HTML时，看到的RED标记是由于之前的标记错误造成的。组成网页后，请访问W3C Online Validation以查看错误发生的位置。示例：您有一个不应该存在的非闭合或额外div标记。

答案 1 :(得分：0)

我看到两种可能的修改来改善视觉/移除空间：

更改包装类以删除底部边距：

.wrapper {
  margin: 25px auto -50px;
  max-width: 920px;
  padding: 0;
  width: 100%;
  z-index: 1;
}

更改的行是边距1。我把-50px放在底部边缘。您可以使用该值（使其更低或更高）来更改包装器和页脚之间的空间。

您可能还想为最后一个手风琴儿童添加规则。因为他不需要额外的底部衬垫来将他与兄弟姐妹分开。

.st-open:last-child .st-content {
  padding-bottom: 0;
}

这个目标是以.st-content为父项的.st-open div，但前提是.st-parent的块是其父项的最后一个子项。因此，它仅适用于手风琴的底部，设置底部填充为0而不是100px。

相关问题
最新问题