拡大時右端の内容が真ん中にずれることについて

解決済

質問者：KAIJI-000
質問日時：2013/09/24 00:43
回答数：3件

html 4.01で記述していますが、
125%までは下にスクロールバーが表示され画像がずれることがないのですが、
130%を超えると左端の画像が真ん中にずれるこみます。
なぜですか？　ちなみに幅は全部で800pxに留めています。
それとabsoluteは入れてません。
参考コード
body {
overflow-y:auto
overflow-x:auto
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2013/09/26 19:44

No.1です。

もちろんabsoluteで配置するのが最善です。
　しかし、この場合はディスプレイ幅に依存させないためにも、あなたのようにabsoluteでなくfloatのほうが良いかもしれません。
　すなわち、故意にウィンドウ幅が狭いときは下に回す・・のです。

＞ちなみに幅は全部で800pxに留めています。
　今のように様々なディスプレイ幅がある時代、これはしないほうが良いです。狭いディスプレイだと横スクロールが必要になります。
　ディスプレイ幅が小さいときは下に回せばよいです。
　そうして置けば、スマホも幅広ウィンドウでも利用できる。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　しかし、それ以前にHTMLにたくさんの誤りがあります。文法的にはエラーにはならない(文法チェッカーは文法しかチェックしないので制約がある)ものもあります。

　ブラウザは、ブロックを追加するなど、何とか表示しようとしますが、それに期待したらブラウザ間で誤差が出る原因になります。
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator )』

文書構造がよく分からないので、想像を含みますが・・
ディスプレイ幅が小さかったりユーザーのフォントが大きいときは下に回りこみます。
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済み
★タブは＿に置換してあるので戻す。
※いちいちclass名はつけないように!付けるのなら文書構造を示す物にする。後からのメンテナンスもスタイルシートも絶対にそのほうが楽です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>Question</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
<style type="text/css">

</style>
</head>
<body>
＿<div class="header">
＿＿<h1>八百屋</h1>
＿</div>
＿<div class="section">
＿＿<h2>検索</h2>
＿＿<div class="section" id="syoku">
＿＿＿<h3>野菜から探す</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="/tomato">トマト</a></li>
＿＿＿＿<li><a href="/lettuce">レタス</a></li>
＿＿＿＿<li><a href="/cabbage">キャベツ</a></li>
＿＿＿＿<li><a href="/carrot">にんじん</a></li>
＿＿＿＿<li><a href="/greenPepper">ピーマン</a></li>
＿＿＿＿<li><a href="/cucumber">きゅうり</a></li>
＿＿＿＿<li><a href="/parsley">パセリ</a></li>
＿＿＿＿<li><a href="/celery">セロリ</a></li>
＿＿＿＿<li><a href="/other">その他</a></li>
＿＿＿</ol>
＿＿＿<p class="calender">
＿＿＿＿<img src ="calender.jpg" width="190" height="190" alt="カレンダー">
＿＿＿</p>
＿＿</div>
＿＿<div class="section" id="otherSearch">
＿＿＿<form action="./">
＿＿＿＿<div class="section" id="priceSearch">
＿＿＿＿＿<h3>価格から探す</h3>
＿＿＿＿＿<p>
＿＿＿＿＿＿<input type="text" name="kakaku2" value="" size="10" maxlength="5">
＿＿＿＿＿＿～<input type="text" name="kakaku3" value="" size="10" maxlength="5">円
＿＿＿＿＿＿<input type="submit" name="searchbyprice" value="検索">
＿＿＿＿＿</p>
＿＿＿＿</div>
＿＿＿＿<div class="section" id="areaSearch">
＿＿＿＿＿<h3>生産地から探す</h3>
＿＿＿＿＿<p>
＿＿＿＿＿＿<img src ="Japanmap2.jpg" width="400" height="300" alt="tizu">
＿＿＿＿＿</p>
＿＿＿＿</div>
＿＿＿＿<div class="section" id="keywordSearch">
＿＿＿＿＿<h3>キーワードから探す</h3>
＿＿＿＿＿<p>
＿＿＿＿＿＿<input type="text" name="searchbykeyword" value="キーワードなどを入力してください。" size="20" maxlength="20">
＿＿＿＿＿＿<input type="submit" name="searchbykeyword2" value="検索">
＿＿＿＿＿</p>
＿＿＿＿</div>
＿＿＿</form>
＿＿</div>
＿＿<div class="aside" id="userRegist">
＿＿＿<form action="../cgi/">
＿＿＿＿<h3>ユーザー登録</h3>
＿＿＿＿<p>
＿＿＿＿＿<input type="submit" name="registering" value="ボタン1" style="width:150px; height:50px;">
＿＿＿＿</p>
＿＿＿＿<p>
＿＿＿＿＿<input type="submit" name="login" value="ボタン2" style="width:150px; height:50px;">
＿＿＿＿</p>
＿＿＿</form>
＿＿</div>
＿＿<div class="aside" id="news1">
＿＿＿<h3>農家だより</h3>
＿＿＿<p><img src ="piman.JPG" width="120" height="100" alt="ピーマン"></p>
＿＿＿<p>10月01日更新!!</p>
＿＿</div>
＿＿<div class="aside" id="news2">
＿＿＿<h3>農家ニュース</h3>
＿＿＿<p><img src ="farm.jpg" width="120" height="100" alt="ニュース"></p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さん長文による親切な回答有難うございます。正直圧倒されました。absoluteとかrelativeでちょこちょこっとやればいいんじゃないのという考えでいました。

通報する

お礼日時：2013/09/28 18:15

No.3

回答者： ORUKA1951
回答日時：2013/09/26 19:45

スタイルシート部分です。

- 0
- 件

通報する

この回答へのお礼

長文のコード有難うございます。

通報する

お礼日時：2013/10/05 23:06

No.1

回答者： ORUKA1951
回答日時：2013/09/24 09:15

HTML(大文字です)4.01strictで製作して、DOCTYPEを

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
　として文法チェックをすること
⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )

　そのうえで、解決しなければ、その前後のHTMLと関連するスタイルシートを示してください。
body {
overflow-y:auto
overflow-x:auto
}
　は書かなくても現行のブラウザはautoと動作するはずです。

この回答への補足

すみません、チェックしてみます。その前にお聞きしたいのは
absoluteで設定していないんですが、これは大きく関係しますか？

補足日時：2013/09/25 00:32

通報する

- 0
- 件

通報する

この回答へのお礼

そのサイトでチェックした所、細かいエラーはあるようですが、レイアウトには関係ないと思われるので、このまま補足させてください。

HTML側
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="～">
<title>Question</title>

<link rel="stylesheet" href="Questionkakudai.css" type="text/css">

</head>

<body>

<h2><p><a class= "recruit">八百屋</a></p></h2>

<div id="syoku">
<table border="7">
<tr class="" TD style="font-size : 30px;">野菜から探す</td></tr>
<tr class=""><TD style="font-size : 20px;"><a class= "a3" href="">トマト</a></td><TD style="font-size : 20px;"><a class= "a3" href="">レタス</a></td></tr>
<tr class=""><TD style="font-size : 20px;"><a class= "a3" href="">キャベツ</a></td><TD style="font-size : 20px;"><a class= "a3" href="">にんじん</a></td></tr>
<tr class=""><TD style="font-size : 20px;"><a class= "a3" href="">ピーマン</a></td><TD style="font-size : 20px;"><a class= "a3" href="">きゅうり</a></td></tr>
<tr class=""><TD style="font-size : 20px;"><a class= "a3" href="">パセリ</a></td><TD style="font-size : 20px;"><a class= "a3" href="">セロリ</a></td></tr>
<tr class=""><TD style="font-size : 20px;"><a class= "a3" href="">その他</a></td></tr>
<tr class=""><td> <td></tr>
<tr class=""><td> <td></tr>
<tr class=""><td> <td></tr>
<tr class=""><td> <td></tr>
<tr class=""><td> <td></tr>
<tr class=""><td><img src ="calender.jpg"></td></tr>
</table>
</div>

<div id="center">
価格から探す
<input type="text" name="kakaku2" value="" size="10" maxlength="5"> ～ 
<input type="text" name="kakaku3" value="" size="10" maxlength="5"> 円  <input type="submit" name="searchbyprice" value="検索"><br>
 <br>
生産地から探す
<img src ="Japanmap2.jpg" width="400" height="300" alt="tizu"><br>
<div id="jobkeyword">キーワードから探す</div>
<div id="jobkeywordentry"><input type="text" name="searchbykeyword" value="キーワードなどを入力してください。" size="20" maxlength="20"></div>
<input type="submit" name="searchbykeyword2" value="検索">
</div>



<div id="right">
<div class="register" >
<form>
<div id="touroku">
<input type="submit" name="registering" value="ボタン1" style="width:150px; height:50px;">
</div>
<p> </p>
<p> </p>
<div id="login">
<input type="submit" name="login" value="ボタン2" style="width:150px; height:50px;">
</div>
</form>
</div>
</div>

<div id="noukaletter">農家だより</div>
<p>10月01日更新!!</p>
<img src ="piman.JPG">
 
<div id="noukanews">農家ニュース</div>
<img src ="">
</div>



</body>
</html>

css側
@charset "Shift_Jis";

body {
background-attachment: scroll;
}

h2{
list-style-type:none;
float:left;
}

#syoku{
clear:left;
float:left;
padding-right:100px;
background-color:#339933;
height:650px;
}

.calender{
height:200px;
width:200px;
}

/*ここから真ん中*/

#center{
float:left;
background-color:#33CC00;
width:390px;
height:60px;
}

.register{
height:200px;
float:left;
padding-right:20px;
background-color:#99CCCC;
}
#login{
width:100px;
background-color:#66FF99;
}

#right{
float:left;
width:150px;
background-color:#D2691E;
}
#noukaletter{
background-color:#FF33CC;
width:140px;
height:30%;
}
#noukanews{
background-color:#FF00CC;
width:100px;
height:40%;
}

/*ここまで右側*/