[HOME]   [サポート掲示板トップへ]   [BACK]   [レス投稿]



 ■--ページの半分を特定の色で埋め尽くす方法
 >>>もに   -- 2004/01/20-12:17..No.[9789]
    はじめまして、「もに」と申します。

いきなり質問ですが、タイトルの通り
ページ全体の半分を、特定の色で埋め尽くす方法を探しています。
ただ、いくつか条件があって

・フレーム分割は使わない
・テーブルも使わない
・ウィンドウサイズをどのように変化しても、確実に画面半分の
色が変わっている

というものなのですが、果たしてこれで実現できるでしょうか?

スタイルシートを使ってやってみたのですが、background-colorと
background-positionは同時に有効とならないのか、どうも上手くいきません。

何かアドバイスがありましたらよろしくお願いします。





>>> No.   -- 2004/01/20-12:34..No.[9790]
 
    positionとcolorは同時に有効になるはずですが、
どのように指定なさいましたか?

お約束にもあるように、また特に表示に関するトラブルの場合
その問題の起きているページを実際に見ることで
問題の解決が速やかになります。
 

>>> もに -[URL]  -- 2004/01/20-13:11..No.[9791]
 
    No.さん、ご返事ありがとうございます。
とりあえず自己解決したので、結果のURLを記入しておきます。
(TOPからはデッドリンクですが、今日限りのアップですのでご容赦を)

>positionとcolorは同時に有効になるはずですが、
>どのように指定なさいましたか?

そのときは

BODY {
background-color: #3333aa;
 background-position: 50%;
}

とやってみました。
が、これでは上手くいきませんでした。

結局、 background-imageとbackground-positionを併用し、
背景画像を実際に半分だけ色塗りして対応しました。
(ファイルサイズ節約の為、横に細長い画像にして
縦方向にrepeat表示させてあります)

colorとpositionを使って出来る方法があれば、
念のため教えていただけると有難いです。
 

>>> らくらく   -- 2004/01/20-15:01..No.[9792]
 
    上下半分なのか左右半分なのかわかりませんが、仮に上下半分として
上半分に塗りたい色の画像を用意してimgタグで貼り付け、その画像に対し
position:absolute;top:0;left:0;width:100%;height:50%;z-index:-1;
みたいな感じで設定してやったらできましたよ。
実際には100%では少し隙間が空くので、もう少し数値を大きくする必要がありそうですが。
下半分に塗りたい色はbackground-colorで設定してください。

左右半分だとするとheightの値の取り方が少し難しいですが、できないことはないと思います。
 

>>> もに(解決)   -- 2004/01/20-15:47..No.[9794]
 
    ありがとうございました。
後学の為に、いろいろ試してみようと思います。
 



返信用フォームです

Name
Email
URL      
Message
Forecolor
Password     修正・削除に使用




■修正・削除: 記事Noと投稿時に入力したパスワードを入力し
edit(修正)又はdelete(削除)を選びupdateボタンを押下

No. Pass
はてなまん Ver0.57 Created by Tacky
コミュニティー版アレンジ By Nazca

女の子お絵かき掲示板ナスカiPhone修理