- 締切済み
WEBデザインで文字の配列がおかしくなる
初めてホームページを作っています。 それで途中までは難なく作成できたんですが今文字の配列でつまずいています。 HPは真ん中によせてつくってあるので背景画像やフラッシュ、バナー、メニューバーを真ん中寄せなどはできたんですが文字の位置が適正なポジションに置けません。 置きたい場所は真ん中より左側なのでtext-alignは使えません。 それで以下のタグで組んでみたんですが、ウインドウのサイズを変えると paddingをつかってるせいか文字は移動せずにその場所にのこってしまいます。 HTML <div class="drow"> <div class="news"> <h3>新着情報</h> </div> ・・省略・・ </div> CSS div.drow{ padding-top:20px; padding-left:90px; width:100%; } こちらのタグではウインドウをリサイズすると文字の場所が変わってしまいます。position:absoluteなどでleft設定しても同じでした。 ウインドウのサイズをあけても文字の場所を移動させないにはどうしたらいいんでしょうか。
- sakurasa10
- お礼率28% (2/7)
- デザイナー・クリエイティブ職
- 回答数7
- ありがとう数3
- みんなの回答 （7）
- 専門家の回答
みんなの回答
ww1.axfc.net/uploader/Sc/so/61994 上げました。先頭にwをひとつ足してね。 パスは同じです。 根本的な原因はIEでbodyの横幅を指定できないことですね。 なのでかわりにbody_innerというdivを作って全体を囲っています。 私は最初にそう習った(つまずいたことが無いところだった)ので、見落としてしまいました。。すみません。。 試しにbodyにボーダー1pxでもかけてみてください。 ページ全体にかかりますので。 あまり覚えていませんが、他もいろいろ直してるので見てみてください。 主観で余白とか決めてしまってますので、直してくださいね。 それと、背景の画像がsafariとchromeで1pxだけずれてしまう(ブラウザの仕様)ので、 ちょっとbodyのところに細工してあります。 その方法については、以下のページをご覧ください。 http://kamurogi.com/blog/2009/04/1px-background-alignment-bug.html
どうやら、ファイルアップの直リンクは禁止みたいですね。 消されてしまいましたです。。。 実働サイトなら大丈夫？(私のが消されてないから)みたいなのでそちらを見せていただけませんでしょうか？ それでも消されてしまうかな・・・？ いや、私もよく規約を理解していませんでした。 それかとりあえず、私の最初に書いたソースを使っては作られてはダメでしょうか。
補足
ttp://www1.axfc.net/uploader/Sc/so/61753 こちらでいかがでしょうか？？ パスはhomeです。 よろしくお願いします。
ちょっと見返してみたんですがまだ間違いがありますね。 pxがxになってたり・・・。 ざっと見た感じでも、 意味のわからない記述があったり、謎のところに<span>(空要素)を使っていたり、 書き間違いなど、いろいろ間違いが多いです。 基本的には、最小限の構成になるように心がけてください。 必要のないものをそのままにしていると原因がわからなくなります。 あと、困ったときにボックスの動きを見るうえで、 border:1px solid red; としてやって、現状を見てみるといいですよ。 ただ、左右上下2px増えますので、横がぎりぎりだったりすると、 カラム落ちしますけども。 とりあえず、画像も全部あってどこかに実動で上がったものを見せていただけると、こちらは一番手っ取り早いかもしれません。 やはり、先ほどのあげていただいたものでも、質問されている現象を再現できませんでしたので。 あと、どーしても原因がわからないときは、 綺麗さっぱり忘れて、新しくソースを書き直すのも手ですよ。 そっちの方が早いときがありますから。
補足
ご回答ありがとうございます。 その後いろいろ試したんですがどうしてもわかりません。 お手数かけて申し訳ござません。ご指導お願いします。
うーん、提示されたソースをそのままはっつけてみたんですけど、 http://www.geocities.jp/sakaebaka/eco/eco1.html http://www.geocities.jp/sakaebaka/eco/style1.css こんな感じになりました。なのでやはり再現できませんでした。 ちなみに、最小限ですが私なりに修正してみました。 http://www.geocities.jp/sakaebaka/eco/eco2.html http://www.geocities.jp/sakaebaka/eco/style2.css よくわかんないものを消して、適当に直したんですけど、どうでしょうか。 あと、<h1>とかは</h1>とちゃんと数字入れないと閉じれません。
補足
ご回答ありがとうございます。 参考にしてbody要素のmarginをautoにしたり変更してみたのですが 相変わらずです・・・ 画面サイズを変更して横スクロールしていくと背景は移動していくのですが文字だけはその場所に残るんですよね・・・ 構築の段階で間違ってるのかもしれません・・
すいません。アドレスの最後になにか要らないものがひっ付いてしまいました。 上が正常位置、下がずれてる画像です。
全体をすべてを左に90px空けたいということでしょうか？ padding-left:90px; とすれば、当然内側に90px空きます。 当方で提示されてるソースで再現したら、最初から のようになりました。 この場合、普通は全体に margin-left:90px; となると思うのですがどうでしょうか。 しかしながら、上の緑の画像と左右の影、下のメニューは中央に表示しているように思うのですが、 どこを90px空けたいのでしょうか。 すいませんが、まだよくわかりませんでした。 差し支えなければ、ページその物か、再現できるソースをご提示願えないでしょうか。
補足
回答ありがとうございます。 背景、影など基本は中央で表示させたいです。 文字位置は固定したいのですが・・・ （ウインドサイズを変えようが、お気に入り、履歴のタブを出そうが） しかし、ウインドウサイズを変更すると 新着情報などの左側に無駄な余白が入っています。 一応ソースはってみますので、よろしくおねがいします。 <body> <div class="baner"><img id="title" src="images/sozai.gif" width="780" height="110" alt=""></div> <div class="logo"><a href="index.htm"><img id="tilte" src="images/logo.gif" width="137" height="59" alt="eco" border="0"></a></div> <div id="wrap"> <div id="contents"> <ul id="menu"> <li id="menu2"><a href="index.htm" title="HOME">HOME</a></li> <li id="menu3"><a href="about.htm" title="エコについて">エコについて</a></li> <li id="menu4"><a href="anzen.htm" title="商品の安全性">商品の安全性</a></li> <li id="menu5"><a href="priduct.htm" title="製作商品">製作商品</a></li> <li id="menu6"><a href="index.htm" title="お問い合わせ">お問い合わせ</a></li> <li id="menu7"><a href="profile.htm" title="事業者概要">事業者概要</a></li> </ul> </div></div> <div class="top"><img id="flash" src="images/flash.jpg" width="780" height="350"> </div> <div class="drow"> <div class="news"> <h3>新着情報</h> </div> <ul> <li> <span><h5>2009年○月○日</h></span> <ul> <li>○○○○を更新しました。</li> </ul> <li> <span>2009年○月○日</span> <ul><li>○○○○を変更しました。</li> </ul> </li> </li> </ul> </div> ///CSS//// body { background-color: white; background-image: url(images/shadow.gif); background-position: center; background-repeat: repeat-y ; padding:0; margin:0; white-space: nowrap; width:780px; } #wrap{ text-align:center; } #contents{ margin:0 auto; width:780px; } div.start{ margin-top:4em; text-align:center; } div.logo{ position: absolute ; width: 200px; height: 200x; overflow: hidden; top:20px; left:120px; } div.baner{ text-align:center; width:100%; } div.top{ text-align:center; width:100%; } div.drow{ padding-left:90px; width:100%; } div.news{ border-left:6px outset green; border-bottom:1px dashed green; padding-left:10px; padding-bottom:0px; width:250px; } 基本はtext-alignをタグごとに指定して中央にしています body要素には特に指定していません。 ですから文字は当然、背景や影の枠の左に表示されます。 そこでdiv,drowタグにpadding-leftを指定して無理やり 文字位置を1枚目の画像のところもってきました。 しかし結果は2枚目のようにウインドウをリサイズすると位置が。。。 positionタグを使っても同じでした。 ご指導お願いします。
>それで以下のタグで組んでみたんですが、ウインドウのサイズを変えると paddingをつかってるせいか文字は移動せずにその場所にのこってしまいます。 ここのところがよくわかりません。 >こちらのタグではウインドウをリサイズすると文字の場所が変わってしまいます。 どのタグですか？ 上でいってる以下のタグとは違いますよね？ 見た感じで間違いを指摘するなら・・・ <div class="news"> <h3>新着情報</h> </div> <h3>が閉じれてません。</h3>で閉じてください。 あと<h3>をわざわざdivで囲ってクラス名を付けている理由はなんでしょうか。 <h3>をCSSで指定したい場合は、 h3{ 内容 } これでOKです。
補足
わかりづらい文ですいません。 新着情報やお知らせを表示したいんですが ウインドウサイズを変えるとこの画像のようにずれてしまいます。 どのようにレイアウトしたらいいのでしょうか？？
お礼
body_innerを使うんですね。 いろいろ変えてみて上手くいきました！ お時間をとらせてしまい申し訳ありません。 大変勉強になりました。どうもありがとうございました！！