位置情報で子どもの居場所をお知らせ

http://chicken-tori.21mhz.net/web/index.html
http://chicken-tori.21mhz.net/web/css/layout.css

footerの上にmargin-top: 10px;を適用させたんですが、IEだとちゃんと適用され、FireFoxだと適用されず、くっついた状態です

どのようにすれば、marginを適用できるんでしょか?

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

A 回答 (4件)

CSSでfooterからmarginを全て削除。


替りにmenuとmainに以下を追加。
margin-bottom: 10px;

確認ブラウザは以下の通り。
InternetExplorer6:Firefox2.0.0.20(3.0.6):google_chrome1.0.154.43:lolifox0.3.6:Lunascape4.8.1
navigator9.0.0.6:opera9.63:safari3.1.2(525.21):seamonkey1.1.14:sleipnir2.8.4(2804400)
    • good
    • 0
この回答へのお礼

ありがとうございます。間を空けることができました。footerのmargin-topが適用されず、menuとmainでmargin-bottomが適用できた理由はなぜなんでしょうか?

お礼日時:2009/02/09 16:35

 floatはおかしい・・・。

特にIEの処理はおかしいので、それを目当てに作成するとダメです。
 position:relatve;がよいと思いますが・・

 floatを使うとhr等でclearが必要になりますが、IEの、バグで余白の調整が出来ません。
「footerのmarginが適用されませ」の回答画像3
    • good
    • 0

あ~ごめん


以下でダメなら外枠からパッディンを取ればいいんだよ

教えて?No_Thx☆彡
    • good
    • 0

margin 10px 0px 0px 0px;でいいんじゃないか?



教えて?No_Thx☆彡
    • good
    • 0

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

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

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

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

Qpタグによる段落間のアキ調整について

こんにちは。
HTMLのpタグでくくった段落が連続すると、
多くのブラウザでは段落間に1行程度のアキが生じると思います。

このアキをCSSによってなくしたいのですが
どう指定すればいいのでしょうか?

たとえば段落の「margin-bottom」に0ではなく
マイナス値を入れればなくせるようですが、
「pによる1行アキ」というのがすべてのブラウザでの
共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

どういうやり方がすべてのブラウザに通用する
正しいやり方なのでしょうか?

Aベストアンサー

> > まあ、0などにすれば空きは見えなくはなりますが…
> え? できますか?
 できますよ。
ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

このようにして略記した場合は、四辺を一度に指定することが出来、
しらべてみたところ、Operaでは
margin:0; ← 上下左右0に指定
margin:0 1px; ← 上下0, 左右1pxに指定
margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
 という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

Qulタグやliタグの中でbrタグは使えない?

完成したサイトなのですが…。
Dreamweaverにて開いて一応チェックすると、
「タグbrはur内では使用できません」との表示がでて驚いています。

<li>~</li>だけで自動的になされる改行だと、詰まって見えるのです。
だから、

<ul style="padding-left: 00px;">
<li>~</li></br>
<li>~</li></br>
</ul>

のようにして処理しております。ただ、これってSEO的にマズい、ということなのでしょうか?
どうか、ご存知の方いましたら教えてください。

Aベストアンサー

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

<!ELEMENT UL - - (LI)+ -- unordered list -->
ulには、「li要素のみを一個以上もつ。」と書かれています。


<!ELEMENT LI - O (%flow;)* -- list item -->
li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.3.1 )を参照すること

したがって
<ul>
 <li>・・・<br>
 <li>・・・<br>
</ul>
とは書けます。(HTMLの場合)
その場合、ブラウザは
<ul>
 <li>・・・<br></li>
 <li>・・・<br></li>
</ul>
と解釈します。(XHTMLはこう書かないとならない)

★もっと、はるかに大事なこと
「<li>~</li>だけで自動的になされる改行だと、詰まって見えるので」<br>を入れるは、HTML的には最大の間違いです。こちらのほうがはるかに重要!!
 構造とプレゼンテーションは区別すること。デザインのためにHTMLを書いてはなりません。
 2.3.2 アクセス性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )

スタイルシートで、
ul li{margin-bottom:1em;}
だけでよい。

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

<!ELEMENT UL - - (LI)+ -- unordered list -->
ulには、「li要素のみを一個以上もつ。」と書かれています。


<!ELEMENT LI - O (%flow;)* -- list item -->
li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp...続きを読む

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 )を使うと、このあたりがよくわかると思います。


人気Q&Aランキング