忙しい現代人の腰&肩のお悩み対策!

リストをfoat:leftさせ横並びのメニューを作っています.下記画像の赤枠の幅に(包含されているdivのボーダーを赤線にしています)メニューをぴったり収めたいのですが,左右に余白ができてしまいます.
いろいろネット等で調べてみましたが原因がわかりません.ご教授よろしくおねがいします.
------CSSソース-----------------------------------------------------
/*グローバルナビゲーション */
.globalnavi{
width:770px;
  height:30px;
  margin:0;
  padding:0;
border:1px solid #cc0000;
}

.gloabalnavi ul{
height:30px;
margin:0;
padding:0;
background:#ffffff;
list-style:none;
}

.globalnavi li{
float:left;
margin:0;
padding:0;
}

.globalnavi span{
display:none;
}

.globalnavi a{
height:30px;
display:block;
background-repeat:no-repeat;
}

li#m1{
width:154px;
background-image:url(../image2/menu1.gif);
background-position:0px -30px;
}

li#m1 a{
background-image:url(../image2/menu1.gif);
}

li#m1 a:hover{
background-image:none;
}

li#m2{
width:154px;
background-image:url(../image2/menu2.gif);
background-position:0px -30px;
}

li#m2 a{
background-image:url(../image2/menu2.gif);
}

li#m2 a:hover{
background-image:none;
}

li#m3{
width:154px;
background-image:url(../image2/menu3.gif);
background-position:0px -30px;
}

li#m3 a{
background-image:url(../image2/menu3.gif);
}

li#m3 a:hover{
background-image:none;
}

li#m4{
width:154px;
background-image:url(../image2/menu4.gif);
background-position:0px -30px;
}

li#m4 a{
background-image:url(../image2/menu4.gif);
}

li#m4 a:hover{
background-image:none;
}

li#m5{
width:100px;
background-image:url(../image2/menu5.gif);
background-position:0px -30px;
}

li#m5 a{
background-image:url(../image2/menu5.gif);
}

li#m5 a:hover{
background-image:none;
}
------------------------------------------------------------------
-----HTML ソース--------------------------------------------------
<div class="globalnavi">
<ul>
<li id="m1" title="研究室紹介へのリンク"><a href="#"><span>大学紹介</span></a></li>
<li id="m2" title="スタッフへのリンク"><a href="#"><span>スタッフ</span></a></li>
<li id="m3" title="研究設備へのリンク"><a href="#"><span>研究設備</span></a></li>
<li id="m4" title="アーカイブへのリンク"><a href="#"><span>アーカイブ</span></a></li>
<li id="m5" title="外部リンクへのリンク"><a href="#"><span>リンク</span></a></li>
</ul>
</div><!--div globalnavi finish-->
------------------------------------------------------------------

「【CSS】float横並びメニューに余白」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (4件)

> 全体が左に寄りすぎてHPの背景からはみ出してしまいました.



補足のソースを拝見しましたが、幅830pxのmid-backの領域に対して、幅770pxのglobalnaviの領域が左右方向に均等の余白を持ってセンタリングされず、mid-backの左端に揃って描画されてしまう…という状態と解釈して宜しいですか?

その状況は、IE6/7以外のFirefox等のブラウザで起きていますよね?前者であれば親要素のmid-backの"text-align: center;"の指定が(間違って)効いてしまうので、現状のままでもglobalnaviはセンタリングされていると思いますので…

"text-align: center;"の本来の役目はテキストなどのインライン要素に対するセンタリングであり、ブロック要素(div等)の位置自体をセンタリングする性質は持っていません(IEでの結果は正しくない解釈に依るものです)。それは左右marginをautoにする事で調整できるので、下記の様に修正を加えてみて下さい。

.globalnavi{
(省略)
margin: 0 auto;
(省略)
}

こうする事で、globalnaviはwidthが770pxと決め打ちされているので、親要素のmid-backの830pxの幅から770pxを引いた残りの分(60px)が左右の余白として均等に割り振られる(左マージン30px/右マージン30pxとなります)ので、結果としてセンタリングされて表示されます。
    • good
    • 0

> スペルミスとは,恥ずかしいかぎりです



いえ、結構ある事ですので、なんかいくらやってもおかしい…と思ったら、先ずは設定したCSSのセレクタとHTMLのマークアップがちゃんと対になっているかどうかを確かめてみる、という習慣を付けると良いですよ。

> 全体が左に寄りすぎてHPの背景からはみ出してしまいました.

それは本件とは別の問題ですね。globalnaviの親要素との兼ね合いに不具合があると思われますが、その部分の情報を提供して頂かないとわかりません。

この回答への補足

globalnaviの親要素はmid-backでプロパティーは以下の様になっています.
.mid-back{

border:1px solid #cc0000;

width:830px;

margin:0px auto 0px auto;

padding:0px 0px 0px 0px;

background: url(../image/back-mid.gif) repeat-y center ;

text-align:center;

}
なおHTMLは以下の様になっています.よろしくお願いします.
-------------HTML--------------------------------------------------
<div class="mid-back">

<div class="globalnavi">

<ul>

<li id="m1" title="研究室紹介へのリンク"><a href="#"><span>大学紹介</span></a></li>

<li id="m2" title="スタッフへのリンク"><a href="#"><span>スタッフ</span></a></li>

<li id="m3" title="研究設備へのリンク"><a href="#"><span>研究設備</span></a></li>

<li id="m4" title="アーカイブへのリンク"><a href="#"><span>アーカイブ</span></a></li>

<li id="m5" title="外部リンクへのリンク"><a href="#"><span>リンク</span></a></li>

</ul>

</div><!--div globalnavi finish-->

<image src="image/top1.jpg" border="none" >

<div class="mid">

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

</div> <!--div mid finish-->

</div><!--div mid-back finish-->
-------------------------------------------------------------------

補足日時:2009/06/17 18:59
    • good
    • 0

CSSにスペルミスがありますね。



.gloabalnavi ul{
(省略)
}

正しくは

.globalnavi ul{
(省略)
}

です。スペルミスの為、HTML側のマークアップに対応しておらず、ulのマージンが初期化されていなかっただけですね。
なので、li#m5のwidthも154pxで正解です。
    • good
    • 0
この回答へのお礼

スペルミスとは,恥ずかしいかぎりです(汗
修正後,全ての要素がちゃんと表示されましたが,全体が左に寄りすぎてHPの背景からはみ出してしまいました.

お礼日時:2009/06/17 14:23

実際にサンプルを検証していませんが、提供された情報を見ると単純に計算を間違っていると思いますが。


globalnaviの幅が770pxなのに対し、子要素liの幅の合計が154px×4+150px=716pxなのでぴったりに並べるには54px足りません。
下記だけ100pxになっているのは何故ですか?

li#m5{
width:100px;
(省略)
}

この回答への補足

当初は5番目の要素もwidth154pxでしたが,それでは余白が現状と同じで5番目の要素が表示されなかったので5番目の要素を表示させようと幅を小さくした結果です.

補足日時:2009/06/17 12:25
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

QCSSで画像の横に余計な余白が・・・

質問させて下さい。

以下のようなソースを書いた時のことです。

HTML部分-------------------------------

<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>
<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>



CSS部分-------------------------------

#box-s{
width:300px;
float:right;
text-align:left;
border: 1px solid #000000;
clear: none;
margin: 2px;
padding: 4px;
}


と書くと、IEだと問題ないのですが、firefoxでみると画像の
右側の余白がかなり不自然に開くんです。
少しぐらいの崩れは良いのですが、、、あまりに違いすぎる
のでどなたかお助け願えないでしょうか。

質問させて下さい。

以下のようなソースを書いた時のことです。

HTML部分-------------------------------

<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>
<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>



CSS部分-------------------------------

#box-s{
width:300px;
float:right;
text-align:left;
border: 1px solid #000000;
clear: none;
margin: 2px;
padding: 4px;
}


と書くと、IEだ...続きを読む

Aベストアンサー

表示内容のimgがwidth:290pxで、divがwidth:300pxの指定になっているので、そのようになります。

例えば、#box-sの指定でwidthを省略すれば、お望みの表示になりませんか?

質問には関係ないですが、idは唯一ということになっているので、ご提示のような場合はclassなどで指定するほうがよろしいかと…


人気Q&Aランキング