0

HTML / CSSで、サイドバー内に次のメニューを作成しようとしています。

myimage 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

upper divまたは下部のdivに設定したサイズに関係なく、コンテンツはそこで簡単に調整できます

于 2012-12-06T12:51:43.663 に答える