如何防止文本落后于图像

时间:2014-01-31 17:00:21

标签: html css image floating

我正在尝试让我的顶栏导航不要在我页面标题上的徽标图片后面。在我的屏幕中最大化页面时,请参见下面的页面示例:

Maximized View

以下是浏览器窗口缩小时的样子:

Smalller Screen Example

我正在尝试修复此页面,以便当窗口变小时当前在图像后面运行的顶部导航栏将移动并向右延伸。

有什么想法吗?该网站是Inhishands.com

谢谢!

3 个答案:

答案 0 :(得分:2)

您的问题是菜单(<ul id="display">)具有CSS属性float:right,因此它将始终相对于屏幕右侧定位。当屏幕变小时,右侧靠近左侧,因此菜单也向左移动(并与徽标重叠)。

如果你想要的是菜单始终从徽标的右侧开始(而不是重叠),那么你可以给它属性float:left并在其左侧添加一个边距(比如margin-left:370px)。还有其他方法可以定位它(比如使用绝对定位),但这可以完成工作。

答案 1 :(得分:0)

在导航上使用Z-index。在CSS中,将手形图像的z-index设置为低于导航的z-index,您将看到顶部而不是后面的导航。

以下是Z-Index的一些信息,以备不时之需:http://www.w3schools.com/cssref/pr_pos_z-index.asp

答案 2 :(得分:0)

漂亮的设计。

首先,您需要修复CSS中顶级菜单HEADER的最小宽度。 根据您需要的分辨率修复标题最小宽度:

#Header{
min-width: 1237px;
}

或直接进入HTML

<div id="Header" style="min-width: 1237px">