• 解決済 zen73

    (@zen73)


    下のようにしてみたのですが,うまくいきません。

    PHP

    <div class=”btn_s”>>>詳細はコチラ</div>

    CSS

    .btn_s {
    text-align: right;
    padding: 5px;
    clear: both;
    }
    .btn_s a {
    background:url(img/btnnext.jpg) no-repeat right 0;
    display:block;
    height:0;
    overflow:hidden;
    padding-top:20px;//画像の縦幅
    width:85px;//画像の横幅}
    }
    .btn_s a:hover {
    background:url(img/btnnext_ov.jpg);
    }
    ロールオーバーを可能にする方法をお教え願います。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • zen73さん、こんにちは。

    上記の質問ですとHTMLとCSSの知識があれば充分ですのでWordPressとはほぼ関係ないと思いますが、一応お答えします。

    先ず、zen73さんが貼り付けられてるコードですが構文ミスが多数あるため当然正しく動作しません。

    no-repeat right 0;

    上記の部分ですが、全角スペースが入っていますね。正しくは半角スペースです。

    //画像の縦幅
    //画像の横幅

    次に上記の部分ですが、このコードは実際も書かれているのでしょうか?
    CSSのコメントは/* */で囲む形になっております。
    こんな風に書いてしまっては動くものも動きません。

    width:85px;//画像の横幅}

    そしてこの部分ですが、コメントアウトの方法も間違っていますが加えて } が一つ余分です。

    どれも基本的なミスです。ツッコみどころとしてはいろいろあるのですが、CSSの指摘についてはこの辺にして置きます。

    これからは出来れば何が間違っているのか、もっとご自分で検証されてから投稿して下さい。
    最低限CSSの文法チェックくらい行なって下さい。
    W3C CSS 検証サービス

    動かない、分かりません、教えて下さい、と言う前に出来ることがある筈です。

    今までの投稿も拝見しましたが、先ずはHTMLとCSSの基礎部分をご自分で勉強されることをお勧めします。

    トピック投稿者 zen73

    (@zen73)

    Tsuyoshiさん,ありがとうございました。初心者とはいえ,あまりにも情けない間違いを見過ごしていましたこと,恥じ入るばかりです。
    ご指摘いただきましたことをチェックして実行してみましたところ,ロールオーバーはできたのですが,jdbbさんに教えたいただいた ’right 0′ が効かなくなってしまいました。
    教えていただいたすぐ後に試したときは,きちんと右寄せができて喜んでいたのですが,今回はなぜ右寄せができないのか,私にとっては全くの謎としか思えなく,サイト作成の意欲も萎えてしまいがちです。
    ブラウザのキャッシュなどを削除してみてからの表示をたしかめてみたのですが,変わりありませんでした。
    となると,下のコードの不備をみつけるしかありませんが,あまりにも力不足で点検の足ががりさえ持ちあわておりません。せっかくやり始めたことですから,なんとか解決したいのですが…。
    .btn_s {
    text-align: right;
    padding: 5px;
    clear: both;
    }
    .btn_s a {
    background:url(img/btnnext.jpg) no-repeat right 0;
    display:block;
    height:0;
    overflow:hidden;
    padding-top:20px; /*画像の縦幅*/
    width:85px; /*画像の横幅*/
    }

    .btn_s a:hover {
    background:url(img/btnnext_ov.jpg); /* no-repeat right 0; */

    zen73さん、乗りかかった船ですので一応最後に答えておきます。

    先ず

    text-align: right;

    という指定ですが、通常テキストを右寄せで表示する場合に使用します。

    教えていただいたすぐ後に試したときは,きちんと右寄せができて喜んでいたのですが,今回はなぜ右寄せができないのか,私にとっては全くの謎としか思えなく,サイト作成の意欲も萎えてしまいがちです。

    きちんと右寄せが出来たコードが出来たコードがどれかは分かりませんが、それは画像が表示された状態で右寄せされたのでしょうか?

    予想ですが、先程zen73さんが書かれたコードではコメントの方法が間違っていたため

    width:85px;

    の指定が効いておらず、.btn_s aの幅が親要素の100%とみなされて右側に表示されてただけではありませんか?

    HTMLの要素にはインライン要素とブロック要素というものがあります。
    通常ブロック要素は左寄せで表示されtext-alignでは右寄せになりません。
    85pxと横幅を指定しているので背景画像の横幅が85pxとしたら左側に表示されるのは当然です。
    ブロック要素を右側に持って行きたい場合は、floatやpositionを使うと良いでしょう。

    後は先程書きました通り、ご自分で基礎から勉強されて下さい。
    謎などという言葉で片付けず、きちんと基礎を学んで下さい。
    WordPressでサイトを作成するとなるとPHPの知識はケースババイケースですが、HTMLとCSSの基礎知識は必須です。

    これ以上の回答はもうしません。
    WordPressとも特に関係ありませんので、この投稿は閉じるようお願い致します。
    次からの投稿は気をつけて下さいね。

    トピック投稿者 zen73

    (@zen73)

    Thuyoshiさん,ありがとうございました。

    投稿を削除しようとしましたが,その方法がわかりません。

    この投稿を削除できるのはこのフォーラムの管理者というようなことが英文で書かれていました。

    削除をお願いします。

    取り敢えず解決済みにして頂いたようなので、それで大丈夫かと思います。

    それでは、頑張って下さいね。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「リンク文字を代替した画像をロールオーバーさせる方法?」には新たに返信することはできません。