CSSについて教えてください。下記のサイトに横長メニューバーがあります(一番上のメニュバー)。

http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

Item1~Item4まであります。やりたい事は、

●各項目毎の長さを自分で調整したい。例えばItem1は50pix、Folder0は30pixにするなど。
●各項目毎の背景色を特定の色にしたい。例えば、Folder1の背景色を赤、item4の背景色を緑にするなど。
●特定の項目の場所を指定したい。例えば、1000pixのTableのTDにメニューバーが入っていたとします。「Item1,Folder0,Folder1,Item3,Folder2,Item4」と並んでいますが、Item4だけ一番右に表示したいと思っています。「Item1,Folder0,Folder1,Item3,Folder2, スペース Item4」といったようにItem4だけ一番右側にもっていきたいです。

上記を実現できるような方法をお教えください。1名様に300ポイント差し上げます。

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2010/09/17 01:07:34
  • 終了:2010/09/24 01:10:03

回答(3件)

id:mijusawa No.1

mijuswa回答回数36ベストアンサー獲得回数32010/09/17 02:41:54

ポイント60pt

こんなもので宜しければ、、、


/* CSS */

/* item1の幅 */

.ddsmoothmenu ul li.item1{

width:100px;

}

/* folder1の背景色 */

.ddsmoothmenu ul li.folder1 a{

background:#f00;

}

/* item4を右寄せ */

.ddsmoothmenu ul li.item4{

float:right;

}

セレクタの指定はもっとスマートに出来るかもしれません。。。

http://q.hatena.ne.jp

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 slowdancing 2 1 1 2010-09-17 16:48:59
2 akumasyougun666 94 9 0 2010-09-18 01:10:19
  • id:mijusawa
    以下で確認しました

    <table width="100%" id="maintable" border="0" cellSpacing="0" cellPadding="0">
    <tbody>
    <tr >
    <td id="leftbar" vAlign="top">165px</td>
    <td id="spacertd">10px</td>
    <td id="contentarea" vAlign="top">
    <div class="ddsmoothmenu" id="smoothmenu1">
    <ul>
    <li class="item1"><a href="http://www.dynamicdrive.com">Item1</a>
    <li style="z-index: 100;" class="folder1"><a class="" style="padding-right: 23px;" href="#">Folder1</a>
    <li style="z-index: 99;"><a class="" style="padding-right: 23px;" href="#">Folder2</a>
    <li><a href="#">Item3</a>
    <li style="z-index: 98;"><a class="" style="padding-right: 23px;" href="#">Folder3</a>
    <li style="z-index: 99;" class="item4"><a class="" style="padding-right: 23px;" href="#">Item4</a>
    </ul>
    <br style="clear: left;"/>
    </div>
    <p/>
    <p align="left">文字列 - Feb 2nd, 10" (v1.4): Adds ability to specify delay before sub menus appear and disappear, respectively. Only .js file changed.</p>
    </td>
    </tr>
    </tbody>
    </table>
  • id:mkonomi
    質問内容とは関係ありませんが、ちょっと失礼します・・・
    id:akumasyougun666は不適切な回答を繰り返しているようですので、オープンしなくてもいいと思います。
     
    http://q.hatena.ne.jp/akumasyougun666/answerlist で約80件確認
     
    ページ右上の「設定」メニューから「回答拒否ユーザー」に設定する事で、今後このユーザーからの回答を拒否する事ができます。(※知っているかもしれませんが・・・)
    http://hatenaquestion.g.hatena.ne.jp/keyword/%E5%A5%BD%E3%81%BE%E3%81%97%E3%81%8F%E3%81%AA%E3%81%84%E5%9B%9E%E7%AD%94%E8%80%85%E3%82%92%E6%8B%92%E5%90%A6%E3%81%99%E3%82%8B
     
    ※上記の設定をしていただけますと、「他ユーザーの設定による回答拒否」を設定している質問者が、今後このユーザーによる被害を受けなくて済みます。
     
  • id:akaired
    mijusawaさん
    ご回答ありがとうございます!大変助かりました!!

    mkonomiさん
    ご丁寧にありがとうございます!さっそく他ユーザーの設定による回答拒否をしました!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません