/* CSS・スタイルシート質問スレッド【58th】*/
952 ：Name_Not_Found：2006/08/02(水) 02:57:03 ID:???
デザイナはわかってても客がバカだと非常に困る。
953 ：Name_Not_Found：2006/08/02(水) 03:14:57 ID:???
PDF渡してやれ
954 ：Name_Not_Found：2006/08/02(水) 04:03:45 ID:???
どうせ訳わかってないデザイナーに扱き使われてるスキルのないコーダーだろう、そう苛めてやるな。
955 ：Name_Not_Found：2006/08/02(水) 04:31:32 ID:???
煽りが必死だなぁ
956 ：Name_Not_Found：2006/08/02(水) 05:04:12 ID:???
935が煽り？
957 ：Name_Not_Found：2006/08/02(水) 16:27:40 ID:???
質問です。
ボックスの高さがページいっぱい100%のページを作りたいのですが、100%になりません。
テンプレにあったサイトを見て同じように試してみましたが変わりません。
以下ソース
ＣＳＳ：
* { margin:0px; padding:0px; }
html,body { height: 100%; }
#layout_body { width: 750px; height: 100%; margin: 0; }
#header { width:100%; }
#main { width:100%; }
#footer { clear: both; width: 100%; height: 15px; }
ＨＴＭＬ：
<div id="layout_body">
<div id="header">・・・</div>
<div id="main">・・・</div>
<div id="footer">・・・</div>
</div>
mainに入る内容によって伸びるようにしたいので、footerを絶対配置にはしたくないです。
でもページの下部分の余白はなくしたいので、高さを100%にする方法を探しているのですが、参考サイトのどのソースでも100%になりません。
IE7を使っていますが、IE以外(Firefox,Opera)でも同じように高さが100%になりません。
説明下手で申し訳ないですが、ご指導ください。
ボックスの高さがページいっぱい100%のページを作りたいのですが、100%になりません。
テンプレにあったサイトを見て同じように試してみましたが変わりません。
以下ソース
ＣＳＳ：
* { margin:0px; padding:0px; }
html,body { height: 100%; }
#layout_body { width: 750px; height: 100%; margin: 0; }
#header { width:100%; }
#main { width:100%; }
#footer { clear: both; width: 100%; height: 15px; }
ＨＴＭＬ：
<div id="layout_body">
<div id="header">・・・</div>
<div id="main">・・・</div>
<div id="footer">・・・</div>
</div>
mainに入る内容によって伸びるようにしたいので、footerを絶対配置にはしたくないです。
でもページの下部分の余白はなくしたいので、高さを100%にする方法を探しているのですが、参考サイトのどのソースでも100%になりません。
IE7を使っていますが、IE以外(Firefox,Opera)でも同じように高さが100%になりません。
説明下手で申し訳ないですが、ご指導ください。
958 ：Name_Not_Found：2006/08/02(水) 16:30:42 ID:???
960 ：Name_Not_Found：2006/08/02(水) 16:45:30 ID:???
まずそのままコピったのを試せ。
それで動かないならおまえのPCがおかしい。
それなら動くってのなら、おまえが単に間違えてるだけ。
それで動かないならおまえのPCがおかしい。
それなら動くってのなら、おまえが単に間違えてるだけ。
961 ：Name_Not_Found：2006/08/02(水) 17:32:02 ID:???
962 ：Name_Not_Found：2006/08/02(水) 18:44:18 ID:???
本当に適当だなｗｗｗ
963 ：Name_Not_Found：2006/08/02(水) 18:51:02 ID:???
まず、>>958を試したソースを出せ
964 ：Name_Not_Found：2006/08/02(水) 20:56:59 ID:???
すいません、positionのbottom、rightについて質問です
下記のようにコードを書いたんですが、
なぜかWin版IE6でだけ「ここも背景が赤のはず」というのが
思ったように表示されずボックスから飛び出てしまいます。
これを直そうとしたらどのようにするのがよいのでしょうか、
よろしくおねがいします。
.BlueBox{
background-color:#0000ff;
width: 500px;
}
.RedBox{
background-color:#ff0000;
position:relative;
}
.RedBox .RedBox_in{
position: absolute;
bottom: 0px;
right:0px;
}
<div class="BlueBox">
ここは背景が青
<div class="RedBox">
ここは背景が赤
<div class="RedBox_in">ここも背景が赤のはず</div>
</div>
ここは背景が青
</div>
下記のようにコードを書いたんですが、
なぜかWin版IE6でだけ「ここも背景が赤のはず」というのが
思ったように表示されずボックスから飛び出てしまいます。
これを直そうとしたらどのようにするのがよいのでしょうか、
よろしくおねがいします。
.BlueBox{
background-color:#0000ff;
width: 500px;
}
.RedBox{
background-color:#ff0000;
position:relative;
}
.RedBox .RedBox_in{
position: absolute;
bottom: 0px;
right:0px;
}
<div class="BlueBox">
ここは背景が青
<div class="RedBox">
ここは背景が赤
<div class="RedBox_in">ここも背景が赤のはず</div>
</div>
ここは背景が青
</div>
965 ：Name_Not_Found：2006/08/02(水) 21:22:29 ID:???
966 ：Name_Not_Found：2006/08/03(木) 10:32:01 ID:W64kODAF
<style>
<！--
TD{ font-size: 10pt; }
A{ font-size:10pt; font-weight: bold; color : #660000;}
B{ font-size:10pt; }
-->
</style>
この記述でＡタグやＢタグはフォントが小さくなるのですがＴＤタグだけ適用されません。
どこかおかしいでしょうか？
<！--
TD{ font-size: 10pt; }
A{ font-size:10pt; font-weight: bold; color : #660000;}
B{ font-size:10pt; }
-->
</style>
この記述でＡタグやＢタグはフォントが小さくなるのですがＴＤタグだけ適用されません。
どこかおかしいでしょうか？
とりあえず.RedBox .RedBox_inを
ただの.RedBox_inにしてみましたが効果ありませんでした
Win版のIE6ではpositionのbottomの挙動がおかしいってことなのですかね
ちょっと原因不明です
ただの.RedBox_inにしてみましたが効果ありませんでした
Win版のIE6ではpositionのbottomの挙動がおかしいってことなのですかね
ちょっと原因不明です
968 ：Name_Not_Found：2006/08/03(木) 11:26:51 ID:cQl6cz3m
<div id=content>
<h1>PageTitle</h1>
<div id=sideBox><h2>hogehoge</h2></div>
<div id=mainCol><h2>hogehoge</h2></div>
<div id=footer></div>
</div>
#content { width: 800px; }
#sideBox { width: 200px; padding-left: 50px; float: left; }
#mainCol { margin-left: 309px; }
#footer { clear: both; }
で２段組をしたいんですが、#sideBoxのh2要素の上下にわけのわからん隙間ができて頭が揃いません。
[ <h1>Pagetitle ]
<h2>
<h2>
[ footer ]
と、こんな感じになります。
段組部分の頭をそろえるにはどうしたらいいか教えてください。
Firefox基準で作っています。
<h1>PageTitle</h1>
<div id=sideBox><h2>hogehoge</h2></div>
<div id=mainCol><h2>hogehoge</h2></div>
<div id=footer></div>
</div>
#content { width: 800px; }
#sideBox { width: 200px; padding-left: 50px; float: left; }
#mainCol { margin-left: 309px; }
#footer { clear: both; }
で２段組をしたいんですが、#sideBoxのh2要素の上下にわけのわからん隙間ができて頭が揃いません。
[ <h1>Pagetitle ]
<h2>
<h2>
[ footer ]
と、こんな感じになります。
段組部分の頭をそろえるにはどうしたらいいか教えてください。
Firefox基準で作っています。
969 ：968：2006/08/03(木) 11:28:17 ID:cQl6cz3m
[ <h1>Pagetitle ]
<h2>
<h2>
[ footer ]
ぎゃくでした。こうなります。
<h2>
<h2>
[ footer ]
ぎゃくでした。こうなります。
>>958
原因がわかりました。
IE以外のブラウザでもレイアウトがセンターにくるように
<body>直後に<div align="center">を入れたのがダメだったようです。
おさがわせしました・・・。
IE以外のブラウザだとbody { text-align: center;}にしてもレイアウトのセンタリングをしてくれないんですね・・。
センタリングする方法って既出ですか？
原因がわかりました。
IE以外のブラウザでもレイアウトがセンターにくるように
<body>直後に<div align="center">を入れたのがダメだったようです。
おさがわせしました・・・。
IE以外のブラウザだとbody { text-align: center;}にしてもレイアウトのセンタリングをしてくれないんですね・・。
センタリングする方法って既出ですか？
971 ：Name_Not_Found：2006/08/03(木) 11:41:17 ID:???
散々既出。
IEの動作の方がおかしいだけ、
標準モードでmarginの左右をautoが定石
IEの動作の方がおかしいだけ、
標準モードでmarginの左右をautoが定石
連カキすみません。
過去レス見て自己解決しました。ド素人がスレを乱してしまいごめんなさいです。
親切にありがとうございました。
過去レス見て自己解決しました。ド素人がスレを乱してしまいごめんなさいです。
親切にありがとうございました。
973 ：Name_Not_Found：2006/08/03(木) 11:43:18 ID:???
>>971
わわ、即レスありがとうございました！
わわ、即レスありがとうございました！
975 ：Name_Not_Found：2006/08/03(木) 12:53:20 ID:???
>>968
* {
margin:0px;padding:0px;
}
これを入れたらならなかった。検証はしてない。
あとHTMLで作ってるならid値は大文字で、
XHTMLだとしたらid値はダブルクォーテーションで囲むこと。
* {
margin:0px;padding:0px;
}
これを入れたらならなかった。検証はしてない。
あとHTMLで作ってるならid値は大文字で、
XHTMLだとしたらid値はダブルクォーテーションで囲むこと。
976 ：Name_Not_Found：2006/08/03(木) 13:03:36 ID:???
質問です。
私も左右をfloatで分けた構築を行っているのですが。。
<div id="wrap">
<div id="left">左要素</div>
<div id="right">右要素</div>
<div id=foot>下部</div>
</div>
#wrap { width: 800px; }
#left { float: left; width: 545px; }
#right { float: right; width: 200px }
#foot { clear: both; margin 5px 0; padding: 0px }
といったソースで、各部分に5pxの余白をあけたいのですが
IE6とOpera8では、フッタにトップマージン5pxが確保されるのですが
ネスケ7.1とFirefoxだと5pxのマージンが確保されません。
対処法ってあるのでしょうか。
後、IE6だとfootをpadding: 0pxにしても余白があったりします。。
私も左右をfloatで分けた構築を行っているのですが。。
<div id="wrap">
<div id="left">左要素</div>
<div id="right">右要素</div>
<div id=foot>下部</div>
</div>
#wrap { width: 800px; }
#left { float: left; width: 545px; }
#right { float: right; width: 200px }
#foot { clear: both; margin 5px 0; padding: 0px }
といったソースで、各部分に5pxの余白をあけたいのですが
IE6とOpera8では、フッタにトップマージン5pxが確保されるのですが
ネスケ7.1とFirefoxだと5pxのマージンが確保されません。
対処法ってあるのでしょうか。
後、IE6だとfootをpadding: 0pxにしても余白があったりします。。
977 ：Name_Not_Found：2006/08/03(木) 13:10:07 ID:???
>>976
・・・・IEでもマージン確保されませんが・・・・
・・・・IEでもマージン確保されませんが・・・・
不備があったので申し訳ありません
> <div id=foot>下部</div>
<div id="foot">下部</div>
>>975
のレスを見て記入ミスに気づきました。
> 後、IE6だとfootをpadding: 0pxにしても余白があったりします。。
ここで示す余白はfoot内部のことを示してます。
紛らわしい文章でした。
> <div id=foot>下部</div>
<div id="foot">下部</div>
>>975
のレスを見て記入ミスに気づきました。
> 後、IE6だとfootをpadding: 0pxにしても余白があったりします。。
ここで示す余白はfoot内部のことを示してます。
紛らわしい文章でした。
>>977
再度申し訳ないです
IEでも確保されないのは私の記述ミスで
#foot { clear: both; margin 5px 0; padding: 0px }
marginに:がぬけてました。
再度申し訳ないです
IEでも確保されないのは私の記述ミスで
#foot { clear: both; margin 5px 0; padding: 0px }
marginに:がぬけてました。
980 ：Name_Not_Found：2006/08/03(木) 13:23:30 ID:???
>>979
それは恐らくマージンが取られない動作の方が正しい。
#leftにしろ#rightにしろfloatで浮動されてるから。
だからそれのどちらか長くなるほうのmargin-bottomに5pxを入れればおｋ。
それは恐らくマージンが取られない動作の方が正しい。
#leftにしろ#rightにしろfloatで浮動されてるから。
だからそれのどちらか長くなるほうのmargin-bottomに5pxを入れればおｋ。
981 ：Name_Not_Found：2006/08/03(木) 13:33:29 ID:???
＞HTMLで作ってるならid値は大文字で
そうなの？
そうなの？
982 ：Name_Not_Found：2006/08/03(木) 13:40:39 ID:???
983 ：Name_Not_Found：2006/08/03(木) 13:59:39 ID:???
俺様ルールかよw
984 ：Name_Not_Found：2006/08/03(木) 14:02:11 ID:???
986 ：Name_Not_Found：2006/08/03(木) 15:53:47 ID:???
>>982がバカだと言う事はわかりました。
987 ：Name_Not_Found：2006/08/03(木) 17:34:12 ID:???
bodyのクラスについて質問があります
スタイルシートを外部ファイルに設定して、
bodyをクラスで分けたんですがどうもネスケ(7.1)だと2番目のbodyが完全に無視されます。
外部css
body.left{
background-color: #0000FF;
color: #FFFF00;
}
body.right{
background-color: #FFFF00;
color: #0000FF;
}
とやった場合
body.rightのスタイルシートは完全に無視されます。
しかもどうもbodyだけでtableやtdなどはクラスにわけても表示されるんです。
bodyスタイルは1個しか設定できないのでしょうか？
だとしたとしても何故2番目のスタイルシートのみに反応するのかさっぱりわからなくて
困ってます、どなたかわかりませんか？
スタイルシートを外部ファイルに設定して、
bodyをクラスで分けたんですがどうもネスケ(7.1)だと2番目のbodyが完全に無視されます。
外部css
body.left{
background-color: #0000FF;
color: #FFFF00;
}
body.right{
background-color: #FFFF00;
color: #0000FF;
}
とやった場合
body.rightのスタイルシートは完全に無視されます。
しかもどうもbodyだけでtableやtdなどはクラスにわけても表示されるんです。
bodyスタイルは1個しか設定できないのでしょうか？
だとしたとしても何故2番目のスタイルシートのみに反応するのかさっぱりわからなくて
困ってます、どなたかわかりませんか？
988 ：Name_Not_Found：2006/08/03(木) 17:35:43 ID:???
補足です
body.left{
background-color: #0000FF;
color: #FFFF00;
}
body.right{
background-color: #FFFF00;
color: #0000FF;
}
を
body.right{
background-color: #FFFF00;
color: #0000FF;
}
body.left{
background-color: #0000FF;
color: #FFFF00;
}
とやった場合leftが表示されてrightが表示されません
body.left{
background-color: #0000FF;
color: #FFFF00;
}
body.right{
background-color: #FFFF00;
color: #0000FF;
}
を
body.right{
background-color: #FFFF00;
color: #0000FF;
}
body.left{
background-color: #0000FF;
color: #FFFF00;
}
とやった場合leftが表示されてrightが表示されません
989 ：Name_Not_Found：2006/08/03(木) 17:39:01 ID:W64kODAF
990 ：Name_Not_Found：2006/08/03(木) 17:53:25 ID:???
991 ：Name_Not_Found：2006/08/03(木) 18:11:42 ID:???
>>990
では私のパソコンがダメなんでしょうか…
実際
body.left{
background-color: #0000FF;
color: #FFFF00;
}
body.right{
background-color: #FFFF00;
color: #0000FF;
}
とした場合rightは表示されてleftは表示されないんです。
そして
body.right{
background-color: #FFFF00;
color: #0000FF;
}
body.left{
background-color: #0000FF;
color: #FFFF00;
}
と逆にした場合leftが表示されrightが表示されないんです。
どのページも全く一緒でコピペしてクラスを変えてもやっぱり
2番目のクラスだけ反応してくれないんです。
IEではちゃんと表示されるんですが、ネスケでは表示されません。
ページをアップした方が良いですかね・・・
では私のパソコンがダメなんでしょうか…
実際
body.left{
background-color: #0000FF;
color: #FFFF00;
}
body.right{
background-color: #FFFF00;
color: #0000FF;
}
とした場合rightは表示されてleftは表示されないんです。
そして
body.right{
background-color: #FFFF00;
color: #0000FF;
}
body.left{
background-color: #0000FF;
color: #FFFF00;
}
と逆にした場合leftが表示されrightが表示されないんです。
どのページも全く一緒でコピペしてクラスを変えてもやっぱり
2番目のクラスだけ反応してくれないんです。
IEではちゃんと表示されるんですが、ネスケでは表示されません。
ページをアップした方が良いですかね・・・
992 ：Name_Not_Found：2006/08/03(木) 18:16:23 ID:???
なんでソース出さないの？
993 ：Name_Not_Found：2006/08/03(木) 18:28:58 ID:???
http://ennui.in/Butterfly/css_test/new_page_1.htm
アップしてみました
ネスケで確認して見てください。
もし表示されたら私のパソコンがおかしいってことで…
アップしてみました
ネスケで確認して見てください。
もし表示されたら私のパソコンがおかしいってことで…
994 ：Name_Not_Found：2006/08/03(木) 19:18:14 ID:???
995 ：Name_Not_Found：2006/08/03(木) 19:19:24 ID:???
996 ：Name_Not_Found：2006/08/03(木) 19:22:29 ID:???
997 ：Name_Not_Found：2006/08/03(木) 19:24:10 ID:???
998 ：Name_Not_Found：2006/08/03(木) 19:28:09 ID:???
>>997
乙
乙
999 ：Name_Not_Found：2006/08/03(木) 19:34:02 ID:???
1000 ：Name_Not_Found：2006/08/03(木) 19:35:01 ID:???
1001 ：１００１：
このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。
もう書けないので、新しいスレッドを立ててくださいです。。。