0

我正在尝试在侧边栏中的 HTML/CSS 中创建以下菜单：

我的图片 http://img1.firenex.net/9Z0eupHnvV7LIPQd950r.png

每个按钮都有自己对应的按下/未按下图像，当悬停时，它的不透明度通过 CSS 从 0.8 移动到 1.0。

问题是我得到的是：

myimage2 http://img1.firenex.net/nooUcfe0HvvfMaCmz6N8.png

不是我预期的结果:)

这是我的 HTML：

    <div id="homepageBtn"></div>
    <div id="progressiBtn"></div>
    <div id="interessiBtn"></div>
    <div id="friendzoneBtn"></div>
    <div id="emailBtn"></div>

这是我的 CSS：

#homepageBtn {
    background:url(img/buttons/homepage_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 30px;
    float: left;
}

#homepageBtn:hover {
    background:url(img/buttons/homepage_btn.png) no-repeat;
    opacity: 1.0;
}

#homepageBtn:active {
    background:url(img/buttons/homepage_btn_pressed.png) bottom right no-repeat;
}

#progressiBtn {
    background:url(img/buttons/progressi_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 10px;
    float: left;
}

#progressiBtn:hover {
    background:url(img/buttons/progressi_btn.png) no-repeat;
    opacity: 1.0;
}

#progressiBtn:active {
    background:url(img/buttons/progressi_btn_pressed.png) bottom right no-repeat;
}

#interessiBtn {
    background:url(img/buttons/interessi_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 30px;
    margin-top: 10px;
    clear: left;
    float: left;
}

#interessiBtn:hover {
    background:url(img/buttons/interessi_btn.png) no-repeat;
    opacity: 1.0;
}

#interessiBtn:active {
    background:url(img/buttons/interessi_btn_pressed.png) bottom right no-repeat;
}

#friendzoneBtn {
    background:url(img/buttons/friendzone_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 10px;
    margin-top: 10px;
    float: left;
}

#friendzoneBtn:hover {
    background:url(img/buttons/friendzone_btn.png) no-repeat;
    opacity: 1.0;
}

#friendzoneBtn:active {
    background:url(img/buttons/friendzone_btn_pressed.png) bottom right no-repeat;
}

#emailBtn {
    background:url(img/buttons/email_btn.png) no-repeat;
    opacity: 0.8;
    width: 188px;
    height: 29px;
    margin-left: 30px;
    margin-top: 10px;
    clear: left;
}

#emailBtn:hover {
    background:url(img/buttons/email_btn.png) no-repeat;
    opacity: 1.0;
}

#emailBtn:active {
    background:url(img/buttons/email_btn_pressed.png) bottom right no-repeat;
}

我真的不知道我是否使用了正确的方法来做到这一点，我将不胜感激此时的任何解决方案......在此先感谢。

PS：Chrome会发生这种情况，例如IE我可以正确显示

4

2 回答 2

1

您错误地使用了 clear 属性。您可以使用此代码。

<div id="homepageBtn"></div>
<div id="progressiBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="interessiBtn"></div>
<div id="friendzoneBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="emailBtn"></div>​

并从以下 CSS 中删除 Clear:left

#interessiBtn {
    background:url(img/buttons/interessi_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 30px;
    margin-top: 10px;
    clear: left;            <-- Remove this
    float: left;
}

演示代码

于 2012-12-06T13:18:34.783 回答
0

margin-top:.. 或 padding top 但更好的解决方案是进行以下修改，

添加一个新的并这样做 

  <div id="upper">//further divide it in two parts 
  <div id="homepageBtn"></div>//here goes homepage button 
  <div id="progressiBtn"></div>
  </div >  //end of  upper

并为底部 Div 做同样的事情

  <div id="bottom">//further divide it in two parts 
  <div id="friendzoneBtn"></div>
  <div id="emailBtn"></div>
  </div >  // end of bottom

而不是您为 div 或底部 div 设置的任何尺寸，upper 您的内容将在那里轻松调整

于 2012-12-06T12:51:43.663 回答