Question

我正在尝试复制以下网站上的外观：http://lousrestaurant.net/

你会看到徽标的底部溢出到菜单栏上（WP中的一个单独的div）。标题徽标和菜单栏都是一个图像。 WP生成菜单文本格式，因此只需担心背景图像。

我使用标题图片底部的菜单栏（实心条带）对自己的标题图片进行了Photoshop处理，但无法将其溢出到导航条div上。

使用这个，我已经部分成功了：

#branding img
{
clear: both;
display: block;
background-image:url('myimage.png');
background-size: 940px 185px;
background-repeat: no-repeat;
position: absolute;
}

但这很古怪，原因有两个：

然后需要设置主页面容器的位置，因为它上面有position:absolute。
有些浏览器认为没有标题图像，因为我将上面的CSS插入style.css，并且不使用WP的“非常有帮助”的标题图片上传器。

我有多年的HTML和CSS经验，但我对WordPress很陌生，我想我会挂在那里。

Answer 1

如果你看看他们的代码，基本上是

<div id="header">
    <a href="/"></a>
    <div id="nav"></div>
</div>

他们将背景图片应用到#header，然后让a占用该空间可点击，这样他们就不会溢出div，图像是背景图片包裹元素。看起来你正在添加一个元素来溢出它，当你在层次结构中升级时不需要溢出。

将CSS Div溢出到相邻容器中（WordPress创作）

1 个答案: