網站加載到右側，直到完成，然後中心

有此問題的人的Stackoverflow有2個其他線程。兩者都不適用於我。一個是關於JavaScript的東西。我在瀏覽器上禁用了JavaScript，仍然這樣做。網站加載到右側，直到完成，然後中心

另一個是adsense橫幅，我沒有在這個頁面上。

有人可以給我一個想法，爲什麼這是加載到右側，然後集中在頁面完全加載？

謝謝！

http://www.halotracker.com/Reach/TrueSkillLB.aspx?GameType=Competitive&Playlist=13

2011-10-13 bladefist

CBRacer讓我開始了，但讓我掛了。仍然需要幫助。 – bladefist

您的網站上的HTML存在超過3000個錯誤。 http://validator.w3.org/check?uri=http%3A%2F%2Fwww.halotracker.com%2FReach%2FTrueSkillLB.aspx%3FGameType%3DCompetitive%26Playlist%3D13&charset=%28detect+automatically%29&doctype=Inline&group=0修復這些可能會對解決您的問題有很大的幫助。即使沒有，找到錯誤也會容易得多。 – twsaef

是的，我看着你的鏈接，肯定有一些醜陋可以修復。但其中90％是類似於圖像和類似東西的東西。不過謝謝，我會更加關注這一點。 – bladefist

嗯，這很難說，但是這可能是因爲「位置：絕對」的右邊框的

也許你應該擺脫表居中你的主要內容，從而爲不要混淆瀏覽器對頁面上每個元素的位置。

試試這一個HTML：

<div class="SiteBody"> 
<!-- remove table stuff here --> 
    <div class="container"> 
    <!-- Your content --> 
    </div> 
<!-- remove table stuff here --> 
</div>

這個CSS：

.SiteBody {text-align:center;} 
.container {width:1062px;margin:0 auto;text-align:left;position:relative;}

來源

2011-10-13 15:04:32 fboes

我仍然需要一種方法來顯示左側和右側圖像，並將它們對準中心 – bladefist

你在哪裏看到絕對位置？ – bladefist

這是因爲你對錶寬度設置爲100％，有兩個與*確定列填充。 *字符會告訴表格以確定剩餘的寬度並將其填入表格中。因此，瀏覽器呈現第一個*少於中央列的固定寬度。它甚至沒有渲染第三列直到發生對中。你可以看到這個與螢火蟲和停止負載，當它仍然對齊到右側。

<div class="SiteBody"> 
<table width="100%"> 
    <tbody> 
    <tr> 
    <td width="*"></td> 
    <td width="1062"></td> 
    <td width="*"></td> 
    </tr> 
    </tbody> 
</table> 
</div>

我會這樣說一次，因爲很多人可能會跳這個。你不應該使用表來設置佈局，這是不好的做法，它可以給你像你所看到的問題。也就是說，我的良知很清楚。

您可以刪除第一個和第三個TD，刪除寬度100％並在父容器中設置背景。在我看來，這將是處理它的最佳方式。設置邊距爲0，自動，這應該給你你想要的一切。

<div class="SiteBody"> 
<div class="SiteMiddle">//site content</div> 
</div> 

<style> 
.SiteBody { background: transparent url(image of background) } 
.SiteMiddle { width:1062px; margin: 0, auto; } 
</style>

OR這可能是因爲這層的div的最佳途徑，並允許您設置爲背景的左側和右側，還設置了中心的內容與正確的寬度

<div class="SiteBody"> 
<div class="SiteLeft"> 
    <div class="SiteRight"> 
    <div class="SiteMiddle">//site content</div> 
    </div> 
</div> 
</div> 

<style> 
.SiteBody { } 
.SiteLeft { background: transparent url(image of left background) no-repeat left top; } 
.SiteRight { background: transparent url(image of left background) no-repeat right top; } 
.SiteMiddle { margin: 0, auto; width: 1062px; } 
</style>

來源

2011-10-13 15:05:45 CBRRacer

左右td是自動的，因爲它們的背景過大，以補償屏幕非常大的人。所以如果你的分辨率不是很寬，你基本上看到的只是主要的網站。如何在沒有表格的情況下完成相同的任務？ – bladefist

@bladefist查看我的編輯 – CBRRacer

@bladefist也只是一個提示，除非您使用多次在同一頁面上引用類，它應該很可能是一個ID。這並不是說代碼有任何不同，只是最佳做法。（class =在同一頁面上多次呼叫，ID =每頁一次呼叫） – CBRRacer

不要使用表格進行佈局。

它們導致頁面渲染速度更慢，並可能導致很晚的調整。我相信你已經注意到了這一點;）

該網站的設計看起來不是很複雜。我建議你在不使用表格作爲佈局的情況下重新制作它（播放列表的表格當然很好）。

來源

2011-10-15 20:50:04 Halcyon

我已經完成了這個，從CBRRacer的評論開始。已經無法用DIV複製它 – bladefist

是的，這是整點不是嗎？ :) – Halcyon