/* CSS･スタイルシート質問スレッド【35】 */

ちなみにJSはJenkin Sushiの略ね、一応。

>>855
不覚にもﾜﾛﾀ

>>855
今ジェンキン寿司 WEB製作支店見てたとこだったから吹いたじゃねーか

質問です。
<div id='a' style='height: auto'>
<div id='aa'
style='position: absolute;
left: 0;
height: 100px;
width: 100px;'></div>
<div id='ab'
style='position: absolute;
left: 100px;
height: 50px;
width: 100px;'></div>
</div>
とした場合、`div#aのheight: auto`は通常フローの子供要素に依存するみたいですが。
これを、浮動ボックスや絶対配置のボックスの子供要素を持つ包含ボックスが
子供要素の高さにあわせて変化するようなテクニックとかありますか？

>>858
結論から言えば、無い。真っ当な方法では。

浮動ボックスの場合は
div#a:after { clear: both; }
で行けるかも知れないが、IEが対応していない。
div#a:afterに相当する要素を埋め込んでおくか、
JSで生成する方法はある。

絶対配置ボックスの場合は
そもそも他に何の影響も与えないので無理。

そのソースを見る限りではどちらも
heightを固定しているようなので、そこから逆算して
div#aにheightを指定したらいいと思うが
多分通常フローの要素がはみ出した時には
伸びて欲しいんだろう。
min-heightと言う属性は用意されているが
これもIEが未対応。min-heightに相当する処理を
JSで代替するしか無い。

＃ div#a:after { clear:both }に関してはFAQに入れても良さげだが。

普通は<br style="clear: both">だっけ？
FAQのQ4にあるじゃん

orz

すみません、確認せずに書き込んでしまいました。
CSSのみでは絶対配置ボックスの包含は無理みたいなので、浮動ボックスを使用することにします。
div#a:after{ clear: both}のほうがよけいなタグが入らないぶんきれいですが、IEが対応していないなら無理ですね。
<br style=''clear: both'>で回避します。
ありがとうございます。

なんだかわざわざ難しくしてるみたい。

結局IEか・・

またieかよ。。

質問なんですが

画像にリンクで触ったら凹むスタイルシートを適用させて
文字リンクには触ったら下に線を入れるようにしたいのですが
出来ますか？
よろしくお願いします

できます

>867
宜しかったら教えてくれませんか？

>>868

>>1
■■■■■　質問のしかた　■■■■■
●基礎は解説サイト（>>4・かなりわかりやすい）で勉強してください。

質問なんですが・・・
サイトチェックでネットスケープ4.7で確認すると文字が見えなくなります。
レイアウトもくずれます。
ちなみにWin、MACとも最新のネットスケープ、IEでは見れます。
リンキングスタイルシートで文字などは指定しています。
レイアウトはtableで行っています。
原因はなんなんでしょうか？

>>870
原因はズバリNN4.7でしょう

>>870
tableタグの閉じ忘れとか。そもそもテーブルレイアウトは（ｒｙ
あと>871の言ってることも正しい。

>>871
ありがとうございます。
そうなんですか？
実は就活用に作ったんでNN4.7で見れないとまずいんですが、
なにか、解決策はないんですかね？

>>873
見れないとまずいと思ってる君の方がまずいぞ。

>>874
学校の先生に就活用はNN4.7に対応してないと使えないと言われてたんですが、
どうなんでしょう？まずくないんですか？
就活で問題なければ僕的にはいいんですけど。
>>872
tableタグはチェックしてるんですが、ミスはないようなんですよ。
やはりtableでのレイアウトは今後やめようかな。

>>870
あのね、ネスケ４が駄目ブラウザで、CSS対応がバグだらけなのは有名なのよ。
@importやmedia属性などでNN4除けをしてスタイルシート非適用にできるよ。

こう書いてあるルールがあるんだけど、
この 0px って意味あるのかな？
どうせなら二つ書かないと意味ないような…。

background: url(back.gif) no-repeat 0px bottom;

ルール？

観覧に支障が出るようなブラウザを就活に使わせる
その先生にも問題があるような…

>>877
background-position の2値目の省略は50%として扱う。
それを狙ってやってるんだろうから別にいいじゃん。
何か問題でも？

>>876
ありがとうございます。
試してみます。

> 実は就活用に作ったんでNN4.7で見れないとまずいんですが、
意味がわからん。
採用担当者がNNマニアなので4.7で崩れるとネチネチ文句言ってくるとか？

学校の先生とやらに「採用担当者はNN4.xでもチェックする。」と吹き込まれたんだと思うけど、
>>875自身が、NN4.xを切り捨てても良い明白な理由を持っていないなら、
素直に先生に従っておいたほうがいいんじゃない？

テーブルレイアウトがどう評価されるかは、その先生は何も言わないの？

テーブルレイアウトが未だに多勢って現実くらい受け止めるべきかと

>>884
誰に言ってるの？

うちはユニークユーザが２万くらいでＮ４系が0.７％って所。
単純計算で140人くらいだから会社的にもサポートから外そうって動きがある。
ただ、サポートは外しても閲覧に支障はないようにしようってのが前提。


ただ、Ｎ４でサイト回ってみてもまだまだ同じ見た目で見れるようにしてる所が多い気がする。
コンテンツしか見れない大手サイトだとマクロくらいしかしらないけど他にどこがあるかな？

リストの項目に
リンクを貼った言葉とdivで括った言葉を作ってみたら
ブラウザの表示では勝手に改行されてしまいました。
この改行を止めさせたいのですがどうしたらいいのでしょうか？
よろしくお願いします。

a {text-decoration : none ;}
li {list-style : outside none ;}
div.xxx {font-size : 70%;color : black;}

<ol>
<li><a href="xx.html"><div class="xxx">・</div>言葉1<div class="xxx">言葉2</div></a>
<li><a href="xx.html"><div class="xxx">・</div>言葉1<div class="xxx">言葉2</div></a>
<li><a href="xx.html"><div class="xxx">・</div>言葉1<div class="xxx">言葉2</div></a>
</ol>

［ブラウザMacIE5.0表示］
・
言葉1
言葉2
・
言葉1
言葉2
・
言葉1
言葉2

［狙っている表示］
・言葉1言葉2
・言葉1言葉2
・言葉1言葉2

>>887
divじゃなくてspanに汁

間違えました。
<div class="xxx">・</div>と
<div class="xxx">言葉2</div>は別のクラスで
それぞれに違うスタイルをしています。

>>887
oioi
本気でいってるのか？おれは釣られたのか？

>>888
ゾロ目の方、早速ありがとうございます。
早速やってみたところ
なおりました！ありがとうございます。
もう一回出直してきます。

>>890
すみません。マジです。
ごめんなさい。

>>887
アンタ回りくどい事をやるね……

li {list-style-type:square;}

<ol>
<li><a href="xx.html">言葉1言葉2</a>
<li><a href="xx.html">言葉1言葉2</a>
<li><a href="xx.html">言葉1言葉2</a>
</ol>

これでいいだろ？

ついでに言うと、もし言葉1の説明を言葉2がしているのなら
これはdl/dt/ddでマークアップした方が自然だし今も後も楽。

>>880

その解釈はわからないです。

background: url(back.gif) no-repeat 0px bottom;
は
のうち、positionは
0px bottom;
になるよね。
これはどういう解釈になるのかな？
キーワードと長さの組み合わせって無意味かと思って。

>>892
ありがとうございます。
えっとですね、
ポインタが乗った時に色を変える演出をしたかったので
list-style-typeはnoneにして
:hoverで指定しようと思っていたのです。

…ひょっとして、行頭マークの色って:hoverで変えられるとか…？

「ついでに〜」はその通りで
言葉2で言葉1の説明をさせるつもりです…。
実はdl/dt/ddって何だか良く分かっていないんです。
今改めてとほほさんトコの説明読んでいるんですけど
やっぱり今日も？？？です…。
＞自然だし今も後も楽。
とおっしゃるのでガムバって理解します。全然わかんないけど…。

たびたびすいません。>>892さんのアドバイスから

<dl>
<dt><a href="xx.html">コーラ <dd>［炭酸］</a>
<dt><a href="xx.html">カフェオレ<dd>［乳飲料］</a>
<dt><a href="xx.html">緑茶<dd>［清涼飲料］</a>
</dl>
と直しました。（分かりやすいように言葉も入れてみました）

【表示】
コーラ
　　　［炭酸］
カフェオレ
　　　［乳飲料］
緑茶
　　　［清涼飲料］

これを以下のようにしたいのですが、そうすればいいのでしょうか？
ダメ元で <NOBR>で挟んでみても意味がありませんでした…。

【狙っている表示】
コーラ ［炭酸］
カフェオレ［乳飲料］
緑茶［清涼飲料］

>>895
ええと、正直CSSがどうとか以前に
HTMLから勉強やり直した方がいいと思いますけど。

とはいっても「とほほ」はとほほ…だからなぁ。

>>894
HTML の <dl> <dt> <dd> についてしっかり理解すべし。
それから CSS の display プロパティの説明をよく見とけよ。

行頭のマークの色は結論から言えば変えられる。
list-style-image を使って、 :hover の時にlist-style-image を上書きすればいい。
Mozilla や Opera ならこれだけで簡単に実現できる。
……が、IEに対応させようとすると面倒臭い事になる。
（IE は <a> 以外に:hoverを指定しても無視するから <a> に display:list-item を使い
<li> や <dt> にCSSを指定する必要が出てくる）

>>895
上の流れは全く読んでないが、それは

(HTML)
<dl>
<dt><a href="xx.html">コーラ</a></dt>
<dd>［炭酸］</dt>
<dt><a href="xx.html">カフェオレ</a></dt>
<dd>［乳飲料］</dt>
<dt><a href="xx.html">緑茶</a></dt>
<dd>［清涼飲料］</dt>
</dl>

(CSS)
dt
{float:left;
clear:left;
width:5em;
}

て感じでどうかな

>>896
か、返す言葉もございません。
やっぱりでもとほほはとほほなんですか？
ここでもそうですが、推奨する人がいないので
きっとなにかまずいんだろうなと思いつつも
googleでほとんど最初に出てくるのでついつい使ってしまうんです。
もっと勉強します。

>>897
><dl> <dt> <dd> 　display プロパティ
はい。
>list-style-image
画像を用いる方向になりますか。
できれば画像は使わない範囲でと思っていたのですが
それに固執してもいい方向に行きそうもないみたいなので
考え直します。

>>898
早速試したところ、成功しました。ありがとうございます。
でも、他の指定したものが上手く表示されなくなってしまいました…。

ちょっと最初から一つずつ書き直してみます。

>>898
<dd>を</dt>で閉じちゃダメ！

…多分コピペミスだろうけど。

>>900
うお、今気が付いた
偉そうに「て感じでどうかな」とか言っときながら最悪だな俺
吊ってくる

HTML分からん奴は内田さんのリファレンス読むといいと思う。

誰それｗ

春菊