過去ログ表示


過去ログ 82 を表示

トピック内全 8 記事中の 1 〜 8 番目を表示
[ 最新記事及び返信フォームをトピックトップへ ]
このトピックの全ページ / [0]

CSSのfloat
(#12550) このトピック中1番目の投稿
(環境: WinXP/Mozilla1.7)

CSSによる段組レイアウトをしたいと思っています。

IEではうまくいったのですが、Mozillaの表示がうまくいきません。
以下、HTMLソースです。
--------------------------------------------------------ここから
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>無題ドキュメント</title>

<style type="text/css">
body {
margin: 0px;
padding: 0px;
text-align: center;
background-color: #C8DBD8;
}
.bodyWrapper {
background-color: #FFFF00;
text-align: left;
width: 400px;
border: 10px solid #666666;
}
.header {
margin: 0px;
padding: 0px;
}
.main {
float: none;
width: 400px;
background-color: #00FFFF;
}
.footer {
float: none;
width: 400px;
background-color: #0000FF;
}
.mainLeft {
width: 100px;
background-color: #FF0000;
float: left;
}
.mainRight {
width: 300px;
background-color: #FFFFFF;
float: right;
}
</style>
</head>

<body>
<div class="bodyWrapper">
<div class="header">
<p>top</p>
<p>top</p>
<p>top</p>
<p>top</p>
<p>top</p>
<p>top</p>
<p>top</p>
</div>
<div class="main">
<div class="mainLeft">
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
</div>
<div class="mainRight">
<p>mainLeft</p>
</div>
</div>
<div class="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
------------------------------------------------------ここまで

IE によるレイアウト表示
http://www.geocities.jp/tao_0077/renderByIE.png
Mozilla によるレイアウト表示
http://www.geocities.jp/tao_0077/renderByMozilla.png

赤色のブロックが親のブロックを突き抜けてしまいます(このブロックの大きさに応じて親のブロックも拡大させたい)。また、body のスタイルに割り付けた text-align が直下のブロックに適用されていません。

なんとか Mozilla も対応したいんですが、この対処法をご存知の方、よろしくお願いします。

Re[1]: CSSのfloat
(#12556) このトピック中2番目の投稿
(環境: Win2000/Firefox1.0)

><style type="text/css">

></style>

私はまだhtmlを勉強し始めたばかりで詳しいことは判りませんが、
上の二つは不要ではないでしょうか?

Re[1]: CSSのfloat
(#12557) このトピック中3番目の投稿
(環境: WinXP/Firefox1.0)

footerの前に
<div style="clear:both;"></div>
(<>は半角で)
を、
style定義の中の.bodyWrapperのところに
margin-right: auto;
margin-left: auto;
を入れてみてください。

Re[2]: CSSのfloat
(#12559) このトピック中4番目の投稿
(環境: WinXP/Firefox1.0)

> ><style type="text/css">
>
> ></style>
>
> 私はまだhtmlを勉強し始めたばかりで詳しいことは判りませんが、
> 上の二つは不要ではないでしょうか?

外部cssではないので必要です。

Re[3]: CSSのfloat
(#12560) このトピック中5番目の投稿
(環境: Win2000/Firefox1.0)

> > ><style type="text/css">
>>
>>></style>
>>
>>私はまだhtmlを勉強し始めたばかりで詳しいことは判りませんが、
>>上の二つは不要ではないでしょうか?
>
> 外部cssではないので必要です。

そうですね。すみません。
書き込んでから気づきました。

Re[2]: CSSのfloat
(#12563) このトピック中6番目の投稿
(環境: Win98/Firefox1.0)

下記もご覧ください

ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

heightプロパティの注意点〜内容がfloat要素の場合
http://www.mozilla.gr.jp/standards/webtips0021.html

Re[3]: CSSのfloat
(#12565) このトピック中7番目の投稿
(環境: WinXP/Mozilla1.7)

K さん、 dai さん、 qaz さん、フォローありがとうございます。

> footerの前に
> <div style="clear:both;"></div>
>(<>は半角で)
> を、
> style定義の中の.bodyWrapperのところに
> margin-right: auto;
> margin-left: auto;
> を入れてみてください。

かなりやろうとする段組に近づきました。ありがとうございます。とくにブロックに対するセンタリングは非常に勉強になりました。

段組をCSSで実現することって結構難しいですね。検索かけていたらちょうどこういうページ
http://www.pixy.cz/blogg/clanky/css-3col-layout/
を見つけてしまいました。main の高さも左右のどちらか高いほうにあわせたかったのでこちらも参考にして作っていこうと思います。
済!
Re[1]: CSSのfloat
(#12567) このトピック中8番目の投稿
(環境: Win98/Firefox1.0)

自分も同じくfloatの互換性で悩んでいました。
参考にさせていただきます。
らるごさんのソースちょっといじらせていただいたので
まだ完全にIEと全く同じ表示にはなりませんが
せっかくなので貼らせて頂きます。

====================================================================

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>無題ドキュメント</title>

<style type="text/css">
body {
margin: 0;
padding: 0px;
background-color: #C8DBD8;
text-align: center;
}
.bodyWrapper {
margin: 0 auto 0 auto;
background-color: #FFFF00;
text-align: left;
width: 400px;
border: 10px solid #666666;
}
.header {
margin: 0px;
padding: 0px;
}
.main {
float: left;
width: 400px;
background-color: #00FFFF;
}
.mainLeft {
width: 100px;
background-color: #FF0000;
float: left;
}
.mainRight {
width: 300px;
background-color: #FFFFFF;
float: right;
}
.footer {
clear:both;
float: left;
width: 400px;
background-color: #0000FF;
}
</style>
</head>

<body>

<div class="bodyWrapper">

<div class="header">
<p>top</p>
<p>top</p>
<p>top</p>
<p>top</p>
<p>top</p>
<p>top</p>
<p>top</p>
</div>

<div class="main">

<div class="mainLeft">
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
</div>

<div class="mainRight">
<p>mainLeft</p>
</div>
</div>

<div class="footer">
<p>footer</p>
</div>
<BR style="clear:both">
</div>



</body>
</html>


====================================================================


このトピックの全ページ / [0]

返信不可


- Child Tree -