利用規約の変更について

前回の質問のときは縦幅の設定heightからpaddingの引き算を忘れて空白が出来ていました。
今回はそれに気をつけて横幅のweightを設定したのですがまたも空白が出来てしまいました。

こんな状態です↓
http://teatsite.ninja-x.jp/

1.この空白はどうすれば無くなるのか。
2.ついでによろしければメニュー部分の画像を隙間無く並べる方法

以上の2つ(片方だけでも良いです。)の御教授お願いします。

以下ソースです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body{/* 全体の要素 */
margin: 0px;
color: #555555;
background-color: #E3E5E6;
}
.layout{/* 全体を決める要素 */
margin: 0px auto 0px auto;
width: 850px;
}
.header{/* ヘッダー部分 */
padding: 35px 0px 0px 50px;
height: 65px;
background: url("title_bg.png");
background-repeat: no-repeat;
}
.navi{/* サイト内のナビゲーション */
height: 27px;
padding: 13px 0px 0px 60px;
font-size: 14px;
background: url("menu.png");
background-repeat: no-repeat;
}
.navi a:link{/* ナビゲーション内のリンクの色 */
color: #555555;
}
.navi a:visited{/* ナビゲーション内の訪問済みリンクの色 */
color: #555555;
}
.menu{/* メニュー部分 */
padding: 0px 30px 0px 15px;
background-color: #FFFFFF;
width: 170px;
float: right;
}
.menu-category{/* メニュー部分のカテゴリー */
margin: 0px 0px 40px 0px;
padding: 0px;
}
.main{/* メイン部分 */
padding: 0px 30px 0px 15px;
background-color: #FFFFFF;
width: 590px;
float: right;
}
.footer{/* フッター部分 */
background-color: #FFFFFF;
clear: right;
height: 40px;
}
-->
</style>
</head>
<body>
<div class="layout">
<div class="header">
</div>
<div class="navi">
<a href="index.html">
トップページ
</a>
</div>
<div class="menu">
<div class="menu-category">
<a href="index.html"><img src="dummy_menu_category.png" border="0"></a>
<a href="index.html"><img src="dummy_menu_category.png" border="0"></a>
<a href="index.html"><img src="dummy_menu_category.png" border="0"></a>
</div>
</div>
<div class="main">
</div>
<div class="footer">
</div>
</div>
</body>
</html>

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

A 回答 (4件)

.layout{/* 全体を決める要素 */


margin: 0px auto 0px auto;
width: 850px;
background-color: #FFFFFF; /*ここ追加*/
}

見かけ上、背景色が白ければいいのかな。

この回答への補足

真ん中の部分だけを白色にしたかったのですが、CSSだけでするのは難しいことなのかもしれませんね。
とりあえず白色の画像を真ん中に持ってくるという方法で解決しました。

これで回答を締め切らせてもらいます。
回答してくださった皆さん、大変ありがとうございました。

補足日時:2008/01/05 13:36
    • good
    • 0

> その下の背景色が表示されている部分です。


そこって要するに「メイン部分」ですよね?
footerがメニューリンクの「下」に出るようになっているため、
メインの中身がなければ、空白になってしまう部分。
(border付きのページでmain内に中身を書けば分かると思いますが…)
mainは「中身がなくても」menu-categoryからfooterまでの間に広がっていてほしいとか、そういうことなのでしょうか?
横の空白は関係ないんでしょうか?

この回答への補足

menuの部分が縦に広がったらmainもmenuと同じ高さに広がるようにしたいんです。

横の空白は関係はないです。

補足日時:2008/01/04 18:01
    • good
    • 0

えーと、mainのブロックの左に空白ができる、ということですか?


float: right;を外せば左にぴったり来ますが、そういうことですか?
もしそうならfloat: right;をfloat: left;にすればよいかと思いますが、これではだめですか?

この回答への補足

mainの下のほうです。

ただいま目印に「ここはメニュー部分」とつけてみました。
その下の背景色が表示されている部分です。

補足日時:2008/01/04 12:07
    • good
    • 0

>2.ついでによろしければメニュー部分の画像を隙間無く並べる方法


.menu{/* メニュー部分 */
/*padding: 0px 30px 0px 15px;*/
padding: 0;

>1.この空白はどうすれば無くなるのか。
.main{/* メイン部分 */
padding: 0px 30px 0px 15px;
background-color: #FFFFFF;
width: 590px; /*ここが大きいので下に落ちている*/
float: right;
}
しかしメニュー部分を padding: 0; にすることで、width: 631px; でもOKかな。

配置を確認するには、全てに border を入れるとよいです。
border: solid 1px #color;

この回答への補足

1
.menu{/* メニュー部分 */
padding: 0px 30px 0px 15px;

の部分をpadding 0;にしてみましたがだめみたいです。↓のようになってしまいました。
http://teatsite.ninja-x.jp/test3.html
この部分はメニュー画像の下にカテゴリー画像を設置するために意図的に書いたので、たぶん違うと思います。

2
borderで配置を確認したところ下に落ちているみたいではないみたいです。
http://teatsite.ninja-x.jp/test2.html
※solid 1px×2の分を左右のpaddingから引いてあります。

補足日時:2008/01/04 00:58
    • good
    • 0

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

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

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

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

Qhtmlのタグ間の謎の空白

htmlの文字間に謎の余白があり、消したいのですがどなたか方法が分かる方いらっしゃいますでしょうか?
具体的には下記サンプルファイルの2つのaタグ間に半角くらいの空白が出来てしまいます。
マージンなどは0にして、google chrome上で要素を調べている限りでは空白を開けるような設定が見つかりません。
もしお分かりの方おられましたら、お教え頂ければ幸いです。よろしくお願いいたします。

<html>
<head>
<style type="text/css">
body, a { margin:0px; padding: 0px; letter-spacing:0px;}
a { background-color: red;}
</style>
</head>
<body >
<a>Home</a>
<a>Home</a>
</body>
</html>

Aベストアンサー

その空白は改行マークです。
インライン属性のアンカータグですから空白がでて当然。
ほかの部分との絡みもありますが、ソースはそのままでどうしても
空白をけしたいなら、blockにしてfloatにするとかですかね・・・

<style>
body, a { margin:0px; padding: 0px; letter-spacing:0px;}
a { background-color: red;display:block;float:left;}
</style>
<a>Home</a>
<a>Home</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変数の代入値を外部の.txtファイルから読む

var AAA = "XXXX";

このように変数AAAにXXXXという値を代入したいのですが、XXXXは外部ファイルTEXTDATA.txt内にあります。
javascriptのみで、TEXTDATA.txtをオープンして文字列を取得することはできるのでしょうか?

TEXTDATA.txt には XXXX 以外の文字はありません。

だれか回答できるかた、よろしくお願いします。

Aベストアンサー

<script>
w=window.open("TEXTDATA.txt","tmp","width=100,height=100")
var AAA = w.document.all[0].innerText
w.close()
document.writeln(AAA)
</script>

こんな感じでどうでしょうか。

とほほさんのページを見て、いま作ってみました。

参考URL:http://tohoho.wakusei.ne.jp/js/index.htm

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などの数値を設定することで余白がなくなるはずです。

QCSS、width100%でもできる余白

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;}

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>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

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

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

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qページ下部のDIV要素下部に不要な余白

お世話になります。
早速ですが、以下のようなHTMLを記述しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
width:100%;
background-color:#FFFFFF;
}
#wrapper_out{
margin:0px auto;
width:100px;
background-color:#FFCCFF;
}
#bottommarginbox{
height:5px;
width:5px;
background-color:#66FFFF;
margin:0px auto;
}

</style>
</head>

<body>
<div id="wrapper_out">
改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>
改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>
改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>
改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>
改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>
</div>
<div id="bottommarginbox"></div>
</body>
</html>
※上記のHTMLソースはあくまでも事象確認用にコーディングしたものです。

改行が多数入っているので、表示させるとブラウザに縦スクロールバーが出現します。この状態ではdiv#bottommarginboxがページ最下部にくっついて表示されると予想していたのですが、WindowsXPのIE6とIE7ではいずれもdiv#bottommarginbox(ページ最下部の水色の小さな四角)の下に謎の余白が発生します。
ちなみにFireFox2、Opera9、Safari3ではいずれもこの事象は発生しませんでした。
なんとなくIEのバグっぽくはあるのですが、対処方法などご教授いただければ幸いです。よろしくお願いします。

お世話になります。
早速ですが、以下のようなHTMLを記述しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
width:100%;
background-color:#FFFFFF;
}
#wrapper_out{
margin:0px auto;
width:100px;
backg...続きを読む

Aベストアンサー

ANo.2、4です。
divの解釈の違いというかIEのバグかと思います。

最初の回答の内容は、スクロールバー下にびみょ~な隙間があったので、そのことかと思いましたが、よく見るとdiv#bottommarginboxの高さがFirefoxとIEで違うことに気づきました。
計ってみたら、IEでは5pxの指定にもかかわらず、18pxほどありました。
IEの場合、1文字分の高さをデフォルトでもってしまっているようです。

なので、高さを5pxに設定し、溢れた分を表示しない
⇒overflow:hidden;
でdivの高さがIEでも利くということになります。

参考URL:http://cssbug.at.infoseek.co.jp/detail/winie/b158.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で背景画像が表示されない

CSSレイアウトで通常のHTMLで作成しています。
背景画像が表示されないくて困っています。
他の方の質問で似た事例があったのと、
情報サイトを見てみたのですがどうしても上手くいきません。
この場合floatとclearはどう使えば背景が表示されるのでしょうか?

http://oshiete1.goo.ne.jp/qa3882745.html
http://2nose.com/css/?ID=120

bodyには別背景を指定してあるのでbodyへの指定はできません。
何かアドバイスがあれば教えて頂けますでしょうか。(__)
確認はIE8です。

[ css ]-----------------------------------------------------

#wrap{
width: 920px;
height: 100%;
margin-left: auto;
margin-right: auto;
background: url(../img/background.jpg) repeat-y;
}
#contents{
clear: both;
}
#sidemenu{
width: 275px;
float: left;
}
#mainbox{
width: 570px;
float:right;
}

[ html ]----------------------------------------------------

<div id="wrap">
<div id="contents">
<div id="sidemenu">サイドメニュー内容</div>
<div id="mainbox">メインコンテンツ</div>
</div>
</div>

以上です、よろしくおねがいします!

CSSレイアウトで通常のHTMLで作成しています。
背景画像が表示されないくて困っています。
他の方の質問で似た事例があったのと、
情報サイトを見てみたのですがどうしても上手くいきません。
この場合floatとclearはどう使えば背景が表示されるのでしょうか?

http://oshiete1.goo.ne.jp/qa3882745.html
http://2nose.com/css/?ID=120

bodyには別背景を指定してあるのでbodyへの指定はできません。
何かアドバイスがあれば教えて頂けますでしょうか。(__)
確認はIE8です。

[ css ]--------------...続きを読む

Aベストアンサー

floatというのは特殊で、floatが指定されているブロック要素(今回は#sidemenu,#mainbox)を囲むブロック要素は高さが0になります。

なので#contentsのbackgroundに指定をしても何も表示されなかったでしょう?floatのが指定してあるブロック要素の高さは無視されます。
なので、例え#sidemenu{height:500px;}と指定してもこの場合#contentsは高さ0のままです。

またclearの指定方法も間違っています。floatを囲うブロック要素にclearを指定しても何も意味はありません。
この場合使うとしたら
<div id="wrap">
<div id="contents">
<div id="sidemenu">サイドメニュー内容</div>
<div id="mainbox">メインコンテンツ</div>
<div style="clear:both"></div>
</div>
</div>
でしょうね。これで初めてclearの意味が出て#contentsと#wrapの高さが出ます。ただ、これだと空のボックスが生まれる為W3Cに準拠したコーディングとは言えませんが。
また例えば#sidemenuの内容よりも#mainboxの内容が多く#sidemenuの内容の高さの方が低くなってしまう場合はどうやっても現在のCSSでは#sidemenuの高さを#mainboxの高さまで広げる事は不可能です。CSS3.0では可能だったりしますが、IE6等が対応してないのでとりあえず置いときます。
その場合は#sidemenuの背景だけが欲しい場合でも#contentsに背景を指定します。これで#sidemenu,#mainboxどちらが高くなっても高い方の高さまで背景が反映されます。
#contents{backgrounde:url(画像) repeat-y left top}
のように#sidemenuの背景の幅の画像を左側に寄せて縦だけにリピートさせます。repeat-xかも。。忘

ちなみに上の方に書いたclearのかかったdivをおく対処法ですが、先ほども述べたように空のブロック要素は本来書かないほうがよいです。
参考サイトのにかかれてあるようにafter疑似要素というのを利用してfloatを解除します。
ネットで「float after疑似要素 解除」などで調べると出てきますが、もしプロの方でなければ空要素の<div style="clear:both"></div>を書くのが楽です。できれば疑似要素のfloat解除はサイト制作に必須スキルですので勉強した方が勿論よいですが。

参考URL:http://www.cptskgj.com/ilog/2008/04/css-floatclearfix.php

floatというのは特殊で、floatが指定されているブロック要素(今回は#sidemenu,#mainbox)を囲むブロック要素は高さが0になります。

なので#contentsのbackgroundに指定をしても何も表示されなかったでしょう?floatのが指定してあるブロック要素の高さは無視されます。
なので、例え#sidemenu{height:500px;}と指定してもこの場合#contentsは高さ0のままです。

またclearの指定方法も間違っています。floatを囲うブロック要素にclearを指定しても何も意味はありません。
この場合使うとしたら
<div id="...続きを読む


人気Q&Aランキング

おすすめ情報