Question

所以我正在尝试为我的新投资组合网站编写我的设计，但我在那里遇到一些问题，研究和粉碎我的电脑屏幕的时间尚未解决。现在有两大问题我坚持下去，尽管还有另一个我正在考虑的问题，如果我甚至想要处理的话。

第一个问题是菜单。当您将鼠标悬停在该字体上时，或者当您在该页面上时，我希望字体从常规变为粗体。哪个有效。问题是当你将鼠标悬停在菜单上时，菜单中的其他两个项目会略微调整，因为类型重量的变化会将它们推出。到目前为止，我的尝试都以失败告终。

第二个问题是页脚。我希望它留在页面底部。我的研究得到了这么远，但不是我想要的，现在它实际上停留在浏览器的底部，而不是内容的底部。感谢您提供任何帮助！

相关页面位于：http://personal.justgooddesign.net/draft/

Answer 1

试试这个来解决页脚问题？

<p style = "clear:both">
<div id="footer">

另外

#right {
    clear: right;
    float: right;
    height: 600px; //Remove this line
    width: 490px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 0px;
}

Answer 2

你的页脚变得混乱，因为你向左漂浮并向右清除。我个人对页脚的偏好总是starts with this very clean method并从那里开始构建。如果您感到困惑，请将内部内容与页面的其余部分分开并进行测试。

对于字体，您必须更像是UI开发人员而不是图形设计师。与Indesign，Illustrator等不同，字体和间距不是100％像素完美。在一个浏览器中呈现单向的内容将在另一个浏览器中呈现完全不同的方式。在网络上加粗字体会使其变大，并且会推动间距。为了弥补这一点，设置你的菜单元素有点宽，以补偿，然后测试疯了。如果你完全依赖于边距和填充，那么每次都会使用粗体悬停元素来推动菜单。

只是一个建议，将您的css设置在一个单独的文件中并加载它。代码将被缓存，这将导致后续加载的性能提升。此外，您可以通过执行一个类来为自己的元素添加样式并相对于其他元素进行有意识的定位，从而为自己节省大量代码。没有必要为您的投资组合中的每个元素单独设置风格以进行定位。

Answer 3

您可以通过在#menu li上设置固定宽度来修复菜单中的跳转，所以

#menu li {
display: block;
float: right;
width: 40px;   //something like this.
padding: 0px;
list-style-type: none;
position: relative;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}

修改

修复页脚问题

从height: 600px;规则
中删除#right

在br和#container div之间添加结算#footer div

</div> <br style="clear:both;"> <div id="footer">

Answer 4

你有浮动问题，因为你没有清理花车。

你的div＃wrapper总是等于视口的高度。
您的div＃容器已折叠因为您已将div＃left移至“left”，div＃right移至“right”并且还具有绝对定位div＃footer。这样做的是，它从文档的正常流程中获取这些div，然后div＃contaiver不会“围绕”这三个div（div＃left，div＃right和div #fotter“）
div＃right的情况也是如此。 div #intro和div＃portfolio已经在div＃右侧浮动，并没有包装它的子div。

围绕这些问题的方法很多。我建议这个。在最后一个浮动元素之后包含以下代码。

<div class="float_clear"></div>

div.float_clear
{
clear: both;
}

对于菜单，空间不足，只需添加。

div#menu>ul>li
{
width: 50px;
}

Answer 5

添加溢出：隐藏到容器......

每当你有浮动的东西时，在浮动内容周围放一个div并给它

溢出：隐藏; 显示：块; width :(某个宽度）;

这将解决大多数浮动问题

CSS布局问题（页脚和UL样式）

5 个答案: