サイドバーのリンクリストのスクロールバー設置完了

観測気球

収集物の記録書庫 a data archive of collection -- collectible toys

[要旨] 結局、iframe を使う方法は採用せず、スタイルシートで実現しました。今回も参...
[キーワード]

« イタリアンかつきしめん | トップページ | スタイルシート -- どのブラウザでも同じように見えるようにするには »

2004.02.24

サイドバーのリンクリストのスクロールバー設置完了

結局、iframe を使う方法は採用せず、スタイルシートで実現しました。今回も参考にしたのは「パンパでガウチョ」さんのところ

今回用意したスタイルシートは、以下の通り。

.bloglist h3 {
    font-size: x-small;
    text-align: center;
    border-left: 10px solid gray;
    border-right: 10px solid gray;
    color: #000;
    background-color: #CCC;
}

.listing {
    margin-top: 2px;
    margin-bottom: 3px;
    padding: 0px;
    overflow: auto;
    height: 240px;
}

マイリスト埋め込みとの折り合いをつけつつ、表示位置を調整するため、

position: relative;
top: -40px;

なんて美しくないことをしてしまったのは秘密です。 (^^;

投稿者: tsupo 2004.02.24 午前 02:26 | 固定リンク | このエントリーをはてなブックマークに追加 | このエントリを del.icio.us に登録 このエントリの del.icio.us での登録状況 | このエントリを Buzzurl に追加このエントリの Buzzurl での登録状況 | このエントリをlivedoorクリップに登録 このエントリのlivedoorクリップでの登録状況 このエントリをlivedoorクリップに登録している人の数 | 酢鶏巡回中

楽天市場


ウェブログ・ココログ関連」カテゴリ内の最近の記事

プログラミング」カテゴリ内の最近の記事

品揃え豊富で安い!NTT-X Store


アマゾンわくわく探検隊

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6737/228368

この記事へのトラックバック一覧です: サイドバーのリンクリストのスクロールバー設置完了:

» 戦うスタイルシート from チェリオメアリー
スタイルシートって難しい 続きを読む

受信: 2004.02.24 午後 04:11

» スタイルシート -- どのブラウザでも同じように見えるようにするには from 観測気球
要旨: 「チェリオメアリー」のけーきさんに、当「観測気球」を Maciotosh のいろんな 続きを読む

受信: 2004.02.25 午前 03:05

» 観測気球: サイドバーのリンクリストのスクロールバー設置完了 from 此処録ANNEX : ココログTIPS
観測気球: サイドバーのリンクリストのスクロールバー設置完了... 続きを読む

受信: 2004.03.09 午前 12:19

» Change Layout from Poohotosama's diary
最近、ブログのリンクリストが長くなって見にくくなってきたので、観測気球さんのやりかたを真似してスクロールボックスに入れてみた。 ついでに、blogPeopleと... 続きを読む

受信: 2004.03.14 午後 08:23

» 観測気球: サイドバーのリンクリストのスクロールバー設置完了 from 此処録ANNEX : ココログTIPS
観測気球: サイドバーのリンクリストのスクロールバー設置完了... 続きを読む

受信: 2004.03.16 午前 12:56

» 長くなったサイドメニュー対策 from 日記のようなもの
これからblogを続けていくとカテゴリや月別アーカイブなどの数はどんどん増えていくことになります。またサイドメニューの最近のエントリ一覧と本体に表示されるエント... 続きを読む

受信: 2004.03.18 午後 01:53

» リストをスクロール from cyopitto MEMO
『BlogPeople』のリストをスクロールさせるようにする方法、いろいろな方の 続きを読む

受信: 2004.04.20 午前 12:22

コメント


わはは(^^)。>top: -40px;

それはさておき、うちのFirebird0.7/Linuxでは、スクロールバーが出ずに全部表示さたままです。なんででしょう?kyorecobaさんちはOKなんですけど……。 CSSで完璧にいくなら私も使いたいと思ったんですけどねぇ。

……と思っているうちに偶然リロードしたら表示されました。外部CSSだからキャッシュされてたのかな?

ところで、どうでもいいんですが、両者の上にある開閉記号の残骸(+)が妙に気になりますね。リンクの下線と併せて±に見えたりして。なんだろうと思ってクリックしちゃいました(^^;。

投稿者: facet (2004.02.24 午前 08:06)


うーん、Macだと結構厳しいです、、、

スクリーンショット撮りますね。
トラバします。

投稿者: けーき (2004.02.24 午後 02:54)


スクリーンショット撮りました。エントリ書きました。

でも無許可でスクリーンショットを公開するのは気が引けたので、エントリに画像を含めてません。サーバーにはアップロードしてあるので、見たい場合は私にお知らせくださいませ。

投稿者: けーき (2004.02.24 午後 04:18)


こんばんは、kyorecobaです。
WindowsXPの IE6, Opera7.23, Firefox0.8で見ていますが、facetさんのおっしゃる+マークが、Firefox0.8で見えている程度で、リストの中身はどれも問題なく見えています。

投稿者: kyorecoba (2004.02.24 午後 10:22)


「+ マーク」が見える問題に関しては、スタイルシートに原因があるのではなくて、html 側、マイリストへの埋め込み方というか、div でのブロック階層の使い方に問題があるようです。

少しいじってみました。とりあえず、Windows XP + Opera 7.23 では 「+ マーク」が消えたのを確認しました。私は Macintosh は持ってないので、どういう風に見えるのか、当方では確認できません。

けーきさん、よろしければ、確認していただけませんか? よろしくお願いします。

(Opera 7.23 で投稿しようとしたら、request could not found と怒られたので、IE6.0 で投稿し直しました。こんな問題もあったんですね)

投稿者: tsupo (2004.02.24 午後 10:41)

コメントを書く




※イタズラ防止のため、メールアドレスを入力しないと投稿できません。

次からのコメント入力の手間を省くために、名前やメールアドレスをcookieに記憶しますか?


URL を入力すると、その URL にリンクがはられます。
なお、メールアドレスは公開されません。ご安心ください。


ワード

ニッセン

fujisan.co.jp

楽天市場