0

Webサイトを完成させましたが、問題が発生しています。画面の左側にある他のページへのリンクが緑色で表示されたサイドバーがあります。残りのコンテンツは、サイドバーの右側に黄色で表示されます。私が抱えている問題は、サイトが画面上できれいに見えることですが、サイトを大小の解像度で表示すると、テキストやその他のコンテンツがサイドバーの緑色にシフトします。本体の幅を100%に設定しています。何が問題なのかわかりません。CSS:

body
{
    background-image:url(Images/testbackground.jpg);
    width:100%


}

#Links
{
    float: left;
    width: 10%;
    margin: 0;
    padding: 0;
    height: 200px;



}



#ContentLayout
{
    clear: right;
    float: right;
    width: 80%;
    font-size:18px;
}



#wrapper
{
    margin: 0 auto;
    width:100%;

}

HTML:

<body>

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="OldHome.css" />
<![endif]-->

<div id="wrapper">

<img src="Images/logo.jpg" name="Logo" id="Logo"  />


<div id="Links">
  <a href="index.html"><img src="Images/HomeLogo.jpg" alt="home" border="0px" /></a>
  <br />
  <a href="Programs.html"><img src="Images/ProgramsLogo.jpg" alt="programs" border="0px" /></a>
  <br />
  <a href ="Services.html"><img src="Images/ServicesLogo.jpg" alt="services" border="0px" /></a>
  <br />
  <a href ="Contact.html"><img src="Images/ContactLogo.jpg" alt="contact" border="0px" /></a>
  <br />
  <a href ="OtherLinks.html"><img src="Images/OtherLinksLogo.jpg" alt="links" border="0px" /></a>
  <br />
  <a href ="FAQ.html"><img src="Images/FAQLogo.jpg" alt="faq" border="0px" /></a>
  <br />
  <a href="Feedback.html"><img src="Images/FeedBackLogo.JPG" alt="feedback" border="0px" /></a>
  <br />
  <a href="Photos.html"><img src="Images/PhotosLogo.JPG" alt="photos" border="0px" /></a>
</div>

<div id="header"> 
    <h1><center>

  <u>Home</u>

  <p><img src="Images/OutsideBld2.jpg" width="600" height="500" /></p>
    </center></h1>
</div>
    <div id="ContentLayout">
      <h3 style="padding-left:30px"><center>Mission Statement</center></h3>
<p id="MissionStatement">The Employment Preparation Centre offers employment assistance programs and services to clients at no charge. These are available on a one-on-one basis or in group settings.

Programs and services at The Employment Preparation Centre are based on a belief that a person’s employability is enhanced through &nbsp;self-assessment, knowledge of the current labour market, and development of a return-to-work action plan.</p>
<p id="MissionStatement">
Programs and services at The Employment Preparation Centre are funded through the Department of Advanced Education and Skills under several key divisions.
</p>
<br />
<br />

<p>Trouble finding us?</p>
<!-- Google map START -->
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=10+Main+Street,+Corner+Brook&amp;aq=&amp;sll=39.017445,-98.196116&amp;sspn=35.694805,86.044922&amp;ie=UTF8&amp;hq=&amp;hnear=10+Main+St,+Corner+Brook,+Division+No.+5,+Newfoundland+and+Labrador+A2H+1C6,+Canada&amp;t=m&amp;z=14&amp;ll=48.951917,-57.947721&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=10+Main+Street,+Corner+Brook&amp;aq=&amp;sll=39.017445,-98.196116&amp;sspn=35.694805,86.044922&amp;ie=UTF8&amp;hq=&amp;hnear=10+Main+St,+Corner+Brook,+Division+No.+5,+Newfoundland+and+Labrador+A2H+1C6,+Canada&amp;t=m&amp;z=14&amp;ll=48.951917,-57.947721" style="color:#0000FF;text-align:left">View Larger Map</a></small>
<!-- Google map END -->
<p>This page has <span><?=$hits;?></span> hits</p>
<address>

&copy; 2012
</address>
</div>
</div>

<script type="text/javascript">
  var $buoop = {}
      $buoop.ol = window.onload;
      window.onload=function(){
        if ($buoop.ol) $buoop.ol();
        var e = document.createElement("script");
    e.setAttribute("type", "text/javascript");
        e.setAttribute("src", "http://browser-update.org/update.js");
        document.body.appendChild(e);
      }
    </script>




</body>
</html>
4

4 に答える 4

0

マークアップの順序が原因である可能性があると思います。このJSFiddleのように物事をシフトした場合、レイアウトは、配置する必要がなく、はるかに適応性が高くなります。

于 2012-07-16T13:37:26.283 に答える
0

問題はあなたの幅です。#Linksは常に画面の10%であり、コンテンツ領域は常に画面の80%です。したがって、ビューポートを小さくすると、常に10%と80%の割り当てがあります。フォントは同じままなので、テキストを10%と80%の領域に合わせようとします。

多分あなたは絶対的な幅とメディアクエリでそれを試してみる必要があります

これはフィドルで、まだくだらないcssですが、機能します(修正リンク幅を追加) http://jsfiddle.net/dennym/AGt9L/

于 2012-07-16T13:33:17.750 に答える
0

問題は、すべての列幅をパーセンテージで表示している場合、一部の解像度(ビューポート幅)ではサイトが不安定に見える可能性があることです。メニューバーを固定サイズ(たとえば200px)にし、コンテンツdivを指定するwidth: auto(つまり幅を指定しない)ことをお勧めします。両方のdivはフロートのままにしておく必要があります。ラッパーも固定サイズにします。このように、2つのコンテナは隣り合っています。メニュー列の幅は固定されており、コンテンツ列の幅は、ラッパーの幅である親の幅に加算されます。

HTMLコードも再構築しました。

これがJsFiddleです(画像が機能せず、CSSはまだ少しくだらない)。

于 2012-07-16T13:34:29.913 に答える
0

エリアとテキストの位置が絶対に設定されていることを確認しますか?

于 2012-07-16T13:25:26.283 に答える