TABLEデザインのサイトをCSSでどこまで再現できるか

そのやり方では、リキッドレイアウトにするのは不可能だな。
というか、リキッドレイアウトでそれをやるのは無理。

左に太いボーダーラインを引いたボックスAの中にボックスBを入れる（入れ子）。
ボックスBにマイナスマージンを入れて、ボックスAの太いボーダーラインに合わせる。
ボックスBは透過にし、ボックスAのボーダーライン色を背景色にする。

ってしたけど、うまくいかなかった記憶があるな。

>>681
どこまで可変を望むかによるが、>>680のやり方でも、片方を固定、片方を可変にできる。
例えば、サイドバーの様に比較的幅が狭い方を固定にし、幅広のコンテンツ部を可変にするというようなやり方。
これならブラウザサイズを縮めようが、印刷スタイルとして縦に印刷しようが、許容範囲内だ。コンテンツがあふれ出すということは無い。大抵の場合はこれでOK。

それと、左右完全リキッドの場合だが...

不可能じゃないぞ。

ちなみに俺はできる。この機会にCSSのプロパティ全部見直してみたらいかが？
それと、普段使わないような値にも気をつけながらね。

CSSはパズルだなｗ

ほんとうにごめんなさい。
http://www.geocities.co.jp/hio_annex/float_ex2/

すみません、並列に並べだ３つのdivのブロックを分割したいんですが、
一番右のブロックの横の長さは150px。
残りの二つの横の長さを3:7に分けるという分割方法はあるのでしょうか？

埋もれてるくさいので、一応age

すみません、paddingとか消したらできました。自己解決です。

ボックスを3つ4つ以上横に並べるのって不可能？

可能。

捕手

hoshu

商品の一覧ページなど、１つのパターンのブロックを一定数表示させるページのレイアウトで質問です。
htmlを弄らず、縦並びレイアウトと横並びレイアウトをCSSで可変にしたいのです。
=-=-=-=-=-=-=-=-=-=-=-
［縦並びレイアウト］
・A
・B
・C
・D
・E
・F
=-=-=-=-=-=-=-=-=-=-=-
［横並びレイアウト］
Ａ│Ｂ│Ｃ
─┼─┼─
Ｄ│Ｅ│Ｆ
=-=-=-=-=-=-=-=-=-=-=-
いまの所、全体を大きな枠（620px）で囲んで
その中にdivで括った項目を記述しています。
で、縦はそのままで問題なし。
横並びにする際は中の項目を横幅固定（200px）にしてfloar:left;
ただこれだとA〜Fの高さが違うと綺麗に揃わない…。
高さを固定すれば揃うけど、なるべく高さは可変にしたいのです。
今まではテーブルに頼っていたのですが、これをCSSで再現するには
どうすればいいでしょうか？
知恵をお借りしたいです。

スレタイも1も読めない無能にはどんな方法でも無理。

http://syuresangogo.blog77.fc2.com/blog-entry-47.html#more
ここ読めば分かる

ttp://hinoki.sakura.ne.jp/~okada/table/guest-i.html

沖縄県の方へ（命に関わる注意事項です）

沖縄県での選挙ですが、どうか民主党だけは避けてください。県民の生命に関わる可能性があります。
民主党の最大の公約は一国二制度（※）ですが、一度「一国二制度　沖縄　三千万」等で検索をお願いします。
この際、民主党のＨＰで調べても良いです。以下の注釈↓と矛盾することは書いてないはずですから…

※一国二制度
　簡単に言えば沖縄を中国と日本の共有物にし、そこに3000万人の中国人を入植させます。
　（つまり沖縄人口の 96% を中国人にして、実質、沖縄を中国人の居住地とします。）
　さらに「自主」の名の下、沖縄で有事が起きても自衛隊は干渉できません。
　3000万人の中国人が、少数派となった130万人の日本人に何をしても、です。
　そして反日教育を受けた中国人の反日感情の強さは、ほとんどの日本人の理解を超えるものです。

今回の選挙で民主党が勝った場合、「自主」「発展」を連呼しつつ段階的に進めていくことになります。
自主と言っても、自主を認めるのが「住人の96%が中国人となった」後だということに気をつけてください。
発展と言っても、新沖縄の少数派となった「少数民族日本人」の発展ではないことに気をつけてください。

web2.0とか言われてるけど
構造はテーブルでもいいと思う

上に同じ

>>698
Web2.0とCSSレイアウトは全く関係ないだろｗ

>>698
Web2.0とCSSレイアウトは全く関係ないだろｗ

もう疲れた・・・
<table>
<tr><td nowrap>名前1</td><td>説明1</td></tr>
<tr><td nowrap>名前2</td><td>説明2</td></tr>
</table>
で名前1や名前2の列幅を指定しなくても内容によって可変幅かつ
(テーブルなら当然だが)名前1と名前2の幅を揃える。
こんなことがCSSじゃ無理だと悟った。

ttp://useyan.x0.com/s/html/css_sample/dl-table.html
がいちばん近い(枠線なしね)が、項目名の幅固定なので
これなら別にDIVでもええやんって感じ。

あばよ!! おれはTABLE使いに戻ることにしたよ。

そこはテーブルでいいだろ・・・

いや、実際には名前と説明じゃなくて
DL,DT,DDがいちばん適当なんだよ。

それぞれ一応独立しているというか
ヘッダーを付けるのがへんあというか

あげあげ

http://okwave.jp/qa2189040.html
この質問にあるような
「複数行の文字を、画像の縦方向の中心に揃えたい」っていうのは
cssではどうやったらできるの？悩んだ挙句、結局table組んじまったよ。
cssってこんな単純なレイアウトすらできないのか？
まさかそんなはずないよな？俺が無能だからできないだよな？

こんなんでどうだい？
モダンブラウザでdisplay: table;、古いブラウザでinline & zoom

IE6以下でどこまでのバージョンで大丈夫か分からんが
paddingとかmarginとか細かいことは各々やってくれ
IE6以下のハックもこのままだとvalidator通らんかも知れん
スターハックとかで分ければそれも何とかなるはず

【CSS】
div.casette {width: 300px; display: table; border: 1px solid #CCCCCC;}
div.casette img , div.casette p {
display: table-cell;
/display: inline; /* ハックIE6以下 */
/zoom: 1; /* ハックIE6以下 */
vertical-align: middle;
}

【HTML】
<div class="casette">
<img src="画像ファイル" width="100" height="100" />
<p>中央揃えの文字<br />複数行入れるよ</p>
</div>

ーーーーーーーーーーーーーーーーー
| | | |
ーーーーーーーーーーーーーーーーー
| | | |
ーーーーーーーーーーーーーーーーー
| | | |
ーーーーーーーーーーーーーーーーー

↑上の図みたく列の幅をバラバラに作ることって実現可能でしょうか？
いろいろやりかたを探しているんですがわかりません。。

日本語でおＫ

一つのテーブルで各行ごとにセル幅を定義することは可能かって意味じゃないかね
そう言われてみると無理だな
むしろ無理でもいいから列のコントロールが出来てほしい

>>711
すみません、図が違ってました。
おっしゃるとおり↓こういった感じです。

ーーーーーーーーーーーーーーーーー
| 　　　　　 |　　　 |　　　　 　　　　　　　　　　|
ーーーーーーーーーーーーーーーーー
| 　　　　　　　| 　　　　　　　　|　　　　　　　　 |
ーーーーーーーーーーーーーーーーー
| 　　　　|　　　　　　　　　　　　　　　 | 　　　|
ーーーーーーーーーーーーーーーーー

無理そうですか・・・。

というか思い切り
ス　レ　違　い

マジレスすると一行ずつ別のテーブルにして入れ子にしてやればできる

ここなら知っている方がいるかもしれないと思って。
失礼しました。

スレチなのに解答してくれた人に礼もナシか

>>715
すみませーん（＾＾；
ご回答くださったみなさん
ありがとうございました！

まあ、お遊びなんだろうけど。
CSSはパソコンのCPUも今よりは非力で、インターネット回線も細々としていたころにhtmlソースを少なくして、閲覧を容易にする為に考えだされたんだな。
だから、tableをCSSで表現するとソースが大きくなるので、主客転倒になるね。

>>717
tableをcssに直すことと
tableデザインをcssデザインに直すこと
この二つが決定的に違うことを学んでからレスしような

tableをCSSで表現するとソースが大きくなるｗ

htmlソースを少なくすると閲覧が容易になるんですね、分かります

>>712
.unko{
width:10px;height:1px;border:0;margin:0; /*うんこ*/
}
<table>
<tr>
<td class="unko"></td>
　　　 <td class="unko"></td>
<td class="unko"></td> ×１０個　　計　500px
<td class="unko"></td>
<td class="unko"></td>
</tr>
<tr>
<td colspan="5"></td><td colspan="15"></td><td colspan="10"></td>
<td colspan="15"></td><td colspan="5"></td>
</tr>
<tr>
<td colspan="15"></td><td colspan="5"></td><td colspan="10"></td>
<td colspan="7"></td><td colspan="13"></td>
</tr>
<tr>
<td colspan="8"></td><td colspan="7"></td><td colspan="13"></td>
<td colspan="14"></td><td colspan="8"></td>
</tr>
<tr>
<td class="unko"></td>
　　　 <td class="unko"></td>
<td class="unko"></td> ×１０個　　(見た目的に追加）
<td class="unko"></td>
<td class="unko"></td>
</tr>
</table>

>>721
そりゃダメだよw

IE7 用css
IE8 用css
Chrome 用css
Firefox 用css
Safari 用css
Opera 9.5 用css
Opera 8.65 用css
ネットフロント 用css
wasabi 用css
Skyfire 用css

なんつーか複雑になればなるほどテーブルの方が良くなってくよね。
CSSにしても複雑さが1段階上がるごとにめちゃめちゃソースが肥大化して
段々得が無くなってくる。

正直、スタイルシートって使いにくい
全然直感的じゃ無い

誰もソースなんて見ないんだから
方法論であるCSSなんてどうでも良いや

やっぱり手部うmおいい

みんなくわしいね

　　∧＿∧
　 （　・∀・） 　　 　 |　| ｶﾞｶﾞｯ
　と　　　　） 　　 　 |　|
　　 Ｙ　/ノ 　　　　 .人
　　　 /　） .人　　 < 　>_∧∩
　 ＿/し'　< 　>_∧∩｀Д´）/
　（＿フ彡　Ｖ｀Д´）/　　 / ←>>147
　　　　　　　　 　 　/ ←>>325

＞大阪府三島郡島本町の小学校や中学校は、暴力イジメ学校や。
島本町の学校でいじめ・暴力・脅迫・恐喝などを受け続けて、心も身体も壊されて廃人同様になってしもうた僕が言うんやから、
まちがいないで。精神病院へ行っても、ちっとも良うならへん。教師も校長も、暴力やいじめがあっても見て見ぬフリ。
そればかりか、イジメに加担する教師もおった。 誰かがイジメを苦にして自殺しても、「本校にイジメは
なかった」と言うて逃げるんやろうなあ。
島本町の学校の関係者は、僕を捜し出して口封じをするな

＞「口封じ」なんかしません。どうぞ、気が済むまでお書き込み下さい。

＞島本町って町は、暴力といじめの巣窟なんだな


　島本町は日本の恥！島本町は日本の迷惑！

667/709
記念カキコ