旅行好きのおしりトラブル対策グッズ3選

メイン画像とグローバルメニューの間に3pxくらいの隙間が空きます。
マージンやpadding等をいじっても改善する事が出来ませんでした。
IE6・Firefoxとも同じ症状が出ます。
CSSを勉強中なので初歩的なミスかと思いますが、宜しくお願いします。

【HTML】
<!--メインイメージ開始-->
<img src="images/img.jpg" / alt="○○○ホームページ">
<!--メインイメージ終了-->

<!--回り込み解除-->
<div class="clear"></div>

<!--グローバルメニュー開始-->
<div id="glmenu">
<ul>
<li id="m_top"><a href="#">トップ</a></li>
<li id="m_menu_list"><a href="#">メニュー1</a></li>
<li id="m_store"><a href="#">メニュー2</a></li>
<li id="m_history"><a href="#">メニュー3</a></li>
<li id="m_check"><a href="#">メニュー4</a></li>
</ul>
</div>
<!--グローバルメニュー終了-->


【CSS】
/*=======メニュー全体=======*/
#glmenu{
width:630px;
height:40px;
margin:0;
padding:0;
position:relative;
}

#glmenu ul {
width:630px;
height:40px;
padding:0;
margin:0;
}

#glmenu li {
margin:0;
padding:0;
list-style-type:none;
float:left;
text-indent:-2000px;
}

/*=======トップ=======*/
#glmenu li#m_top a {
background:url(images/m_top.jpg);
width:126px;
height:40px;
display:block;
text-decoration:none;/*ネスケ用*/
outline:none;/*Firefox用*/
}

/*=======メニュー1=======*/
#glmenu li#m_menu_list a {
background:url(images/m_menu_list.jpg);
width:126px;
height:40px;
display:block;
text-decoration:none;/*ネスケ用*/
outline:none;/*Firefox用*/
}

/*=======メニュー2=======*/
#glmenu li#m_store a {
background:url(images/m_store.jpg);
width:126px;
height:40px;
display:block;
text-decoration:none;/*ネスケ用*/
outline:none;/*Firefox用*/
}

/*=======メニュー3=======*/
#glmenu li#m_history a {
background:url(images/m_history.jpg);
width:126px;
height:40px;
display:block;
text-decoration:none;/*ネスケ用*/
outline:none;/*Firefox用*/
}

/*=======メニュー4=======*/
#glmenu li#m_check a {
background:url(images/m_check.jpg);
width:126px;
height:40px;
display:block;
text-decoration:none;/*ネスケ用*/
outline:none;/*Firefox用*/
}

こんな感じです。
なぜ、このような隙間が空いてしまうのか、改善方法を教えていただけないでしょうか?
宜しくお願いします。

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

A 回答 (2件)

img要素をブロック要素にするのはどうでしょう?



img {
display:block;
}

このソースだけではわかりませんが、もしもimg要素がbody直下に書かれているようであれば文法的にブロック要素(pなりdivなり)で囲ってやる必要があります。

あと、<div class="clear"></div>はたしか<div class="clear"><!-- 回り込み解除 --></div>のようにコメントアウトをいれないと上手く動かないブラウザがあったような気がします。
    • good
    • 0
この回答へのお礼

ご親切に説明していただきありがとうございます。
今まで、メニュー部分にしかdisplay:block;を使用したことがなかったので、img等にも使用できるとは知りませんでした。
ありがとうございます。

お礼日時:2008/06/22 11:06

img{


vertical-align:bottom;
}
を足してみてください。メニュー部分とは多分関係ないです。

デフォルトではbaselineが多いですので。
解説すると、アルファベットのbaselineは下が揃ってますよね。これにgjpqyy等下にぴょこんと出た部分が今のすき間と言っておられる部分だと思います。日本語のしたはbaselineに合っているので、文字がないと画像がその分浮いた形で表示されるように見えます。
    • good
    • 0
この回答へのお礼

親切に教えていただきありがとうございます。
変な隙間を解消することができました。
グローバルメニューの上部に隙間が空いている場合でも、アルファベットのベースラインが関係してくるのでしょうか?

お礼日時:2008/06/22 11:03

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

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

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

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

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qグローバルナビ部分の背景を画面幅いっぱいにしたいのですが、

グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、
どうすれば良いのか分からなくて困っています。

まず、参考にしようとしているサイトが下記です。
http://www.oo-nagata.co.jp/
このサイトのようにグローバルナビ部分のとフッター部分の背景を画像で(画像ではなくても同じ事なのでしょうか、、。)画面幅いっぱいにしたいのですが、うまくいかなくて困っています。
ページの幅は960pxにCSSにて指定しているのですが、
幅を指定してしまうと当然その部分の幅は指定した幅になってしまいます。
よって背景画像は画面幅いっぱいにはならないのです。
ページの幅は指定し画面中央にくるようにしたいのですが、
どうすれば良いのでしょうか?

Aベストアンサー

参考サイトのCSSの内容をHTMLの構造と突き合わせて確認してみましたか?
そうすれば、簡単な理屈である事がわかります。

参考サイトでは、ヘッダー枠(#header)、グローバルナビ枠(#gnv)、フッター枠(#footer)、メインコンテンツ枠(#contents-base)といったコンテナブロックは全て"width: 100%;"になっています。なのでその各コンテナブロックの背景は画面一杯に描画される事になります。

一方で、それらの実際の内容(テキストや画像が配置されている)は、それらの子要素として入れ子になっています。

・ヘッダーの内容:div.in
・グローバルナビの内容:#gnv ul
・フッターの内容:div.in
・メインコンテンツの内容:#contents-inline

これらの子要素の幅は"width: 876px;"と決め打ちされており、さらに左右マージンの値がautoに設定されているので、各親要素の背景100%の中でセンタリングされて表示されています。

> (画像ではなくても同じ事なのでしょうか、、。)

描画エリアは同じですから、背景色背景画像でも理屈は変わりません。

> ページの幅は960pxにCSSにて指定しているのですが、幅を指定してしまうと当然その部分の幅は指定した幅になってしまいます。

その通りです。だから、本件の様なレイアウトがしたければ、全てのコンテナブロックを幅を決め打ちした一つの親要素には含められないわけです。参考サイトの様に。

> よって背景画像は画面幅いっぱいにはならないのです。

背景画像を描画するコンテナブロックは"width: 100%;"で。

> ページの幅は指定し画面中央にくるようにしたい

固定幅で描画したいコンテナブロックは、固定幅("width: 960ox;")を指定し左右マージンをautoで。

これで解決します。なお、入れ子の構造などは各コンテンツの内容やデザインによって必ずしも参考サイトと全く同じにはしなくても実現可能ですので、それはご自分のサイトの構造と見比べてよく検証されて下さい。

参考サイトのCSSの内容をHTMLの構造と突き合わせて確認してみましたか?
そうすれば、簡単な理屈である事がわかります。

参考サイトでは、ヘッダー枠(#header)、グローバルナビ枠(#gnv)、フッター枠(#footer)、メインコンテンツ枠(#contents-base)といったコンテナブロックは全て"width: 100%;"になっています。なのでその各コンテナブロックの背景は画面一杯に描画される事になります。

一方で、それらの実際の内容(テキストや画像が配置されている)は、それらの子要素として入れ子になっています。
...続きを読む


人気Q&Aランキング

おすすめ情報