グッドデザイン賞を受賞したウォーターサーバー >>

お世話になります。
HTML・CSSコーディングを依頼されたのですが、
なかなか上手く表示されず、困っております。

外部CSSデータは下記の通りです。

html {
height:100%;
scrollbar-face-color: #00B7EE;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color:#00B7EE;
scrollbar-3dlight-color: #00B7EE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
}

body {
height:100%;
margin:0 auto 0;
background-color: #FFFFFF;
}

form {
margin:0px;
scrollbar-face-color: #00B7EE;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color:#00B7EE;
scrollbar-3dlight-color: #00B7EE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
}

#container {
width:100%;
height:100%;
margin:0 auto 0;
background-color:#FFFFFF;
font-family:sans-serif;
background-image: url(../img/top_haikei.gif);
background-repeat: no-repeat;
background-position: center bottom
}

#logo{
float:left;
margin-left:80px;
height:180px;
}

#box1{
clear:both;
text-align:center;
line-height:20px;
height:230px;
}

#login_left{
float:left;
line-height:20px;
width:700px;
height:180px;
}

#login_right{
float:left;
height:180px;
}

#footer {
width:950px;
clear:both;
text-align:center;
}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

IEテスター(http://coliss.com/articles/browser/ie/928.html)で
表示確認しておりますが、
ブラウザのバージョンによって表示のされ方が違ってしまいます。

初心者の為、どなたか丁寧にご教示くださればと思います。
どうぞよろしくお願い致します!

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ログインフォーム部分と背景画像を重ねたいという趣旨かと思いましたので、その趣旨で書きます。




■html部・body部

height: 100%;は意図が不明です。


■div#container部

背景画像「top_haikei.gif」がウィンドウ幅に依存するようなデザインですので、いっそのこと、ここの部分でwidth: 950px;を指定して、幅固定デザインにしてしまった方がいいかもしれません。
アクセシビリティを気にされる場合には別ですが。

背景画像が必ず画面ウィンドウ下にくるようになってますので、input要素と背景画像を重ねたい場合には、ここで背景画像を指定しない方がいいでしょう。

height: 100%;は意図が不明です。


■div#logo部

float: left;は不要ですので外しましょう。


■div#box1部

div#logo部でfloatを外したら、ここのclear: both;も外しましょう。


■div#login_left部・div#login_right部・div#footer部

ログイン部分に先の背景画像を重ねたいのであれば、この3つをさらに<div id="login">などボックスで囲み、そこに背景画像top_haikei.gifを指定しましょう。
画像を全部表示させるためには、そのボックスにheight: 478px;などと指定すると良いでしょう。


■div#login_right部

こちらにもwidthを指定した方が無難です。


■input要素

input要素のフォントサイズでデザインがくずれる可能性がありますので、アクセシビリティを気にされないのであれば、いっそのことフォントサイズ固定でいった方が楽かもしれません。
(FireFoxやSafariには効きませんが、IEには有効です。)


■その他

htmlがいわゆるdiv病気味です。
#logoや#footerなどは、p要素で十分でしょう。
あと、せっかくCSSを使っているのですから、<br>の連続や頭<br>はやめて、CSSでうまくコントロールした方がきれいなソースになります。


以上、とりあえず気になったところを書きました。
参考になれば幸いです。

この回答への補足

TanakaHiroさま

大変親切・丁寧にご教示頂き、心より感謝しております。
アドバイスに基づいて色々訂正してみました。
 ↓↓↓↓↓
http://www.popcube.net/20091103/index.html

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【CSS】

html {
scrollbar-face-color: #00B7EE;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color:#00B7EE;
scrollbar-3dlight-color: #00B7EE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
}

body {
margin:0 auto 0;
background-color: #FFFFFF;
font-family:sans-serif;
font-size:8pt;
}

form {
margin:0px;
scrollbar-face-color: #00B7EE;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color:#00B7EE;
scrollbar-3dlight-color: #00B7EE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
}

#container {
width:950px;
margin:0 auto 0;
background-color:#FFFFFF;
}

#logo{
margin-left:80px;
height:180px;
}

#box1{
text-align:center;
line-height:20px;
height:150px;
}

#login{
height:250px;
background-image: url(../img/top_haikei.jpg);
background-repeat: no-repeat;
background-position: center bottom
}

#login_left{
float:left;
margin-top:120px;
margin-right:50px;
line-height:20px;
width:700px;
}

#login_right{
float:left;
margin-top:100px;
width:200px;
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

お陰さまで何とか形になってきたような気がします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■height:100%指定について

本当に意味不明でしたね(汗)
「取り扱いサプリメント&プラセンタ製品」のところを
縦横センタリングする為に色々いじっていて、
消すのを忘れておりました。
ご指摘くださって有難うございます!!


■ログイン部分を背景に重ねる件

TanakaHiro様のご推察通り、ここでつまづいておりました。
ご教示頂いたお陰で綺麗に配置することが出来ました。
本当にありがとうございます!!


■input要素について

form部分は横の「ID」「パスワード」の文字と綺麗に並べたかったのですが、どうすれば良いのか分からず、少しずれたままになっています。
ご指摘にあった「input要素のフォントサイズでデザインが崩れている」のでしょうか?
フォントサイズ固定というのがよく分からず、またまた困り果てております。
bodyにfont-size指定をするのでしょうか?
的外れなご質問だったら申し訳ございません!!
ちなみに「ID」のinput typeはtextに、「パスワード」のinput typeはpasswordにしたいのですが、これをするとpasswordのフォームだけ大きくなってしまいます。
原因がよく分かっておりません(汗)
こんなにご丁寧にご返答くださったので、またまた甘えるようですが、アドバイスがあればお願い致します!!


■div病について

ご指摘くださり、本当にありがとうございます!
画像ばかりのページなので、余白などの指定がよく分からず、全てdivで指定しておりました。
#logoの部分は一度p要素にしてみたのですが、上手く行かずそのままにしています。
#footerで指定していたcopyright部分は、背景画像と文字を同じ画像にした方が綺麗だったので、そうすることにしました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

あともう1歩という感じですが、
TanakaHiro様のお陰で本当に助かりました!!
追加のアドバイスがあれば是非よろしくお願い申し上げます。

補足日時:2009/11/03 20:09
    • good
    • 0
この回答へのお礼

TanakaHiro様

何度も助けてくださって本当にありがとうございます!!
お陰で何とかなってきました。

正直ここまで丁寧に解説して頂けると思っていなかったので、
本当に有り難く、心から感謝しております。

現在入力フォーム等を作成中ですが、
フォームの表示でまた困った点が出てきたので
改めて質問させて頂こうと思っております。

もしお時間がありましたら、
今後ともアドバイスよろしくお願い致します!!

本当にありがとうございました(*^ー^*)ノ

お礼日時:2009/11/04 16:52

多少なりともお役に立てたようで幸いです。



input要素の文字サイズ固定は、

input {
font-size: 12px;
}

みたいな感じで、ピクセル単位で指定します。

ほとんど画像ですので、bodyで指定しても良いでしょう。

IDなどの文字画像とフォームがずれるのは、ある程度しょうがないのですが、いっそのことテーブルで組んでしまうという手もあります。
マークアップという観点からも、テーブルで問題ないと思います。


私は、俗に言う「Strict病」でValid HTMLにこだわるもので、実のところもっとつっこみたいのですが(笑)、なんだかんだ言っても意図したとおりに表示するというのがHTML・CSSの面白みでしょうから、いろいろと試しながら頑張って下さい!
    • good
    • 0
この回答へのお礼

TanakaHiroさま

ありがとうございます!
こちらの回答も参考にさせて頂きます。

Script病、なんだかプロっぽくて羨ましいです><
私は趣味でHPは作っているものの、
仕事ではあまりしないので本当に困っておりました。

また是非アドバイスお願い致します!
本当にありがとうございました(*^ー^*)ノ

お礼日時:2009/11/04 16:57

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング