身体不会对齐不同的分辨率

-2

一切工作正常我的默认分辨率;然而，当我在另一个分辨率上运行我的网站时，所有内容都是向右而不是居中。为什么是这样？我曾尝试将溢出设置为0％。身体不会对齐不同的分辨率

下面是HTML文件：

<html> 
    <head> 
     <script type="text/javascript"> 
     </script> 
     <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/> 
    <body> 
     <div id="banner"> 
     <h2 id="bannertext"> Websites4u </h2> 
     </div> 

     <div id="buttonbar"> 
      <a id="homeb" href="webpageone.html">Home</a> 
      <a id="aboutb" href="fake.html">About</a> 
      <a id="contactb" href="webpage2.html">Contact Us!</a> 

     </div> 

     <div id="mainbody"> 

     <p id="radio"> 
     3gb: <input type="radio" name="age" value ="<3gb"> <br> <br> 
     4gb: <input type="radio" name="age" value ="4gb"> <br> <br> 
     8gb: <input type="radio" name="age" value ="8gb"> <br> <br> 
     16gb: <input type="radio" name="age" value ="16gb"> <br> 
     </p> 

     <h4 id="bodytext"> Please Select Your Hardware </h4> 

     <h3 id="Ram"> Ram </h3> 

     </div> 
    </body> 
</html>

这里是CSS：

*{ 
     margin:0; 
     padding:0; 
    } 

    h1 { 
     color:blue; 
    } 
    body{ 
     width:1280px; 
     height:720px; 
     background-image:url("background colour.jpg"); 
     overflow:hidden; 
    } 
    #banner{ 
     position: relative; 
     height: 50px; 
     width: 148%; 
     border: medium solid BFBDBA; 
     background-color:F1C43E; 
     margin:0 auto; 
    } 

    #bannertext{ 
     color:white; 
     text-align:center; 
     font-family:Comic Sans MS, cursive, sans-serif; 
     margin:0 auto; 
    } 

    #buttonbar { 
     position: relative; 
     height: 30px; 
     width: 148% ; 
     border: medium solid BFBDBA; 
     background-color:lightgrey; 
     color:white; 
     margin:0 auto; 
     font-family:Comic Sans MS, cursive, sans-serif; 
     font-style:bold; 
    } 
    #homeb { 
     position: relative; 
     left: 450px; 
    } 

    #aboutb{ 
     position: relative; 
     left: 500px; 
    } 

    #contactb{ 
     position: relative; 
     left: 550px; 
    } 

    a { 
     color: white; 
     font-weight:bold; 
    } 
    a:hover { 
     COLOR: orange; 
     font-weight:bold; 
    } 

    #bodytext{ 
     position: relative; 
     top:50px; 
     left:50px; 
     color:red; 
     font-size:35px; 
     margin:0 auto; 
     font-family:Comic Sans MS, cursive, sans-serif; 
    } 

    #mainbody{ 
     position: relative; 
     background-color: white; 
     height: 1000px; 
     width: 80%; 
     left: 30%; 
     top: 5px; 
     border:medium solid F1C43E; 
    } 

    #radio{ 
     position: absolute; 
     top: 240px; 
     left:100px; 
     font-size: 18px; 
     margin:0 auto; 
    } 

    #Ram{ 
     position: absolute; 
     top: 176px; 
     left: 100px; 
     font-size: 30px; 
     color: Green; 
     margin:0 auto; 
     font-family:Comic Sans MS, cursive, sans-serif; 
    }

来源

2012-12-24 Lewis Wilson

很难迅速解决所有的问题。你的基本错误是你有每个项目的绝对值。

例如：

body{ 
    width:1280px; 
    height:720px; 
    background-image:url("background colour.jpg"); 
    overflow:hidden; 
}

由于宽度的规定在那里，你的内容总是会有1280px宽度，当你打开它宽度较小的屏幕上，将与1280px宽度，因为来仍然呈现溢出：隐藏，你会看到它就像它被转移到右侧。当你用电脑做某事时，它不会做你想做的事情，而是你要求做的事情。而溢出：隐藏只是隐藏可见区域外的所有内容，而不是像你想要的那样放置中心内容。

对于#buttonbar：

#buttonbar { 
    position: relative; 
    height: 30px; 
    width: 148% ; 
    border: medium solid BFBDBA; 
    background-color:lightgrey; 
    color:white; 
    margin:0 auto; 
    font-family:Comic Sans MS, cursive, sans-serif; 
    font-style:bold; 
    }

- 甚至不知道为什么你需要width:148%这里。它里面的按钮都集中绝对位置：

#homeb { 
    position: relative; 
    left: 450px;  
}

左：450像素严格的说，到浏览器：嘿，把这个#homeb其父块内的第450像素。浏览器会这样做，并且不会将它移到更多的位置，因为您希望它居中。你可以告诉他，把所有按钮中心：

#buttonbar { 
     height: 30px; 
     text-align:center; 
     border: medium solid BFBDBA; 
     background-color:lightgrey; 
     color:white; 
     margin:0 auto; 
     font-family:Comic Sans MS, cursive, sans-serif; 
     font-style:bold; 
    }

文本对齐：中心; - 这会告诉浏览器将#buttonbar中的内容居中，而不取决于它的宽度，并且不需要为#homeb，#aboutb和#contactb定义类。

依此类推。有很多地方需要解决。我给了你一个起点。这里是演示，已经为你做了一些改变：http://jsfiddle.net/2rM6K/7/

你只需要了解你的代码对于浏览器的每一行意味着什么，如果你想得到正确的工作。如果你不明白事情是如何运作的 - 网络上有很多信息，人们随时准备帮助你。只是不要指望在编写代码时发生一些魔法 - 你必须知道事情是如何工作的。阅读，尝试，试验，再读一遍，再试一次，再试验一次，直到你开始理解为什么以及如何工作。

来源

2012-12-24 19:08:56

page 
{ 
Margin-right:auto; 
margin-left:auto; 
width:800px; 
}

您可以根据您的要求更改宽度。

来源

2012-12-25 05:01:32

身体不会对齐不同的分辨率

回答

相关问题