- 締切済み
CSSレイアウト
はじめまして。CSSレイアウトについて質問させてください。 ※昨日投稿したつもりが、、、、gooに羽井されていないようなんで 再度投稿させていただきます。 ■実現したいこと。 下記URLのようなイメージを、cssで実装したいのです。 ※センタリングもします。 http://www.turn.jp/design.jpg 現状自分で組んでみると、以下URLのように表示されます。 safariでは、外枠container部分のdivが上手く表示されません。 IE6ではとりあえず表示はされていますが、投下PNGが読めない？ のか、うまくできていません。 www.turn.jp 下記にhtmlおよびcssを記載しますので どなたかアドバイスいただけると幸いです。 ■html <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright©2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; } -- 以上、宜しくお願い致します。
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
CSSがShift_JIS、XHTMLがutf-8、XML宣言が無しで、 xmlns versionがww3 って何？ }#container { 最初の}って何？ IE6では透過PNGはハック使わないと表示出来ないよ。 ＞センタリングもします。 何もセンターリングになってないよ。 まさか、幅1000pxでセンター配置する気？ safari以外でも20pxの枠が表示されていないよ。 枠内に不規則な画像が３枚か。作り直した方が良いね。 とりあえず、元のソース・CSSを無視して、 参照のdesign.jpg画像を見た目通りに単純にに書くと、 -------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>test</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> *{ margin:0; padding:0;} #wrapper2{ padding:20px; width: 960px; height: 437px; background:#959500 url(images/design.jpg) no-repeat 20px 20px;} #contents2{ width: 960px; height: 437px;} h1{ text-align: right; height:164px; margin:180px 236px 0 0;} p#foot2{ color:#FFF; height:79px; padding:66px 0 0 4px; margin: 8px 0 4px; font-size:10px; background: url(images/menu.png) no-repeat 100% 0;} </style> </head> <body> <div id="container2"> <div id="wrapper2"> <div id="contents2"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <p id="foot2">Copyright©2010 All Rights Reserved.</p> </div> </div> <p style="font-size:28px; padding:1em;"> 透過PNGをIE6でデフォルトでは表示出来ない。<br /> 透過GIFで作るか、スターハックで対応。<br /> もしくは、下の透過部分を背景一体化でテキストで書く（BLOGの文字）。</p> </div> </body> </html> ---------------------------------- ここで、コピペするとURL部分の前後に変なもんが添付される可能性があるのでテキストを確認する事。 Shift_JISのStrictで書いたので、保存時も名前を変えてShift_JISで保存。 これでわかならければ、これ以上先には進めないでしょう。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
回答ありがとうございます！ 非常に細かく本当に助かりました。 先に進めるよう頑張ります。