/* CSS・スタイルシート質問スレッド【68th】 >>951 そのサイトより引用
>あなたが、htmlタグやCSSを全くあつかった事がない初心者ならば、
>このテンプレートを使用することは避けた方がいいかもしれません。
>正しい文法についてはgoogleなどを使用し、ご自分で学習してください。
何事も背伸びをするなってことです。
>>951 今時OS9で普通にネットしようなんて人がおかしい。
CSS切ったら見られるだけで御の字と思うべき。
そんな化石に構う必要は無い。
問題解決能力のない奴の見本回答だな。
セレクタで、クラス指定してない要素にのみ適用する方法ってあるんですか? E[class=""]とかは駄目でした。
>>958 基礎っていうかこういう人はもうテーブルレイアウトでいいんじゃないかな
CSS 3 Selectorsが使えるようになるのを待つしか…
CSSの段組についての質問です。初心者ですいません。 フレームのように左右分けた段組でどちらも高さを600pxにして 並べています。メニュー側はこれでいいのですが、メインのボックス側は ページによって高さが異なるので、下に空白が出来ます。 出来ればあまり空白を作りたくないのですが、これはそれぞれのページで 高さを設定しなければいけないのでしょうか? あるページでは多分高さがオーバーしてる状態だけど、表示はちゃんとされたので オーバーした分は自動で間伸びする形で高さが合うのかな・・・?と思いました。 ということは高さを一番最小限で指定すれば綺麗なレイアウトになるのかと思ったのですが その辺がそれでいいのかどうかよくわかりません。 とんちんかんな質問でしたらすいません。教えていただければ嬉しいです。
フレーム大盛況^^v
>>961 簡単にごまかす方法は、2つのdivを更にdivで囲んでメインdivと同じ背景色にする。
964 :
Name_Not_Found :2007/11/12(月) 00:13:35 ID:14axabIY
961です。
レスいただきありがとうございました。
結局
>>963 さんのおっしゃるような形でなんとかなりました。
そして再度確認なのですが、左右のボックスの高さの指定は必ず必要なのでしょうか?
とちらか片方だけ高さ指定してもレイアウトは崩れないのでしょうか?
いちおうやって、ブラウザで見たら崩れはなかったのですが、この方法でいいのか
わからなくて・・・すいません。
969 :
Name_Not_Found :2007/11/12(月) 13:27:07 ID:ymvEmLqh
質問させて下さい <div id="box-back"> <div id="box"> </div> </div> body { text-align: center; background-color: #0000FF; } #box-back { width: 100%; display: block; background-color: #FF0000; } #box { display: block; width: 820px; text-align: left; background-color: #FFFFFF; margin-right: auto; margin-left: auto; } #boxが中央に来るようにして、ブラウザサイズの横幅変化で左右の背景が伸びるような構造ですが この#boxの左側背景を#box-backの背景色、#boxの右側背景をbodyの背景色のようにする方法はありますか? #box-backの背景色 | #boxの領域 | bodyの背景色 ←このような感じで
>>969 box-backを取り除いてbodyの背景に
#box-backの背景色 | #boxの領域 | bodyの背景色
の画像を指定すればいいんじゃない?
いらないdivも消えるし。
背景画像は横2000px縦1px位で横位置をセンターにすれば画面が広がっても大丈夫。
>>970 やっぱりcssでじゃなく背景画像での制御が必要なんですね
参考になりました、ありがとうございました
上でもカラムの高さをそろえるのに-30000いくつとか指定してたけどナンセンスすぎ 普通1x好きな幅なpng作ったほうがよほどスマート
おもしろいと思ったけどな。 レガシーブラウザ云々したい人には向いてないけど。
974 :
Name_Not_Found :2007/11/12(月) 17:22:23 ID:G+Nz4I6a
>>972 いや、
>>964 はセンスありすぎです。
スタイルシートにたった3つの宣言を足すだけでいいのですから。
winのIE6、7、fxでは正常に表示されてるのに、 macのfx、safariでのみ、 float: left; の画像が、1px上にズレてしまいます。 これってどうすれば治るのでしょうか。。。
1pxズレると地球が滅びるんですね
UA毎にCSSを変えれない人多いな。
positionについて教えて下さい。
・table内にp(説明)とul(リンク)を入れてあります。
・tdにposition:relativeとvertical-align:bottom;を指定します。
・pにposition:absolute; top:0;を指定します。
このとき、基準となる包含ブロックはtdだと思うのですが、
Firefox2.0とOpera9.2でpがページトップに上がってしまいます。
この理由は何でしょうか。
よろしくお願いします。
http://tko.moeweb.net/test/ ↑テストで作ったものです。
テーブルレイアウトはやめれ。何だその糞ソースは。 potisionについておさらいして来い。
980 :
975 :2007/11/12(月) 21:00:12 ID:???
981 :
Name_Not_Found :2007/11/12(月) 21:02:30 ID:RuLk8VAs
#wrapper ├#header ├#body |├#contents |└#menu └#footer というdivで基本構成を作っています。 #wrapperは780px、#contentsと#menuは530pxと250pxで指定しています。 #contentsをfloat:rightで右側へ、#menuをfloat:leftで左右に段組表示しています。 floatは#footerにclear:bothと入れて解除しています。 ここで、#footerに背景画像を指定すると、 WinIE6にて、#footerの位置を飛び出して背景画像が表示されたりして、表示がバグります。 clearを指定したボックスでは背景画像がバグる、みたいなIEのバグがあるのでしょうか…? 解決法などありましたら教えて下さい。
983 :
981 :2007/11/12(月) 21:26:37 ID:RuLk8VAs
>>982 marginが2倍になるバグは知っていたので、
>>981 に書いた基本構成のdivには、marginは一切指定してないです。
#wrapper : width:780px
#header : 未指定
#body : 未指定
#contents : width:530px; float:right
#menu : width:250px; float:left
#footer : clear:both; background:url("footer.png");
指定してあるスタイルはこれだけです。
#footer に display:inline; を入れたら変わりますかね?
WinIE6で表示確認できる環境が現在自宅にないので
修正してもすぐに確認できない事も困ってますww
>>978 >基準となる包含ブロックはtd
違う。positioin:absoluteが指定された要素の包含ブロックは位置決めされた
直近の祖先要素。
985 :
978 :2007/11/12(月) 21:34:54 ID:BPPtycxu
>979 これテーブルレイアウトですか? 番組表みたいになるものなので、テーブルなんですが。 potisionについておさらいして、わからなかったのです。 979さん以外でもヒントを下さい。
987 :
978 :2007/11/12(月) 21:43:44 ID:BPPtycxu
>984さん ありがとうございます。 <td>←relativeで位置指定している <p>←potision:absolute この場合の位置決めされた直近の祖先要素はtdではないとすると、 何になるのでしょうか。
これをテープルレイアウトと呼ばずに何と呼ぶのだろう。 表なら素直に表にすりゃまだマシなものを。 ここはcssスレ。マトモなソース書けるようになってから質問しろボケ。
>988 罵倒でスレ埋める?
いいんじゃね
そうだよね、せっかくスタイルシートでやろうと思ってるのならレイアウトでテーブルを使うのは 止めためた方がいい。 というか表以外にテーブルをつかわなきゃいけないと思うことがあるんだろうか。 XHTML 1.0 !とか銘打ってるくせに <BODY> <TABLE> とかぞっとする
993 :
978 :2007/11/12(月) 22:05:11 ID:BPPtycxu
>988 すみません。 つまり純然たる表でなければテーブルレイアウトなのですね。 わかりました。 しかし、説明部分が長くなっても リンク部分が何個になっても下揃えというと、 これしか方法は思いつかなかったのです。 >989さん ? 984さんではないですよね? tdが基準とすると、なぜ上に上がってしまうのでしょうか?
994 :
989 :2007/11/12(月) 22:08:53 ID:???
>>993 あんまり罵倒がうざいから調べ中だったんだけど
スレも終わりそうなので書くけど
FirefoxとかOperaだと
table-rowとかtable-cellとかのボックスが包含ブロックとされないみたいだ
仕様(2/2.1)で表内の包含ブロックの例外が書いてあるかと思ったけど見つけられなかった
995 :
987 :2007/11/12(月) 22:11:36 ID:BPPtycxu
>989さん ありがとうございます! Firefoxの仕様探してきます! >みなさん お邪魔しました。 どうぞ罵倒を続けて下さい。
>>993 あれですよ。
うだうだう五月蝿いやつ多いけど。
一般人までマイクロソフトにならなくてもいいって事ですよ。
決められたことや、その方がいいって言われてる事をみんなで推進したほうがいいし
結果として将来みんなのためになる。
tableに固執する頑固さ、最小ソースも出せない愚かさ、最後は捨てゼリフ。 ちゃんとした回答はあるが、こんな厨に教える気もない。
998 :
989 :2007/11/12(月) 22:20:52 ID:???
>>995 ごめ、書いてから2.1のposition:relativeの項目見たら
The effect of 'position:relative' on table-row-group, table-header-group,
table-footer-group, table-row, table-column-group, table-column, table-cell,
and table-caption elements is undefined.
(
http://www.w3.org/TR/CSS21/visuren.html#propdef-position )
ってかいてあったわ。つまり定義されてないので実装依存ってことだな
,,-‐''""''ー--,-
>>1000 遅いんだよバカ、とっとと次スレ立てろ(プゲラ
.|""" ||
>>999 何が1000だ、寝言は寝てから言え
::::::::::::::::::::::::::: | げ と .||
>>998 体臭が回線を通じて匂ってきてるぞ(w
::::::::::::::::::::::::::::::: | 1000 っ .||
>>997 糞レスしてる暇あったら今日の寝床探せ
:::::::::::::::::::::::::::::::::::::::::::::::| ,ノ""""'||
>>996 お前はハンバーグの材料な
:::::::::::::::::::::::::::::::::: | ,/""" .|| .
>>995 深夜に空き缶拾い集める癖を直せ
:::::::::::::::::::::::::::::::::: """" .|| .
>>994 以下はiriaからやりなおせ
/ )
/ /||
/ /.
( ( /⌒ヽ
ヽ ヽ⊂ ̄ ̄ ̄⊃ <ぐわっはっはっは!!!!
\\(´∀` ) n Web制作は永遠に不滅だ!!!
ハ \ ( E)
| /ヽ ヽ_//
http://pc11.2ch.net/hp/ >>1001 早く次スレ立てろよ、バカ
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。