2014-02-25 35 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; 
}