有一个图像突出页脚

我正在为一个类的项目工作，并有一个问题。有一个图像突出页脚

该网站可以在这里找到：http://ispace.ci.fsu.edu/~seb10/cgs2821/proj10

我现在已经是我对定位使用HTML和一个div联样式底部的股利。

现在看起来不错，但当然这取决于正在使用的浏览器。

我希望该图像始终显示在底部而不必使用内联样式。本质上，我希望它能够突出页脚，但不会有任何其他影响或移动。

如果可能的话，这样做的过程是什么？

下面是CSS的一个链接：http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/style.css

非常感谢您的帮助提前。

来源

2013-04-22 Sam

关键是放置图像的位置绝对。我已将桅杆插图移至页脚：http://jsfiddle.net/David_Knowles/98PLA/
这是否解决您的问题？

#footer .container {overflow: visible;} /* use a different technique to wrap floated elements so you can place image in the footer and have it stick out - see underneath */ 
.fltright {position: absolute; bottom: 56px; right: 0;} 

/* For modern browsers */ 
.container:before, 
.container:after { 
    content:""; 
    display:table; 
} 
.container:after { 
    clear:both; 
} 
/* For IE 6-7 (trigger hasLayout) */ 
.container { 
    zoom:1; 
} 

    <div id="footer"> 
     <!-- Begin Container --> 
      <div class="container"> 
       <img class="fltright" src='http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/images/derrick.png' alt="derrick" width="300"/> 
       <h1>Copyright &copy; 2013 <br />All Rights Reserved</h1> 
       <h3><a href="mailto:[email protected]">Webmaster</a> |<a href="#">Site Map</a> | <a href="about.html">About</a></h3> 
      </div> 
      <!-- End Container --> 
    </div> 
    <!-- End Footer -->

来源

2013-04-22 18:45:43 Timidfriendly

This works great。然而，我遇到了一个问题，那就是我的个人图片在关于页面现在被抬起并推到标题下。另外，我并不太担心这不适用于iPad的Google Chrome浏览器，但是页脚因为更大而图片变得看不见，因为它们共享相同的颜色。任何想法为什么它不起作用？除此之外，这是有帮助的。谢谢。 – Sam 2013-04-22 19:28:19

没关系，我固定了我的关于页面...我忘了你编辑了影响该图像的.fltright。只需要使其成为.fltright2并更改HTML。这解决了它。仍然好奇iPad的Google Chrome问题...因为它在iPhone谷歌浏览器应用程序中运行正常......很奇怪。也许应用程序有问题。 – Sam 2013-04-22 19:32:33

我假设油井塔图像是要定位的图像。我会创建一个带有透明背景的.png文件，然后将其设置为.container元素的背景图像。

.png透明将允许其他背景图案通过您的矢量图像的开放空间（透明）部分显示。

只要您的页脚元素在您的容器元素之后流动，此工作正常。

来源

2013-04-22 18:15:43

使图像忽略它的父元素，可以用来定位和z-index的组合：

position: absolute; 
z-index: 2;

您也可以尝试用这取决于你想要什么的display和overflow特性玩弄它看起来像。

来源

2013-04-22 18:30:54 RandomUs1r

当我查看您的代码时，我想出了这些css值，以便在您的页面上完全对齐.sidebar。你有position: relative;来定位它，但是，它移动相对到如何大的窗户和周围的元素。这就是它可能在四处移动的原因。但是，position: absolute;不考虑周围的元素，因此将保持放置状态。

.sidebar { 
    position: absolute; 
    top: 233px; 
    right: 10px; 
}

来源

2013-04-22 18:38:20

有一个图像突出页脚

回答

相关问题