Question

所以，我要结婚了。万岁！

我正在为活动建立一个网站，HTML / CSS不是我常用的专业领域。

我已将网站切成薄片并切成小块，大部分重要结构都以div为单位。

我不确定的一件事是，设计要求图像溢出包装的两边。在HTML / CSS中最好的方法是什么？或者我应该将包装器的宽度设置为整个图像宽度，并为其他内容制作另一个容器吗？

感谢您的帮助！

这是设计补偿： website_comp.jpg
这是需要溢出的图像 div：ribbon.png
这是什么的网站现在看起来像： DierksAndEmster.com

Answer 1

为position:relative添加overflow:visible和#container。然后修改菜单，如下所示：

#menu {
    background: url("http://www.dierksandemster.com/wp/wp-content/themes/et-starter-1-4/images/ribbon.png") repeat scroll 0 0 transparent;
    color: black;
    display: block;
    float: left;
    font-family: 'Walter Turncoat',arial,serif;
    font-size: 20px;
    height: 93px;
    left: -71px;
    line-height: 22px;
    position: absolute;
    width: 942px;
}

Answer 2

您可以尝试使用position：absolute定位图像。另一种方法可能是使用三列。（左侧列约50px，主区域，右侧列宽约50px）。

您还可以看看csswizardry是如何做到这一点的，但它有点高级，但可能会有所帮助：http://csswizardry.com/demos/css-powered-ribbons/

最后但并非最不重要的一点，如果你不想快速并且知道导航面板上有花哨的丝带永远不会改变的地方，为什么不只是制作一个大背景图像并在其上构建网站？：）

如何让图像溢出div的边缘

2 个答案: