網站佈局問題

我有一個網站已完成，但我有一個問題。我有一個側邊欄，帶有綠色屏幕左側其他頁面的鏈接。其餘內容位於側邊欄的黃色右側。我遇到的問題是，該網站在我的屏幕上看起來不錯，但是，當我以更大或更小的分辨率查看網站時，文本和其他內容會轉移到側欄的綠色中。我的身體寬度設置爲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>

來源

2012-07-16 TheAce

也許你可以JSFiddle嗎？謝謝。 – fedosov 2012-07-16 13:09:28

html也很有幫助。 – 2012-07-16 13:10:27

希望有所幫助 – TheAce 2012-07-16 13:16:57

確保的位置上，你區和文本設置爲絕對？

來源

2012-07-16 13:25:26

問題是你的寬度。＃鏈接始終爲屏幕的10％，內容區域始終爲屏幕的80％。所以如果你減小視口總是有10％和80％的分配。字體保持不變，所以它會嘗試將文字放入10％和80％的區域。

也許你應該給人以絕對寬度的嘗試和mediaqueries

這裏是一個小提琴，它仍然蹩腳的CSS，但它的工作原理（增加了一個固定鏈接寬度） http://jsfiddle.net/dennym/AGt9L/

來源

2012-07-16 13:33:17

的問題是，如果你有所有列寬在百分比該網站可能看起來糟糕的一些決議（視口寬度）。我建議您將菜單欄設置爲固定大小（例如200px）並給出內容div width: auto（即無寬度）。兩個div都應該保持浮動狀態。使包裝也固定大小。這樣，兩個容器在彼此旁邊。菜單列具有固定的寬度，而內容列的寬度加起來就是包裝寬度的父寬度。

我重組了你的HTML代碼。

這是一個JsFiddle（圖像不工作，CSS仍然很蹩腳）。

來源

2012-07-16 13:34:29

我認爲你的訂單可能是責備。如果你像in this JSFiddle那樣移動東西，則佈局更具適應性，而不必定位：絕對;

來源

2012-07-16 13:37:26 chipcullen

網站佈局問題

回答

相關問題