5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

/* CSS・スタイルシート質問スレッド【16th】 */

496 :Name_Not_Found:03/03/19 23:01 ID:???
hr{
width : 60%;
text-align : left;
}

これだとIEとOperaでは罫線が左寄せされるのですが、NN6だと中央に来てしまいます。
IE、Opera、NN6共通で左寄せする方法は text-align : left; ではなく何を用いればよいのですか?

497 :Name_Not_Found:03/03/19 23:02 ID:???
見られたくないものもとから書くなってこともあるな

498 :Name_Not_Found:03/03/19 23:04 ID:???
>>491
気持ちイイからに決まってんだろ

499 :Name_Not_Found:03/03/19 23:05 ID:???
>>496
hr {
width : 60%;
margin-right : 40%;
}

かなぁ?試してないけど。

500 :496:03/03/19 23:13 ID:???
>>499
レスありがとうございます。
先ほど試してみましらNNでは望みどおりの結果が得られましたが、
今度はIEでの表示がおかしくなりました。
具体的には説明しにくいのですが、罫線の長さが短くなって中途半端な位置に来てしまいます。

501 :Name_Not_Found:03/03/19 23:17 ID:hZe8oITL
>>496
互換を優先するなら直接タグ内に
<hr width="60%" align="left" />
CSSではborderを使用することが前提

502 :Name_Not_Found:03/03/19 23:20 ID:7fmMjSM6
┌────────────────────────┐
│My homepage     ────────────────」
└───────/      Link: Home | Game | BBS | Mail
こういうの作りたいんですけど、どうすれば出来ますか?
TABLE使わないで作ろうと思ってるんですが…。

503 :496:03/03/19 23:23 ID:???
>>501
結局、それがベストになっちゃうのですか。
タグ内に align は使わないほうがいいと以前言われたのでCSSにしていたわけですが。
とにかく、ありがとうございました。

504 :Name_Not_Found:03/03/19 23:25 ID:???
>>496>>500
IEってもしやMacIEではあるまいね?
だったらこっち。

hr要素でwidthプロパティの指定値が正しく反映されない(IE5.1)
http://cssbug.tripod.co.jp/detail/macie/b011.html

505 :Name_Not_Found:03/03/19 23:29 ID:???
>>504
すいません、OSも書いておくべきでした。OSはWinXP(home)です。

506 :Name_Not_Found:03/03/19 23:30 ID:hZe8oITL
#myhomepage {
z-index:1;
}
#link {
position:absolute;
width:*;
height:*;
top:*;
left:*;
bottom:auto;
right:auto;
z-index:2;
}

<div id="myhomepage">
My homepage
</div>
<div id="link">
Link: Home | Game | BBS | Mail
</div>

507 :Name_Not_Found:03/03/19 23:37 ID:???
>>503
widthを指定しないでmarginだけ設定すればうまくゆくよ。
なぜだか理由は知らんが。

<hr style="margin-right:40%;">

WinIE6,NN7.02,Opera7.03で確認。

508 :Name_Not_Found:03/03/19 23:49 ID:???
>>496 >>507
<hr style="margin-right:40%;"> に関して

Win+IE4    … width:100%にmargin-right:40%がくっつくので、横スクロールバー発生。
Win+Opera6 … width:100%でmargin-rightが無視される。
Win+IE5.5              ┐
Win+Netscape6/Mozilla0.9以降 ┼ 意図したとおりの表示。
Win+Opera7             ┘

ホムーランはわけわからん。

509 :503:03/03/19 23:52 ID:???
>>507
早速、試してきました。WinIE6では確かに望みどおりでした。
ただ、NN6.2とOpera6.01では無理でした。
かなり新しめのブラウザでないとだめらしいです。

510 :501:03/03/19 23:57 ID:8TJ7rdwW
>>503
ベストではないけど hr 自体はブラウザによって違うので妥協
基本的にはborderを使用する、またはブロックに中に配置する
それだとborderを使用するのと同じ事だけどね(w
>>507
mozilla系はその通り解釈されないはず?
NN7.02?

511 :503:03/03/20 00:01 ID:???
>>508
解説ありがとうございます。
その図からみると、どうやらCSSのみを用いて3つのブラウザ新旧の
互換を図るのは難しそうですね。

>>510
ここは妥協するのが適切みたいですね。
一応、borderを用いて意図する表現ができないかを試してきます。

512 :507:03/03/20 00:11 ID:???
>>510
DOCTYPEスイッチで表示が異なる模様。
先ほど確認したのは全て
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">だと
ご指摘の通り、NN7でもうまくゆかぬ

513 :508:03/03/20 00:17 ID:???
うわっ、俺もTransitionalだった。StrictではNetscape6/Mozilla系全滅。

                 ̄ ̄ ̄ ̄-----________ \ | /  -- ̄
    ---------------------------------    。 ← <HR>
           _______----------- ̄ ̄ ̄ ̄ ̄     
                     ∧ ∧    / / |  \   イ
                    (   )  /  ./  |    \ /
                 _ /    )/   /  |     /|
                 ぅ/ /   //    /   |    / .|
                ノ  ,/   /'    /    |│ /|
 _____      ,./ //    |     /   .─┼─ |
(_____二二二二)  ノ ( (.  |    / ┼┐─┼─
              ^^^'  ヽ, |  |   /.  ││ 

514 :501:03/03/20 00:20 ID:Xw0hH1zB
>>507
情報ありがとう!そうか、訳なんだ(w

515 :Name_Not_Found:03/03/20 00:34 ID:???
訳って?

516 :Name_Not_Found:03/03/20 00:47 ID:???
translation(翻訳)とtransitional(過渡的)を間違ったらしいな。

517 :Name_Not_Found:03/03/20 10:15 ID:ouwUs7J5
背景色を適用している文字にマウスオーバーしたときに
文字色と背景色が変わるようにしたいのですが
どうしたらいいのでしょう?
凄く初心な事で申し訳ないですが、よろしくお願いします。

518 :Name_Not_Found:03/03/20 10:22 ID:???
>>517
リンクじゃないならスクリプトで
リンクなら>>4でも嫁

519 :Name_Not_Found:03/03/20 12:10 ID:???
>>517-518
リンクじゃなくてもCSSで指定できるが、IEが実装してないのが難。

520 :質問です:03/03/20 13:28 ID:C4GNmBVd
表の配置に関してですが、左揃えにするにはどうしたらよいのでしょうか?

.追記表 {
width: 300px;
margin-top: 30px;
margin-bottom: 30px;
float: right;
clear: right;
}

と書いてみましたが、表の下の行が左に回りこんでしまいます。
なぜ左寄せの表なのかと疑問をお持ちの方もあるかと思いますが、
紙の公文書をそのまま再現しなければならない苦しい立場です。。。

283 KB
★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.02 2018/11/22 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)