人気マンガがだれでも無料♪電子コミック読み放題!!

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

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

A 回答 (5件)

スタイルシートの書き始めに、


html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/dev … )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。
    • good
    • 2
この回答へのお礼

>html,body{margin:0;padding:0;}
ということは、bodyはデフォルトだと、paddingが1px以上に設定されているのですか?

*{border:solid 1px red;} これすごくわかりやすいですね。
ありがとうございます。

お礼日時:2012/10/23 23:59

1.


html/cssにおける余白はmarginとpaddingの2種類があります。
marginは外側の余白、paddingは内側の余白です。

2.
html/cssにおける%とはウィンドウに対しての値ではなく、その要素の親の範囲の値です。
したがって、ウィンドウサイズが仮に1000pxあっても、親要素に500pxが設定されていたら、100%を指定しても500px以上にはなりません。また、親要素の幅が100%であっても、親要素自体にmarginやpaddingなどの余白が設定されていると、子要素はその制限を受けます。

上記を前提として、#headerをウィンドウいっぱいの横幅にする場合、#headerの先祖要素であるhtml,bodyの幅が100%であり、かつpaddingとmarginが0である必要があります。その上で、#headerのwidth:100%;margin:0;padding:0が本当の意味で有効になります。

その部分だけを抜き出すと
html,body,#header{
margin:0;
padding:0;
width:100%;
}
#header{
height:100px;
background-color:#00;
}

このようにすれば、幅がウィンドウいっぱいの高さ100px、赤背景の#headerが表示されます。
    • good
    • 0

No.2です。


ちなみに、HTML/CSSをきちんと整理してみましょう。
内容がわからないので、想像を働かせた部分もあるので適当に修正してください。
★html,bodyのmarginを0にすること
★コンテナブロックのmarginを0にしても、その内部の要素にmarginがある場合もあるので修正すること
 下記サンプルの
 div.header>*,div.section>*,div.footer>*{margin:0 10px;}
 が、それを消す書き方です。
★サンプルはリキッドで、スマートフォン用の480pxから幅広のディスプレイに対応しています。

※ これらの書き方は何度も説明しているはずです。理解しておかないと、ひとつひとつみな聞かなければならなくなります。それじゃ埒が明きません。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;color:white;width:100%;}
a:link{color:aua;}
a:visited{color:blue;}
a:hover,a:focus{color:yellow;}
div.header,div.section,div.footer{
_width:70%;min-width:480px;max-width:800px;margin:0 auto;
}
div.header>*,div.section>*,div.footer>*{margin:0 10px;}
div.header,div.footer{background-color:black;position:relative;}
div.section{
_border-style:double;
_border-width:6px 0 6px 0;
_border-top-color:yellow;border-bottom-color:blue;
_background:gray url(./images/background/stone.jpg);
}
div.header{min-height:90px;text-align:center;}
div.header h1:before{
_content:url(./images/logo.gif);
_width:150px;height:80px;
_background-color:white;
_position:absolute;top:5px;left:5px;
}
div.header ul.nav,div.header ul.nav li{
_display:block;list-style-type:none;
_margin:0;padding:0;
_text-align:center;
}
div.header ul.nav{text-align:right;}
div.header ul.nav li{display:inline-block;width:4em;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<ul class="nav" id="langSelect">
___<li>EN</li>
___<li>CH</li>
__</ul>
__<ul class="nav" id="siteMap">
___<li>home</li>
___<li>profile</li>
___<li>works</li>
__</ul>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>・・・</p>
__<p>・・・</p>
__<p>・・・</p>
__<p>・・・</p>
__<p>・・・</p>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
___<dt id="LAST-MODIFIED">Last Modified</dt>
___<dd>2012-08-10 12:00:00 (JST)</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
    • good
    • 0

CSSの body に margin:0px; を足したらどうでしょう。

    • good
    • 1

margin-left:0px;margin-right:0px;


を追加してみては?
    • good
    • 1

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

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

このQ&Aを見た人はこんなQ&Aも見ています

この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の方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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ヘッダーの上にほんのわずかに隙間ができる

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="&rdquo;Content-Type&rdquo;" content="&rdquo;text/html;" charset="utf-8&rdquo;" />

でございます。教えてgooのトップ(http://oshiete.goo.ne.jp/)も一番上("質問&回答 (Q&A) コミュニティ - 教えて!goo"のところです)は画面上部にぴったりくっついていますよね。どうすればこのような形にできるのでしょうか?どなたかアドバイスをお願いします。

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!DOCTYPE htm...続きを読む

Aベストアンサー

<body>タグの属性に topmargin="0" を指定してみて下さい。
隙間がなくなると思います。

同様に<body>タグに leftmargin="0" なんて指定したら左にピタっとくっついたページになりますよ^^

<!-------------------------------------------------------->

<html>
<head>
<title>詰めテスト</title>
</head>
<body topmargin="0">
<div style="border:1px solid blue">上詰めテスト</div>
</body>
</html>

<!-------------------------------------------------------->

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

QCSSで余白とパディングに”0”を指定したのに上部に余白ができてしまう

DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。
そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。
IE6では空白がないのですが、FIREFOX2だと空きます。
分かる方いらっしゃったら教えて下さい。
ソースはこれです↓
【html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<style type="text/css" media="all">@import url("school2.css");</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<h1><img src="images/Logo03.gif" width="310" height="90" /></h1>
</div>
</div>
</body>
</html>


【css】
body {
background: #E0FFCE;
text-align: center;
margin: 0px;
padding: 0px;
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
height: 800px;
width: 800px;
border: 1px solid #009999;
background: #FFFFFF;
}
#wrapper #header {
background: url(images/Backheader3.gif) no-repeat;
margin: 0px;
padding: 0px;
height: 120px;
border-bottom: 6px double #009999;
}
#wrapper #header img {
margin: 0px;
padding: 0px;
}

DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。
そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。
IE6では空白がないのですが、FIREFOX2だと空きます。
分かる方いらっしゃったら教えて下さい。
ソースはこれです↓
【html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http...続きを読む

Aベストアンサー

h1のスタイル設定がないのが原因ですね。
CSSをやると最初の方でつまずく代表例のようなパターンです。
h1にも余白0などの数値を設定することで余白がなくなるはずです。

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

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方の隙間が開く。

QCSSの左横に隙間ができてしまいます。

画像の左横に謎の隙間(8mmほど)ができて埋まりません。
そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。
padding や vartical-align、text-alignなど試してみましたが、ダメでした。

とても困っています、どなたかご教示くださいますようお願いいたします。

<< CSS >>
#header {
width:940px;
height:59px;
margin: 0 0 20px 0;
}
#logo {
width:300px;
height:59px;
float:left;
margin: 0 20px 0 0;
}

#menu {
width:620px;
height: 59px;
padding: 0;
margin: 0;
float:right;
}
#menu img {
padding-top:8px;
border:none;
}
#menu ul {
margin:0;
}
#menu ul li {
margin: 0px;
padding: 0px;
list-style-type: none;
display:inline;
float:left;
}

<< HTML >>
<div id="header">
<div id="logo">
<img src="img/logo.gif" width="298" height="59" alt="ロゴ">
</div><!-- /#logo -->

<div id="menu">
<ul>
<li><img src="img/btn_A.gif" width="194" height="51"></li>
<li><img src="img/btn_B.gif" width="140" height="51"></li>
<li><img src="img/btn_C.gif" width="149" height="51"></li>
<li><img src="img/btn_D.gif" width="137" height="51"></li>
</ul>
</div><!-- /#menu -->
</div><!-- /#header -->

画像の左横に謎の隙間(8mmほど)ができて埋まりません。
そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。
padding や vartical-align、text-alignなど試してみましたが、ダメでした。

とても困っています、どなたかご教示くださいますようお願いいたします。

<< CSS >>
#header {
width:940px;
height:59px;
margin: 0 0 20px 0;
}
#logo {
width:300px;
height:59px;
float:left;
margin: 0 20px 0 0;
}

#menu {
width:620px;
height: 59px;
padding: 0;
margin: 0;
float:right;
}
#...続きを読む

Aベストアンサー

リストの整形はぶらうざによって差があります。ul要素やli要素に、またmarginで左を空けていたり、パディングで空けていたりします。
そのため、
#menue ul,#menue ul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;line-height:20px;
}
のようにセレクタをグループ化してまとめておけば、ブラウザ間の差を吸収できます。
そのうえで、
#menue ul li{display:inline;}
または
#menue ul li{float:left;}
です。floatの場合はblockのまま、inline-blockの場合は、text-align:centerで横に並べます。
 この場合
「ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )」
という仕様--ルールのためli間にスペースができます。white-spaceに
normal,pre,nowrap,pre-wrap,pre-lineのいずれを指定しても・・
 そのためHTMLを
<ul><li><img src="img/btn_A.gif" width="194" height="51"></li><li>
<img src="img/btn_B.gif" width="140" height="51"></li><li>
<img src="img/btn_C.gif" width="149" height="51"></li><li><img src="img/btn_D.gif" width="137" height="51"></li></ul>
とかくことになります。

 なお、
#menue ul li{width:23%;position:relative;}
#menue ul li a{display:block;width:100%;height:100%;text-decoration:none;}
#menue ul li img{display:block;width:100%;height:100%;}
とすると、ウィンドウ幅に合わせて伸縮しますから、そもそもの悩みはなくなります。





この場合でも、

リストの整形はぶらうざによって差があります。ul要素やli要素に、またmarginで左を空けていたり、パディングで空けていたりします。
そのため、
#menue ul,#menue ul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;line-height:20px;
}
のようにセレクタをグループ化してまとめておけば、ブラウザ間の差を吸収できます。
そのうえで、
#menue ul li{display:inline;}
または
#menue ul li{float:left;}
です。floatの場合はblockのまま、inline-blockの場合は、text-align:centerで...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング