マンガでよめる痔のこと・薬のこと

CSSと(X)HTMLでページを作っています。角丸なページにしたいため、

/* ---------- 角丸画像の上辺 ---------- */
#main_contents_header {
width: 800px;
height:20px;
background:url(./top.png) no-repeat top;
margin: 10px auto 0px;
padding: 0;
text-align: center;
}

/* ---------- 上辺と下辺の間のメイン部分 ---------- */
#main_contents {
background:url(./bg.png);
width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}

/* ---------- 角丸画像の下辺 ---------- */
#main_contents_bottom {
width: 800px;
height:20px;
background:url(./bottom.png) no-repeat top;
margin: 0 auto;
padding: 0;
text-align: center;
}

というCSSを作り、

HTMLは

<div id="main_contents_top"></div>
<div id="main_contents">
ここにいろいろなコンテンツを置いていく
</div>
<div id="main_contents_bottom"></div>

という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。

<div id="main_contents">
ここにいろいろなコンテンツを置いていく
</div>

という書き方ではダメなのでしょうか・・・?

確認はFirefoxとSafariでやっています。

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

A 回答 (3件)

最初のソースでいいですので、以下を試してください。


#main_contents_bottom {}
内部に
clear:both;
を入れる。
</div>
<div id="main_contents_bottom"></div>

<div id="main_contents_bottom"></div></div>
にする。要は下のコーナーも一くくりにする
以上


簡単にいうとfloatとは浮かせて右か左に配置させる指示です。浮いているので高さが無く高さがないので背景が無いというような状態です。でclearとはそれをクリアーする指示。floatがleftだけなら、clear:leftでもオッケイ。というわけ。

html的物理レイアウトの悪癖をひきづっておられるようです。Web標準を学ばれるとレイアウトがとんでもなく楽になるので、初歩からの学習をおすすめします。
    • good
    • 1
この回答へのお礼

な、なるほど!できました・・・!

昔ながらの「上にフタして真ん中があって、下にフタ」という考えが根強くあったため、

<div id="main_contents_bottom"></div></div>

という書き方は試しておりませんでした。

浮いたところを元に戻しつつフタをする、みたいな感じでしょうか。

Web標準、勉強します。ありがとうございました。

お礼日時:2008/03/25 16:09

<div id="main_contents_top"></div>



これ
<div id="main_contents_header"></div>
の間違いですよね。^~^

「top.png」「bg.png」「bottom.png」をそれぞれ
width: 800px;
height:20px;
の画像で作成し、CSSのURLを「./top.png」でなく「../top.png」にしたところ、Mozilla FirefoxやIE7では表示されていますね。
    • good
    • 1
この回答へのお礼

ありがとうございます。そして、スミマセン!ご指摘の通り、指定ミスがありました。お恥ずかしい限りです。

最初の質問で、

<div id="main_contents">
ここにいろいろなコンテンツを置いていく
</div>

 ↑
ここを省略して書きすぎました。どうも私の場合は「floatさせた内容を入れると背景が出ない」という状態のようです。

http://2nose.com/css/?ID=120

<div id="main_contents">の間に、左右にfloatさせた内容(メニューとコンテンツ)を入れていました。

だんだんと難しい世界になってきましたが、がんばってみます。

ご回答ありがとうございました!

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

それは、画像の問題ではないですか?


例えば、その背景画像の大きさが高さ300px以上で、下の方にだけ画像が書かれているとか。
(上のほうが余白状態でテキスト1行だけでは画像部分が表示されない)
    • good
    • 0
この回答へのお礼

ありがとうございます。背景として使用している「bg.png」は、小さな画像なのですが、no-repeat指定してないのでrepeatされてすべてを覆い尽くして表示されると思ったのです・・・

上の方に余白がある、ということはありません・・・

お礼日時:2008/03/22 14:02

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

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QCSSを使用したページデザイン・背景色が変わらない

現在CSSを多用したページのレイアウトを作成しています。
ある程度のレイアウトが出来てきたので背景色を付け加えてみようと思ったのですが
何故か背景色が変更できません。

中身としてはフッターの固定のために<BODY>内に親要素としてコンテナを作成して
その中にメインコンテンツを入れています。

BODYに対して背景色の指定をしてもコンテナの外の色の変化もないく
コンテナの背景色を指定しても同じ状態です。
CSSの知識も乏しいので原因がわからずお手上げ状態となってしまいました。

下記にhtmlとCSSのリンクを掲載しますので
原因が分かる方がいれば教えてください。

素人なのでソースは汚いですがそこはそっとして置いてください…

http://beatprovider.info/oshiete/index.html
http://beatprovider.info/oshiete/style.css

Aベストアンサー

まずは下記のサイトなどで検証してみて下さい。

http://jigsaw.w3.org/css-validator/

色の指定でエラーになってますね。

誤:#00000
正:#000000

Q背景色が表示されない><

下記のように設定していますが、背景色が表示されません。
解決方はありますでしょうか?
【html】
<div id="header">
<div id="h_contents">

<div id="h_left_pr">
dddx
</div><!-- h_left_pr -->

<div id="h_wrapper">

<div id="right_top_area">
テキストリンクエリア
</div><!-- right_top_area -->

<div id="h_main_box">

<div id="h_main_left">
ロゴエリア
</div><!-- h_main_left -->

<div id="h_main_right">

<div id="h_search_area">
サーチエリア
</div><!-- h_search_area -->

<div id="h_map_area">
マップエリア
</div><!-- h_map_area -->

</div><!-- h_main_right -->

</div><!-- h_main_box -->

</div><!-- h_wrapper -->

</div><!-- h_contents -->
<div style="clear:both "></div>
</div><!-- header -->

【css】
#header{
width:100%;
background-color:black;
}

#h_contents{
width:1240px;
margin:0 auto;
}

#h_left_pr{
float:left;
width:120px;
background-color:red;
}

#h_wrapper{
float:right;
width:1000px;
margin:0 120px 0 0;
padding:0;
background-color:blue;
}
#h_wrapper{
>margin:0 60px 0 0;
}

#right_top_area{
clear:both;
float:right;
background-color:green;
width:350px;
}

#h_main_box{
clear:both;
background-color:yellow;
}

#h_main_left{
float:left;
width:200px;
background-color:purple;
}

#h_main_right{
float:right;
width:800px;
background-color:orange;
}

#h_search_area{
clear:both;
float:left;
width:500px;
background-color:gray;
}

#h_map_area{
float:right;
width:300px;
background-color:darkblue;
}

下記のように設定していますが、背景色が表示されません。
解決方はありますでしょうか?
【html】
<div id="header">
<div id="h_contents">

<div id="h_left_pr">
dddx
</div><!-- h_left_pr -->

<div id="h_wrapper">

<div id="right_top_area">
テキストリンクエリア
</div><!-- right_top_area -->

<div id="h_main_box">

<div id="h_main_left">
ロゴエリア
</div><!-- h_main_left -->

<div id="h_main_right">

<div id="h_search_...続きを読む

Aベストアンサー

ソースをそのままコピペしてサンプル(HTML 4.01 Strict)で検証してみましたが、IE、Firefox共に「dddx」の周辺と、幅1240pxを超えた時点からの右端に黒い背景色がちゃんと表示されていますが?
ただし、IE6では<div id="h_left_pr">dddx</div>のコンテナが右隣のコンテナh_wrapperと隙間無くくっついていますが、IE7及びFirefox等では余白ができる為、そこの見え方は異なっている様ですが…どちらが意図した結果でしょうか?

トラブルがこちらの環境では再現されないので問題点を明らかにする為に、

・質問者様の環境では、現在どの様に見えているのか?(スクリーンショットを添付)
・本当はどう見えて欲しいのか?

を明らかにして頂けますでしょうか?

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 {

にするだけ

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QCSS backgroundが反映されない件

CSSレイアウトで問題にぶつかってしまいました。
http://www.vivibond.com/demo/test/test.html
上記URLをFirFoxで見ると#contentsに書いた
「background: url(images/bg2.gif) repeat-y;」が反映されません。

いったい何故でしょうか。。。
CSSはこんな感じです。
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
body {
background: #FFFFFF;
margin: 0px;
padding: 0px;
font: 12px "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
}
/*font*/
.pink {color:#F26E71;}
/*ページ全体ラッパー*/
#wapper {
margin: 0px;
padding: 0px;
width: 850px;
}
#wapper1 {
margin: 0px;
padding: 0px;
width: 850px;
background: url(images/bg.jpg) repeat-y;
}
/*コンテンツ*/
#contents {
margin: 0px;
padding: 0px;
width: 800px;
height: auto;
clear: both;
background: url(images/bg2.gif) repeat-y;
}
/*ナビ*/
#navi {
background: #F3EDEE url(images/b_bg.jpg) no-repeat;
padding: 44px 44px 150px 42px;
width: 160px;
float: left;
}
.navibox1{
height: 52px;
background: url(images/naviboxbg.gif) no-repeat bottom;
width: auto;
}
.navibox2{
height: 52px;
width: auto;
}
#main {
margin: 0px;
padding: 0px;
float: right;
width: 554px;
}
.image {
margin: 0px;
padding: 20px 34px 20px 20px;
}
.topics {
margin: 0px 34px 0px 20px;
padding: 0px;
}
.about_text {
margin: 0px 30px 0px 24px;
padding: 0px 5px 30px 10px;
line-height: 20px;
}
/*フッター*/
#footer {
margin: 0px;
background: url(images/footer.jpg) no-repeat;
text-align: justify;
clear: both;
padding: 30px 0px 30px 470px;
}
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
よろしくお願いいたします。

CSSレイアウトで問題にぶつかってしまいました。
http://www.vivibond.com/demo/test/test.html
上記URLをFirFoxで見ると#contentsに書いた
「background: url(images/bg2.gif) repeat-y;」が反映されません。

いったい何故でしょうか。。。
CSSはこんな感じです。
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
body {
background: #FFFFFF;
margin: 0px;
padding: 0px;
font: 12px "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
}
/*font*/
.pink {color:#F26E71;}
/*ページ全体ラッパー...続きを読む

Aベストアンサー

contentsの直下にはnaviとmainしかなくて、両方ともfloatしている
のだから高さは0。高さが0では背景画像がどうとかいう余地はあり
ません。どこでもいいからfloatで検索すると、山のように出てくる
話です。

高さを指定するとか、section02の後で<br clear="all" />すると
か、#middle_inside:after で見えないコンテンツを置くとか、でな
けりゃoverflow属性を指定するとか、いろんなごまかし方がありま
すので、好みのものをどうぞ。私は :afterで見えないスペースを置
くのが好きです。

Q

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか?

Aベストアンサー

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

 OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

 このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

 listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
 そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

 文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values fr...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">


人気Q&Aランキング