CSS メニューを作っちゃおう（動画はドコ？）3
すみません
だいぶ飛ばしてしまいました・・・・
でも、やり方は前のペタぼたん
と同じなんです
一応復習・・・・
CSS メニューを作っちゃおう（動画はドコ？）
CSS メニューを作っちゃおう（動画はドコ？）2
前回のジェネレーターを使って吐き出されたHTMLはフリースペース、フリープラグインなどに貼り付けましたか？
ちなみにHTML
<div id="navcontainer">
<ul id="navlist">
<li><a href=" http://ameblo.jp/exlink/ ">ホーム</a></li>
<li><a href=" http://profile.ameba.jp/exlink/ ">ルーム</a></li>
<li><a href=" http://photo.ameba.jp/user/exlink/ ">フォト</a></li>
<li><a href=" http://vision.ameba.jp/search/user.do?user=exlink ">動 画</a></li>
<li><a href=" http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=exlink " target="_blank" >メッセージ</a></li>
</ul>
</div>
次はCSSです・・・・
これは少し付け加える部分があります
#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}
#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}
↑ココまでが吐き出されたCSSです
それに↓下を追加します・・・・
#frame {
position: relative;
}
#freespace #navcontainer{
position: absolute;
width:300px;
top:0px;
left:0px;
z-index: 100;
}
・・・・あれっ
どこかで見ましたよね
そうです前回にやった ペタボタンのCSSの最初の部分です
と、言うことは・・・・
設置方法はペタぼたんとまったく同じです
一つだけ・・・・
width:300px;
これ適当な幅を入れています・・・
キチントしたい方はメニューの幅を計算してください・・・
私みたいに適当な人は適当な数字でかまいません
コレを入れておかないと
フリースペースとかにHTMLを書いていますから・・・
サイドバーの幅で折り返されてしまいます
なので長めの幅を持たせておきます
それでも短ければメニューが途中で折り返されるだけですから
そうなった場合はもう少し数字を増やして長くすればいいだけです
テキトウ・・・・です
前のペタぼたんを設置してある場合は
#frame {
position: relative;
}
この部分ははすでに書かれていますので付け加える必要はありません
後は前回同様に
top:0px; left:0px;
で設置してから様子を見ながら好みの位置に移動させるだけです
今回は左側の置くと想定して left:0px; としていますが
右に近ければ前回のように right:0px; でやってください
CSS メニューを作っちゃおう（動画はドコ？）
CSS メニューを作っちゃおう（動画はドコ？）2
CSS メニューを作っちゃおう 4
CSS
メニューを作っちゃおう5（横メニュー1）
CSS メニューを作っちゃおう6（横メニュー2）
CSS メニューを作っちゃおう7 画像の置き換え