window


この質問記事は解決しています。
トップページ > 記事閲覧
*ヘッダーとメニューバーの幅の違い
日時： 2009/05/17 06:40
識別： ID:jZBaPGySkok0
名前： しん
ヘッダーの下にメニューバーをおいています。
メニューバーは5項目あり、各項目幅151px。
右側に1pxのボーダーを入れています。
最後の項目の右側のボーダーは"なし"にしています。

(151 x 5) + 4 = 759

この幅に合わせてヘッダー（全体幅）を759pxに設定しているのですが、幅が合いません。（メニューバーが少し短くなってしまいます）


ちなみに各項目の幅を152にすると全体の幅は760でも大丈夫のようです。
ブラウザーで確認するとピッタリ来ています。
ただ『ページ編集』ではズレが生じています。

メニューバーは箇条書きを回り込みで横一列にしています。
↓参考として
<html>
<ul id="menu">
<li><a href="toppage">トップページ</a>
<li><a href="konnichiha">こんにちは</a>
<li><a href="ohayou">おはよう</a>
<li><a href="konnbnwa">こんばんは</a>
<li class="menulast"><a href="odaijini">お大事に</a>
</ul>

<css>
div#container{
width : 759px;
}

ul#menu li{
list-style-type : none;
float : left;
}
ul#menu{
padding-left : 0px;
margin-left : 0px;
font-size : 0.75em;
background-color : #0071e1;
height : 30px;
margin-top : 0px;
margin-bottom : 30px;
}
ul#menu li a{display : block;
line-height : 30px;
color : white;
text-decoration : none;
text-align : center;
width : 151px;
background-color : #003a75;
border-right-width : 1px;
border-right-style : solid;
border-right-color : white;
}
ul#menu li a:hover{
background-color : #0071e1;
}
ul#menu li.menulast a{
border-right-style : none;
}



なぜ759pxの幅では合わないのかなやんでおります。
どなたかアドバイスよろしくお願いします。

ホームページビルダー13を使用しています。
メンテ

Re: ヘッダーとメニューバーの幅の違い ( No.1 )
日時： 2009/05/18 15:46
名前： Ｂｐ

ここはマルチポスト禁止。
https://aimix.jp/bbsnote.html
複数の掲示板へ同一内容を投稿する行為（マルチポスト）は回答者の方へ失礼になると考えておりますので禁止です。
別の掲示板又は当掲示板へ投稿する際に同じ内容を投稿する場合、必ず片方へ理由を説明し終了させて下さい。

ttp://oshiete1.goo.ne.jp/qa4965937.html
ttp://hpb.cool.ne.jp/wforum/wforum.cgi?no=11373&reno=no&oya=11373&mode=msgview&page=0
メンテ
Re: ヘッダーとメニューバーの幅の違い ( No.2 )
日時： 2009/05/18 19:01
名前： しん

大変失礼しました。

サイトをアップしてしまい、どうしても早く解決したかったので各方面へ質問を掲載していまいました。

管理人様削除が可能のようでしたらこちらの質問を削除していただきたいのですが。
メンテ
- ( No.3 )
日時： 2011/12/10 06:55
名前： pl517.nas821.p-osaka.nttpc.ne.jp

#SPAM

メンテ

　返信フォーム　（上記スレッドに返信する場合は以下のフォームから投稿します）
題名 ※必須 スレッドをトップへソート
名前
E-Mail
URL
パスワード 記事メンテ時に使用します （メンテは該当記事のメンテアイコンをクリック）
返信内容
※必須
エラーメッセージや内容などは省略せず詳細にご記入下さい
状態の設定

・問題が解決したら 解決 を選択して投稿して下さい HELP(新しいウィンドウが開きます)
・既存記事の状態設定はメンテ（メンテアイコン）から修正する事ができます。


投稿内容をご確認下さい（記事の削除は出来ません）

   クッキー保存