前回の泣きにいただいたコメントに調子のって、質問していいですか?
「ばっかじゃねーの」と思っても、優しく教えてくれると嬉しいです。
まじ、かわいそうな子になってます。気長に待ってますので、皆様どうぞよろしくお願いします。
まず、何をしたいかと言うと、コンテンツエリア(800px)の上にHTMLでリスト化したナビをボタンメニューのように横一列にぴったり並べたいのです。
HTMLとCSSを↓にコピペしましたが、教科書通りだと
#navi li {
float:left;
width:200px;
list-style-type:none;
}
と、ひとつの四角がwidth200pxなのですね。
でも、そうすると800pxのナビスペース一行に入りきらないのです。
で、色々読んでると、「widthやheightでボックスの大きさを指定した場合、余白やボーダーを含まない要素部分の大きさとして適用される」とあったので
wideth195pxにしてみたものの、↓画像のように入りきらない。
180pxくらいにして始めて入るのですが、もちろん横幅ぴったりにはならないのです。
で、そもそもボーダーを含めないなら最初の800pxというナビスペースもおかしいのかもしれない・・・とここらでお手上げ!
もしかして、すっごーく基本的な事が間違ってますか?
CSS無効にした時にできればリスト表示させたいので、この方法を取りましたが、あきらめて画像にした方が良いのでしょうかね。
↓wideth195px
↓wideth180px
HTML -------------------------------------------------------
<div id="navi">
<ul>
<li><a href="(EmptyReference!)">ホーム</a></li>
<li><a href="(EmptyReference!)">ショップ情報</a></li>
<li><a href="(EmptyReference!)">教室案内</a></li>
<li><a href="(EmptyReference!)">通信販売</a></li>
</div>
CSS -------------------------------------------------------------
/*ナビレイアウト*/
#navi {
width:800px;
margin-left:0;
padding-left:0;
border-bottom:solid 1px #ff0099;
border-top:solid 1px #ff0099;
border-right:solid 1px #ff0099;
}
#navi a{
display:block;
padding-top:5px;
padding-bottom:5px;
background-color:#ff9900;
border-left: solid 1px #ff0099;
color:#ffffff;
text-decoration:none;
text-align:center;
}
#navi li {
float:left;
width:195px;
list-style-type:none;
}
------------------------------------------------------
最近のコメント