2014-02-25 36 views
0

我是新來創建網站,似乎無法找出爲什麼我的網站對齊方式無法正常工作。我的網站不會正確對齊放大和縮小

在所有這三個我的電腦顯示器,該網站看起來不錯:

http://www.spectanium.com

但我看了一下我的一個朋友的電腦上,它看起來是錯誤的。

我有一個主體,然後在右側和左側的空間,但根據我使用顯示器上,出現了不同的空間,它看起來壞...

任何人都可以看看我的代碼,看看我做錯了什麼?

的index.html - >

<html> 
    <head> 
     <title>Spectanium Studios</title> 
     <link rel="stylesheet" type="text/css" href="default.css" /> 
    </head> 


<body> 
    <div id="header"> 
    </div> 


    <div id="menu"> 
     <ul> 
       <a href="http://www.spectanium.com/">Homepage</a><li><a href="/Spectanium%202/products.html">Products</a></li> 
       <li><a href="/Spectanium%202/aboutus.html">About Us</a></li> 
     </ul> 
    </div> 


    <div id="content"> 




     <div id="updatesCol"> 
       <h2>Recent Updates</h2> 
       <h3> * Website Created *</h3> 
       <p></p> 
       <p style="font-size:small">Website is now done!</p> 
     </div> 

     <div id="contentCol"> 
       <h2>Welcome to Spectanium!</h2> 
       <p> 
        <em>So far we have to do a few things before we are ready to roll!</em> 
       </p> 



        <h3>Game Stuff:</h3> 
        <ol> 
        <li>Finish the actual game.</li> 
        <li>Get final graphics.</li> 
        <li>Get final music.</li> 
        <li>Find out distribution method.</li> 
        </ol> 
        <h3>Website Stuff:</h3> 
        <ol> 
         <li>Write descriptions for about us.</li> 
         <li>Improve it</li> 
         <li>Make it pretty</li> 
        </ol> 


     </div> 



    <div style="clear: both;"></div> 

</div> 


<div id="footer"> 
    <p></p> 
    <p> © 2014 Spectanium Studios</p> 
</div> 
</body> 
</html> 

default.css - >

body { 
    margin: 20px 0; 
    padding: 0; 
    background: black; 
     background-image:url('images/background.png'); 
     background-size:100%; 
     background-repeat:repeat-y; 
     width:190%; 
    font: normal "Courier New", Courier, Courier, sans-serif; 
} 

h1, h2, h3 { 
    color: #B13413; 
} 

h2 { 
    font-size: 1.6em; 
} 

h3 { 
    margin: 0; 
    font-size: 1em; 
} 

p, ul, ol, blockquote { 
    margin-top: 0; 
} 

a:link { 
    border-bottom: 1px dotted #CCCCCC; 
    text-decoration: none; 
    color: #3284B5; 
} 

a:hover { 
    border: none; 
} 

img { 
    border: none; 
} 

/* Header */ 

#header { 
    width: 890px; 
    height: 273px; 
     margin: 4px 0 4px 300px; 
    background: url(images/header.png) no-repeat; 

} 


/* Menu */ 

#menu { 

    background: url(images/topborder.png) repeat-x; 
    width: 950px; 
    height: 41px; 
    margin: 0 auto; 
     margin-left:275px; 
     background-color: #a1a1a1; 

} 

#menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
     text-decoration:none; 
} 


#menu li { 
    display: inline; 
     text-decoration:none; 

} 

#menu a { 
    display: block; 
    float: left; 
    height: 28px; 
    padding: 15px 20px 0 20px; 
    text-decoration: none; 
    color: black; 
     font-weight:bold; 
     border-bottom: 0 dotted #DDDDDD; 



} 

#menu a:hover{ 
     height:8px; 
     color: #B13413; 
} 

/* Content */ 

#content { 

    background: url(images/bottomborder.png) repeat-x; 
    width: 950px; 
     background-color: white; 
     margin-left:275px; 
     height: 1000px; 
} 

#updatesCol { 
    float: right; 
    width: 250px; 
     height:1000px; 
     border-left:1px black solid; 
     text-align:center; 

} 

#contentCol { 
    float: left; 
    width: 500px; 
    padding: 20px 0 0 0; 
     margin-left:25px; 


} 


/* Footer */ 

#footer { 
    width: 950px; 
    margin: 0 auto; 
     margin-left:275px; 
    padding: 10px 0; 
    font-size: smaller;   
    background: url(images/bottomborder.png) repeat-x; 
     clear:both; 
} 

#footer * { 
    color: #666666; 
} 
+0

這對我來說很不錯... – Jatin

+0

這是什麼? 0.o也許這是在我嘗試過的其他3臺電腦上出現錯誤... hmpf – AllKeggedOut

+0

這個問題只針對一個瀏覽器還是針對所有人? –

回答

0

這是它是如何顯示我的,在1920×1080運行。

http://s30.postimg.org/s3w6clowg/hello.jpg

問題是你的backgorund。它被設置爲repeat-y,但寬度爲1450,所以它會重複-y,但不會超過這個範圍。

而且它會看起來有點向左,因爲你以像素爲單位設置的所有邊緣,像頭:

4PX 0 4PX 300像素。 所以不管它會從300px的左邊推到右邊。如果我的分辨率很高,它會在頁面的右側顯示出巨大的差距。

+0

我怎樣才能設置它,而不是固定的4px 0 4 px 300px是一個靜態中心對齊,可以調整w/resolution? – AllKeggedOut

+0

使用餘量:0自動;並刪除了很多的利潤 - 留在你的div – arocketman

+0

試試這個:http://jsfiddle.net/6JV3U/ – arocketman

0

這是因爲您使用左側邊距來對齊整個網站,因此當它放大時它仍然對齊到左側。使用餘量:0 auto;將您的網站居中。如果您希望網站保持與當前的左側對齊,請使用百分比。當頁面比背景圖片更寬時,您可能還應該設置背景顏色或重複背景以避免黑色背景。

0

試試這個。

body{ 
    background-position-x:center; 
} 

body > div{ 
    margin:auto !important; 
} 

現在內容集中我向你保證。但它不會感到居中,因爲您使用的背景圖像中的黑色區域不是水平居中的。你可以看到綠線比紅線長。改正這一點,你很好走。 我的建議是,你不具有黑區,實現由CSS enter image description here

0

您指定的背景用圖像的絕對利潤率左,這是造成問題。 我改變了你的CSS文件的一些部分,它對我來說工作正常。

基本上與

margin-left:auto 
margin-right:auto 

變化默認更換絕對利潤。css

body { 
    margin: 20px 0; 
    padding: 0; 
    background: black; 
     background-image:url('http://www.spectanium.com/images/background.png'); 
     background-size:100%; 
     background-repeat:repeat-y; 
     width:100%; 
    font: normal "Courier New", Courier, Courier, sans-serif; 
} 

#header { 
    width: 890px; 
    height: 280px;   
    margin-left:auto; 
    margin-right:auto; 
    background: url(http://www.spectanium.com/images/header.png) no-repeat; 

} 
#menu { 

    background: url(http://www.spectanium.com/images/topborder.png) repeat-x; 
    width: 950px; 
    height: 51px; 
    margin-left:auto; 
    margin-right:auto; 
     background-color: #a1a1a1; 

} 
#content { 

    background: url(images/bottomborder.png) repeat-x; 
    width: 950px; 
     background-color: white; 
     margin-left:auto; 
     margin-right:auto; 
     height: 1000px; 
} 
/* Footer */ 

#footer { 
    width: 950px; 
    margin: 0 auto; 
     margin-left:auto; 
    margin-right:auto; 
    padding: 10px 0; 
    font-size: smaller;   
    background: url(http://www.spectanium.com/images/bottomborder.png) repeat-x; 
     clear:both; 
}