保持窗口大小調整後網頁不移動的內容

-3

當我重新調整網頁大小時，我的網站www.toontownclassic.com 出現問題，所有文本都移到頁面左側。我想保持#Date & By和#NewsPosts不會移位。這是我的代碼。保持窗口大小調整後網頁不移動的內容

CSS

html, body { 
width: 100%; 
height: 100%; 
background-image:url(../images/Background.jpg); 
background-repeat: no-repeat; 
} 

#container { 
left: 50%; 
width:400px; 
/* margin-top:260px; 
margin-left: -200px; 
position: fixed; 
} 


#DateAndBy { 
width: 75%; 
/* margin-top:260px; If you want to use the margin-top */ 
margin-left:auto; 
margin-right:auto; 
text-align: center; 
padding: 30px; 
} 

#NewsPosts { 
width:100%; 
left: 0; 
right: 0; 
text-align: center; 
overflow: hidden; 
background:#fff; 
}

HTML

<!--DateAndBy--> 
     <div id="DateAndBy"> 
      <p>Posted By: Tester1223465 on October,21,2014</p> 
      </div> 
      <div id="container"> 
       <div id="NewsPosts"> 
        <p>uhbbyubuybybuiy</p> 
       <br> 
       <br> 
       <br> 
       <br> 
       <b><u>WEBSITE CHANGELOG</u></b> 
       <li>Extended Border size for the news container</li> 
       <li>Text now appears like it would be in news articles</li> 
       <li>Added Logo for Toontown Classic.</li> 
       <li>Font is now Serif as it used to be Arial</li> 
       <li>Fixed spelling errors in code causing website to not re-size   properly</li> 
      </div>

來源

2014-10-29 Mashla X

如果使用固定的元素維度，而不是動態的那麼他們將不會與視調整，因此這些元素內的內容不會移動。 – Zack 2014-10-29 00:28:30

代碼的第一個錯誤是您沒有足夠的空間來處理頁面的行爲。您錯過了HTML5和CSS3的原則。我會考慮研究codeacademy.com和bootstrap。開始緩慢 – LOTUSMS 2014-10-29 00:29:17

-1

如果它是在在toontownclassics.com此刻不在線的網站，那麼至少可以歌劇無法正確渲染它在所有。

你想讓整個頁面居中嗎？在這種情況下，我建議您將所有DIV元素放在它自己的「包裝器」-DIV中，並使用CSS來居中。

<div id="wrapper"> 
    <!-- all other DIV's here --> 
</div>

，並加入到樣式表：

#wrapper { 
    margin: 0 auto; 
    width: 800px; 
} /* Replace 800px with whatever you want */

請讓我知道如果我完全誤解你。

我會建議你快速瀏覽一下這些介紹：

HTML5 Introduction at W3 Schools

CSS3 Introduction at W3 Schools

來源

2014-10-29 00:32:02

保證金：自動0;是不一樣的邊距：0自動。他需要的不僅僅是一個包裝類。並且800px對於內容來說不是一個好的寬度。正確的是在1024px ad 1170px之間，儘管970px在構建在表格佈局上的非響應系統中也很受歡迎，而這又是構建網站的一種可怕方式。 – LOTUSMS 2014-10-29 01:01:51

保持窗口大小調整後網頁不移動的內容

回答

相關問題