初めてホームページを作っています。
それで途中までは難なく作成できたんですが今文字の配列でつまずいています。
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設定しても同じでした。
ウインドウのサイズをあけても文字の場所を移動させないにはどうしたらいいんでしょうか。
A 回答 (7件)
- 最新から表示
- 回答順に表示
No.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- …
body_innerを使うんですね。
いろいろ変えてみて上手くいきました!
お時間をとらせてしまい申し訳ありません。
大変勉強になりました。どうもありがとうございました!!
No.6
- 回答日時:
どうやら、ファイルアップの直リンクは禁止みたいですね。
消されてしまいましたです。。。
実働サイトなら大丈夫?(私のが消されてないから)みたいなのでそちらを見せていただけませんでしょうか?
それでも消されてしまうかな・・・?
いや、私もよく規約を理解していませんでした。
それかとりあえず、私の最初に書いたソースを使っては作られてはダメでしょうか。
この回答への補足
ttp://www1.axfc.net/uploader/Sc/so/61753
こちらでいかがでしょうか??
パスはhomeです。
よろしくお願いします。
No.5
- 回答日時:
ちょっと見返してみたんですがまだ間違いがありますね。
pxがxになってたり・・・。
ざっと見た感じでも、
意味のわからない記述があったり、謎のところに<span>(空要素)を使っていたり、
書き間違いなど、いろいろ間違いが多いです。
基本的には、最小限の構成になるように心がけてください。
必要のないものをそのままにしていると原因がわからなくなります。
あと、困ったときにボックスの動きを見るうえで、
border:1px solid red;
としてやって、現状を見てみるといいですよ。
ただ、左右上下2px増えますので、横がぎりぎりだったりすると、
カラム落ちしますけども。
とりあえず、画像も全部あってどこかに実動で上がったものを見せていただけると、こちらは一番手っ取り早いかもしれません。
やはり、先ほどのあげていただいたものでも、質問されている現象を再現できませんでしたので。
あと、どーしても原因がわからないときは、
綺麗さっぱり忘れて、新しくソースを書き直すのも手ですよ。
そっちの方が早いときがありますから。
この回答への補足
ご回答ありがとうございます。
その後いろいろ試したんですがどうしてもわかりません。
お手数かけて申し訳ござません。ご指導お願いします。
No.4
- 回答日時:
うーん、提示されたソースをそのままはっつけてみたんですけど、
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にしたり変更してみたのですが
相変わらずです・・・
画面サイズを変更して横スクロールしていくと背景は移動していくのですが文字だけはその場所に残るんですよね・・・
構築の段階で間違ってるのかもしれません・・
No.2
- 回答日時:
全体をすべてを左に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タグを使っても同じでした。
ご指導お願いします。
No.1
- 回答日時:
>それで以下のタグで組んでみたんですが、ウインドウのサイズを変えると
paddingをつかってるせいか文字は移動せずにその場所にのこってしまいます。
ここのところがよくわかりません。
>こちらのタグではウインドウをリサイズすると文字の場所が変わってしまいます。
どのタグですか?
上でいってる以下のタグとは違いますよね?
見た感じで間違いを指摘するなら・・・
<div class="news">
<h3>新着情報</h>
</div>
<h3>が閉じれてません。</h3>で閉じてください。
あと<h3>をわざわざdivで囲ってクラス名を付けている理由はなんでしょうか。
<h3>をCSSで指定したい場合は、
h3{ 内容 }
これでOKです。
この回答への補足
わかりづらい文ですいません。
新着情報やお知らせを表示したいんですが
ウインドウサイズを変えるとこの画像のようにずれてしまいます。
どのようにレイアウトしたらいいのでしょうか??
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS htmlとcssで吹き出しの中に文字を置きたいのですが、 html 〈div class bb〉 〈 3 2023/02/04 22:44
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
HTMLフォームのSELECTの幅を一...
-
Firefox 横スクロールバーを表...
-
<h1>タグの後の行間を詰めたい。
-
iPhone用のサイトの文字がずれ...
-
<legend>で表示されるタイトル...
-
macとwindowsのレイアウト崩れ...
-
コードを書いて下さい( ; ; )...
-
CSSの設定
-
インラインフレームの表示位置...
-
H1 タグの行間
-
aタグに直接style=""で:hoverを...
-
IE6でCSSの一部の記述をを読み...
-
スマホで画面ぴったりに表示さ...
-
Formタグのブロックの高さについて
-
なぜ左に寄っているの?
-
htmlでテーブル内にテキストボ...
-
エクセルでサイズに合ったもの...
-
Excel で等間隔で縦線を引きた...
-
Excelの列や行の幅を表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
コードを書いて下さい( ; ; )...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
INPUT TEXT内の文字位置を指定...
-
なぜ左に寄っているの?
-
アップロードするサーバーによ...
-
端から端まで横線を引きたい
-
macとwindowsのレイアウト崩れ...
-
Formタグのブロックの高さについて
-
chromeだけbody直下に空白が開く
-
FireFoxで見るとブラウザの幅に...
-
CSSでh1とその下の文字との行間...
-
IE8ではtext-align: center;で...
-
css。横並びBOXに長文textを流...
-
text-alignの解除の方法
-
div align="center"のalignは旧...
-
<legend>で表示されるタイトル...
おすすめ情報