当窗口尺寸是较小的元素相互重叠？

Question

我设计了一个网站，现在有点难过。

如果您在以下位置查看网站：

http://www.noxinnovations.com/portfolio/charidimos/

如果更改窗口大小，您会注意到导航与徽标/标题重叠。

无论如何改变这个？我想做的几乎就是让窗口出现滚动条，如果可能的话。

有什么想法吗？

谢谢:-D。

Answer 1

你的width: 100%;元素中的#header导致了您的奇怪溢出行为。将您的#logo和#navigation元素放在另一个div内，其高度和宽度固定在#header内，然后将#header属性overflow: hidden; {1}}那应该可以解决你的问题。

Answer 2

如果您希望导航不重叠，可以执行以下操作

#navigation {
width: 500px;
height: 100px;
padding-top: 52px;
position: fixed;    // CHANGE FROM RELATIVE TO FIXED
left: 770px;        // ADD THIS BIT OF POSITIONING (ADJUST AS NECESSARY)
float: right;       //REMOVE THIS FLOAT
text-align: center;
vertical-align: middle;

}